Box模型
width的默认值是:auto
min-width:最小宽度
max-width:最大宽度
padding:填写顺序上右下左
border:三个属性:width, style,color
boder-radius:圆角
margin的上下传递
margin-top:块级元素的顶部线和父元素的顶部线重叠,那么块级元素的margin-top值会传递给父元素
margin-bottom(很少出现):块级元素的顶部线和父元素的底部线重叠,并且父元素高度为auto.则块级元素的margin-bottom值会传递给父元素
如何防止
- 给父元素设置padding-top/padding-bottom
- 给父元素设置border
- 触发BFC:设置overflow为auto
margin的上下折叠(collapse)
垂直方向上相邻的2个margin有可能会合并为1个margin,这种现象叫做collapse(折叠)
两个值取较大的.
outline
外轮廓类似于border,但它不占box的空间.
box-shadow
- box-shadow:offset-x offset-y blur-radius spread-radius color
可以通过box generator网站在线查看阴影参数
text-shadow
- text-shadow:offset offset-y blur color;
同样也可以通过text generator来查看阴影参数
box-sizing
content-box:padding,border都布置在width,height外边
padding,border都布置在width,height里面
boxsizing添加场景
明确设置width的时候才需要加入boxsizing:border-box,以保证不会撑出父div.
未设置width时,默认值为auto,此时即使你加border,它都不会撑出父div,
场景3 flex布局中,align-items默认值为normal,意味着不写height,可以将子元素高度拉伸至父div,此时你添加border也不会冲出父div
总之,只要是auto自动填充情况下就不需要box-sizing
块级元素水平居中
margin: 0 auto;
行内非替换元素span/a的Box
- weight/height不生效
- padding:上下会被撑起来但不占空间.左右正常
- border:上下会被撑起来但不占空间.左右正常
- margin:上下的margin不生效.左右正常
文本太多单行显示
white-space:nowrap; 不换行
overflow:hidden;
text-overflow:ellipsis;
如果是保留两行显示还需要把white-space去掉并加上如下:
display:-webkit-box;
-webkit-line-clamp:2
-webkit-box-orient:vertical;
可能与flex布局起冲突
子元素{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;}
想要让子元素的文本超出一行时为…
父元素需要设置如下:
父元素:{display:flex; flex:1; overflow:hidden}