2021-06
1.清除浮动的方式
原因:当所有的子元素浮动且父元素未设置高度时,父元素会产生高度塌陷。
解决:
- 给父元素设置高度。(简单,代码少但无法进行响应式布局)
- 父级定义overflow:hidden; (简单,代码少,兼容性强但超出部分会被隐藏)
- 给浮动的元素后加一个空标签并设置样式:clear:both;height:0;overflow:hidden;(简单,兼容性好但增加空标签不利于优化)
- 父级定义overflow:auto;(有点同2,缺点超出部分会出现滚动条)
- 伪元素清除:给塌陷的元素(父元素)添加伪类并设置样式:
.father::after{ content: ''; clear:both; display: block; height: 0; overflow: hidden; visibility: hidden; }
写法固定,兼容性好,但是代码量较多
2.定位相关position属性
1.relative:相对定位,不脱离文档流,相对于自身定位
2.absolute:绝对定位,脱离文档流,相对于父级定位
3.fixed:固定定位,脱离文档流,相对于浏览器窗口定位
4.static:默认,正常流
3.子元素居中问题
水平居中:
1.父子元素宽度固定,子元素设置:margin:auto
子元素不能浮动,否则失效
2.父子元素宽度固定,父元素设置:text-align:center
同上不能浮动
3.1水平垂直居中:
1.flex布局:display:flex;align-items:center;justify-content:center;
2.子绝父相:
(1)子元素固定宽高,设置margin-left/margin-top各为宽高的一半负值
.father{position:relative;}
.child{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
maring-left:-50px;
margin-top:-50px;
}
(2)子元素margin:auto
:
.father{
position:relative;
}
.child{
position:absolute;
margin:auto;
}
(3)transform
.father{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
3.子元素相对定位
.child{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
4.父元素设置display:table-cell;
子元素:margin:auto;
.father{
display:table-cell;
vertical-align:middle;
}
.child{
margin:auto;
}
4.盒子模型
所有的html都可以看成是一个盒子,从外到内分别是外边距margin,边框border,内边距padding,content内容,设置宽高时只是设置盒子content的width和height。
标准盒模型(content-box)width/height不包含padding和border。
盒子真正宽:width + padding左右 + border左右 + margin左右
盒子真正高: height+ padding上下+ border上下 + margin上下
怪异盒模型(border-box)width/height包含padding和border 即设置的宽度包含padding和border
盒子真正宽:width + margin左右
盒子真正高: height + margin上下
设置盒模型:box-sizing: border-box/content-box
5.css选择器
元素选择器,id选择器,类选择器,伪类选择器(hover/link/visited/active)
css3选择器: 空格,">", + 相邻兄弟选择器
伪类选择器:nth-child,nth-of-type
empty空标签选择器
not()否定伪类选择器
5.1选择器权重
继承元素的权重为0
元素,伪元素(before/after/selection)权重为1
类选择器,伪类选择器,属性选择器 权重为10
id选择器权重为100
6.css继承属性
所有元素可继承:visibility 和 cursor
块级元素继承:text-align,text-indent
内联元素继承: font相关的属性,letter-spacing,color,lin-height,word-spacing等