1200字范文 > html+css基础-1-屏幕居中双飞翼布局清除浮动

html+css基础-1-屏幕居中双飞翼布局清除浮动

时间：2024-07-31 00:53:21

一，屏幕居中

1，利用auto自动填充剩余空间

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div{width: 200px;height: 200px;background-color: red;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}</style></head><body><div></div></body></html>

2,利用transform移动定位

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div{width: 200px;height: 200px;background-color: red;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}</style></head><body><div></div></body></html>

二，双飞翼布局(两边固定宽度，中间自适应)

1，正常的双飞翼布局，用flex

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><style type="text/css">*{margin: 0;padding: 0;}.main{display: flex;}.right,.left{background-color: green;width: 200px;}.middle{background-color: red;flex: 1;}</style><body><div class="main"><div class="left">左</div><div class="middle">中</div><div class="right">右</div></div></body></html>

2,要求中部先渲染的，用float加上margin负值移动

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><style type="text/css">*{margin: 0;padding: 0;}.main>div{float: left;}.contain{width: 100%;}.middle{background-color: red;margin: 0 200px;}.left{background-color: pink;width: 200px;margin-left: -100%;}.right{background-color: yellow;width: 200px;margin-left: -200px;}</style><body><div class="main"><div class="contain"><div class="middle">中</div></div><div class="left">左</div><div class="right">右</div></div></body></html>

先是让三者都左浮动，然后中间元素的子盒子给左右200px的margin.

因为一行不够用，所以现在是被挤到下一行：

再给左边的，让她margin-left移动一个屏幕宽度，右边的移动一个自身宽度，就完成了：