1.块盒模型
定义:display属性为block的元素
1.盒子类型对比
(1)行盒在页面中不换行,块盒独占一行
(2) 默认浏览器样式表设置的块盒:容器元素,h1-h6,p
默认浏览器样式表设置的行盒:span,a,img,video,audio
2.块盒的组成部分
-
内容 content
定义:内容部分通常叫做整个盒子的内容盒 content.box
(1) width、height,设置的是盒子内容的宽高
-
内边距 padding
定义:盒子边框到盒子内容的距离(1) padding-left padding-right padding-top padding-bottom (简写 padding: top right bottom left) 【分别对应左、右、上、下内边距】
-
边框 border
定义: 盒子模型外框的样式(1)边框(border) = 边框样式(border-style)+边框宽度(border-size)+边框颜色(border-color) (2) border-style和border-size都是速写属性,有top right bottom left四个值
-
外边距 margin
(1)margin属性为给定元素设置所有四个(上下左右)方向的外边距属性, 这是四个外边距属性设置的简写 四个外边距属性设置分别是: margin-top, margin-right, margin-bottom 和 margin-left(指定的外边距允许为负数 (2) margin属性的取值顺序是:(上右下左 ) 如下是简写的四种情况: margin:10px 5px 15px 20px; //上外边距是 10px 右外边距是 5px下外边距是 15px左外边距是 20px margin:10px 5px 15px; //上外边距是 10px右外边距和左外边距是 5px下外边距是 15px margin:10px 5px; //上外边距和下外边距是 10px右外边距和左外边距是 5px margin:10px; // 所有 4 个外边距都是 10px (3)边框到其他盒子的距离,常规流两个盒子的margin重叠 (4)margin的top和bottom属性对非替换内联元素无效,例如<span>和<code>
2. 行盒模型
定义:display属性为inline的元素
- 行盒特点
(1)盒子沿着内容延伸 (2)行盒不能设置宽高 // 调整行盒的宽高,应该使用字体大小,行高,字体类型,间接调整 (3) 内边距(填充区) //水平方向有效,垂直方向仅仅会影响背景,不会占据空间,会覆盖别的盒子,而不是挤走 (4)边框 //水平方向有效,垂直方向仅仅会影响背景,不会占据空间,会覆盖别的盒子,而不是挤走 (5)外边距 //水平方向有效,垂直方向完全无效
``
3.行块盒模型
定义:元素的display属性为inline-block的盒子
- 行块盒特点
(1)不独占一行 (2)块盒模型中所有尺寸全部有效 (3)空白折叠 // 空白折叠,发生在行盒内部 或 行盒之间,原因是存在换行符(br) (4)可替换元素 和 非可替换元素 大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素(div a p) 少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素(img video audio) <video> 标签定义视频,比如电影片段或其他视频流。 <audio> 标签定义声音,比如音乐或其他音频流。 (5) 绝大部分的可替换元素都为行盒,类似于行块盒,盒模型中所有尺寸都有效 例: img元素->图片自动适应宽高,object-fit(css3属性):fill(默认取值,填充满盒子) contain(不打破比例显示,以宽高中最短的为标准) cover(不打破比例,又要填充满盒子,牺牲图片信息)