0%

Frontend-Day3——BOX

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}

-------------本文结束感谢您的阅读-------------