css布局中,最重要的是要理解盒模型。
标准盒模型
MDN盒模型content
内容区,由宽高所覆盖以及内含子元素的区域
padding
内边距,在边框和内容之间的区域
border
边框,在padding之外的包裹内容
margin
外边距,与其他布局元素的间隔区域
盒模型修改
MDN盒模型修改使用box-sizing
修改盒模型,将原本限定宽高的区域从content移到border外部。
原始的width height所表示的区域是 content范围,
使用 box-sizing:border-box
修改之后,其content内容的宽高则为 height-border-padding,width-border-padding 所标识的区域,并且所有内容向内集中,外部宽高保持不变。
两种方式都不包括margin所表示的范围。
outline
盒模型的轮廓线,除去margin的盒模型最大范围。outline本身是不占布局空间,因此不会影响布局。
背景
和box-sizing一样,背景也是有范围大小的,当给元素设定背景时,无论是图片,还是背景色,都会发现,背景范围超过内容区域。因此我们需要对背景做裁剪,使用 background-clip
属性
- 默认 border-box
以元素的边框外沿作为背景覆盖的宽高,宽度为 width + padding+border,高度为height+padding+border - padding-box
以内边框外沿作为背景覆盖宽高,宽度为 width + padding,高度为 height + padding - content-box
以内容区域作为背景覆盖宽高 ,宽度为width 高度为height
如果是行内元素,content的范围就是宽高的值。
内容溢出
当content内容超过限定的height,width时,会发生内容溢出,破坏需要的布局方式。在不修改宽高的情况下,解决办法
overflow
overflow属性标识该盒模型content的展示方式
有三种 超出滚动 scroll,超出隐藏 hidden,还有默认。
常规盒类型
block
默认情况下,水平方向块元素将会单独占行,段落前后有换行符
。可以设置宽高可以修改content区域
inline
默认情况下,行内元素是无法设置宽高的,其content区域由内容撑起,当父级块元素内部无法放置行内元素时,会被折行,并且本身完整性将被折断。段落前后没有有换行符
。
如果行内元素是文本,则设置margin、padding、border时,垂直方向上不占空间,水平方向会占据布局空间。
inline-block
默认情况下,行内块元素保留完整的margin、padding、border以及宽高设置,同时又和行内元素一样,水平方向和其余行内元素共享空间。
可替换元素不可替换元素分类
使用行内元素 img,input,textarea等时,发现其表现形式和行内块基本一致,这是因为,该元素本身并不是由标签决定的,而是将被浏览器替换为其他内容,因此,称为可替换元素。
而其他直接表现为标签内容,称之为不可替换元素,例如span,a等等。
网友评论