1.水平垂直居中:
(1)flex布局:
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
其中 flex-direction:row的时候,需要垂直居中使用:align-items: center;
相反是column的时候,需要水平居中:需要设置 justify-content:center;
(2)使用绝对定位和负边距:
.container {
position: relative;
}
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2.盒模型
margin:外边距
padding:内边距
border:边框
content:内容
盒模型两种方式,一种是标准盒模型(content-box),一种是ie的盒模型(border-box)
通过box-sizing设置进行设置,标准盒模型的宽高只包含内容,ie盒模型是包括:内边距+边框+内容;
3.超出隐藏
.实现单行、多行文本溢出隐藏
单行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出部分使用省略号显示
white-space: nowrap; // 规定段落中的文本不可换行
多行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式:从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
4.BFC
1.BFC:可以理解为一块独立的区域,不受外界样式的影响
2.BFC触条件:
根元素body
float:除none;
overfloat:除visible;
display:inline-block、flex、table-cell、table-caption
position:absolate、fixed;
3.BFC作用:
1.解决子元素设置成float之后,父元素塌陷问题;解决方法:给父元素设置成bfc;(overfloat:hidden)
2.margin重叠问题:两个元素外边距不会相加,而是会取较大的那个(两个正数取max,两个负数取0-边距较大的那个,一正一负取相加的绝对值);解决方法,给一个元素增加一个div,设置触发bfc的代码(overfloat:hidden)
3.设置成自适应两栏布局,左侧元素左边的宽度固定,右侧宽度自适应;左侧使用float:left,右侧设置overflow: hidden触发bfc,不会与左侧浮动元素发生重叠。