css的布局

css左右布局

双浮动|左右布局：

双浮动，左右布局，右边自适应

双浮动：

• 在子元素下面添加float，在父元素上面加上clear，清除浮动效果后父元素的塌陷。
• 右边div加上%显示，可以根据页面的伸缩而拉伸，即为自适应。

css左中右布局

image
添加了多一个div来容纳中“蓝色”，子元素设置浮动，父元素清除

左中右布局布局与左右布局类似，就是中间多了一栏，也可以称为三栏布局。
首先在HTML结构上，相比左右布局，多了一个div，因为要多一个容器来容纳“中"。

---

css居中

水平居中

水平居中有很多种，常用的有：一段文字在一个块级元素里面水平居中，一个块级元素在一个页面里面水平居中。

我们一个一个来，先来说说：

• 行内元素文字在一个块级元素里面水平居中

  
  text-align:center

• 一个块级元素在一个页面里面水平居中：

  
  margin:0 auto;上下为0左右自适应

• 直接通过设置外边距使一个块级元素在页面水平居中。

垂直居中

• 行内元素的垂直居中：

  
  直接设置line-height属性与块级元素高度一样即可

• 块级元素的垂直居中：

  
  在已知块级元素高度情况下，利用定位完成。

• 水平垂直居中（多用于页面的登录框）：

  
  image

position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;

CSS小技巧

**.clearfix::after{
content:'';
display:block;
clear:both;}
**背下来
解决float:right;浮动的bug
color 颜色
text-decoration:none 去掉下划线
padding:; 外边距
margin:; 内边距
weigh: 宽
height: 高
font-family:; 文字字体
font-sizi:; 文字大小
border:; 边框
list-style:none; 去掉列表前的点