CSS的两大特性:
层叠性
继承性: 1、文本样式
2、字体样式
3、列表样式
4、表格样式
浮动与定位
浮动
clear:left;right;both;清除前面所有元素的浮动对这个元素的影响。
前面元素哪边浮动就清除哪边,前面所有元素的浮动都清除时用both。
定位
属性
position:
static 没有定位(默认)
absolute;绝对定位
relative;相对定位
fixed;固定定位
top: 数值;
right: 数值;
bottom: 数值;
left: 数值;
overflow:(设置当元素的内容溢出其区域时发生的事情。)
visible;不裁剪
hidden;裁剪
scroll;裁剪并显示滚动条
auto;若内容被裁剪则主动添加滚动条
inherit;
clip:设置元素的形状。只针对于一个绝对定义元素
唯一合法的形状值是:rect (top, right, bottom, left)
vertical-align: 元素的垂直对齐方式。
z-index:元素的堆叠顺序
auto; 堆叠顺序与父元素相等。(默认)
number; 设置元素的堆叠顺序。 (数值越大越靠前)
静态定位
static 没有定位,元素出现在正常流中(默认)
绝对定位
子元素绝对定位时,它是按第一个绝对定位的父元素定位;
绝对定位不考虑默认的“margin”值。
position: absolute;
top: 数值;
left: 数值;
相对定位
元素相对元素原来(在正常流中)的定位
position: relative;
top: 数值;
left: 数值;
固定定位
相对body定位。
position: fixed;
top: 数值;
left: 数值;
各种定位的原位置
相对定位——原来的位置被保留;
绝对定位、固定定位——原位置被清空;
当页面内容多右侧出现滚动条时,固定定位的元素不会随滚动条滚动。
隐藏
display: none; ——原有位置被清空
visivility: hidden; ——原有位置被保留
bfc块级格式化上下文
——block formatting context【块级格式化上下文(环境)】
bfc中的布局原则:
1、在bfc环境中所有元素在垂直方向上一个接一个的放置;
2、相邻盒子(box)在垂直方向上的margin值会重叠;
3、内部盒子会与bfc的左边(右边)线接触,浮动也是这样;
4、bfc区域不会与浮动盒子重叠;
5、bfc环境中子元素与外界分离,不会影响到外面的元素,而外面的元素也不会影响到bfc里面的元素;
6、bfc中浮动元素会参与计算。
——触发bfc——overflow: hidden;
bfc的触发方式:
float: 值不为none时;
position: absolute; fixed;
display: inline-block;table-cell;table-caption;flex;inline-flex;
overflow: 不为visible时;
ifc行级格式化上下文
——inline formatting context【行级格式化上下文(环境)】
1、ifc中的元素会在一行上从左到右排列;
2、在一行上的所有元素会在该区域形成一个行框;
3、行框的宽度为包含框的宽度,高度为行框中最高的元素的高度;
4、浮动的元素不会再行框中,并且浮动会压缩行框宽度;
5、行框的宽度容纳不下子元素时,子元素会换到下一行显示。并会产生新的行框。
6、行框内的元素遵循text-align和vertical-align。
ifc的触发方式:
1、插入空的行级元素
2、在父元素上插入空白行内为元素
1)父级:after(/before){
content: "";
font-size: 0px;
display: inline-block;
width: 0px;
height: 100%;
vertical-align: middle;
2)给所有需要居中的元素添加: vertical-align: middle;