盒子模型

Posted 2020-10-03 代码森林

盒子模型

width

height

margin 一个值代表四个方向边距|两个值分别代表上下和左右|三个值分别代表 上、左右、下|四个值分别代表上右下左。

padding

border :left|right|top|bottom color|width|style 位置可变，颜色可省

content

技巧：

1、布局时将盒子在浏览器中水平居中：margin：opx auto |margin-left:auto; margin-right:auto;

2、*{ margin:0;padding:0}

3、选择器

后代选择器:li a{} ; item a{}

并集选择器:li,a{}

float：left|right|none

一个元素的所有子元素都使用了浮动，则父元素高度为0，后续布局会受到影响。

清除浮动影响：

1、style="clear:both" both|left|right 在父元素中添加一个块级元素设置。

2、为父元素添加如下样式类

.clearfix:after{ after|before之前之后添加内容

content:"";

display:table;

clear:both; 生成BFC

}