【 盒模型】css盒模型学习

盒模型

box:盒子，每个元素在页面中都会生产成一个矩形区域（盒子）

盒子类型

1.行盒，display等于inline的元素

2.块盒，dipplay等于block的元素

• 行盒在页面中不换行、块盒独占一行。
• 浏览器默认样式表设置的块盒：容器元素、h1~h6、p
• 常见的行盒：span 、a 、img、 video、 audio

盒子的组成部分

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

无论行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

1.内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的 内容盒 content-box

2.填充(内边距) padding

盒子边框到盒子内容的距离。

属性

该属性是以下属性的简写：

• padding-bottom
• padding-left
• padding-right
• padding-top

语法

/* 应用于所有边 */
padding: 1em;

/* 上边下边 | 左边右边 */
padding: 5% 10%;

/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;

/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

/* 全局值 */
padding: inherit;/* inherit：继承父元素padding */
padding: initial;/* initial：设置padding属性为它的默认值（IE 不支持） */
padding: unset;/* unset：不设置padding */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

padding 属性接受 1~4 个值。每个值可以是 length 或 percentage 。取值不能为负。

length

以固定值为内边距。

percentage

相对于包含块的宽度，以百分比值为内边距。

填充区域+内容区 = 填充盒 padding-box

3.边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式：border-style

边框宽度：border-width

边框颜色：border-color

边框 + 填充区+内容区 = 边框盒 border-box

边距的样式未设置默认为字体颜色

4.外边距 margin

边框到其他盒子（其他边缘）的距离

属性

• margin-top
• margin-right
• margin-bottom
• margin-left

上、下外边框的设置对*不可替换*内联元素，如 ]span) 和 [，无效。

备注： 外边距控制的是元素外部空出的空间。相反，padding 操作元素内部空出的空间。

语法

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

margin 属性接受 1~4 个值。每个值可以是 length，或 auto。取值为负时元素会比原来更接近临近元素。

简写属性：

Margin 和 Padding 属性

margin 和 padding 值的简写版本类似。下面的 CSS 声明：

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
1
2
3
4

和下面的声明是一样的（注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left，与“trouble”的辅音字母顺序相同）。

margin: 10px 5px 10px 5px;
1

Margin 对于多个值有以下的简写规则：

• 当只有一个值声明时，该值会用于所有四个值。
• 当只有两个值声明时，第一个值用于上边距和下边距，第二个值用于左边距和右边距。 （上下 左右）
• 当有三个值声明时，第一个值用于上边距，第二个值用于左边距和右边距，第三个值用于下边距。 （上 左右 下）
• 当有四个值声明时，其会按顺序用于上、右、下、左边距（按顺时针方向）。 （上 右 下 左）

盒模型应用

改变宽高范围

衡量设计稿尺寸的时候，往往使用的是边框盒，但是设置width和height的

css3属性 改变宽高的影响范围 box-sizing:

改变背景覆盖范围：

默认情况下,背景会覆盖边框盒，可以通过 background-clip 属性进行修改

CSS3 background-clip 属性

background-clip: border-box|padding-box|content-box;

background-clip: border-box;  // 默认值。背景延伸到边框外沿（但是在边框之下）   
background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。  
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。 
1
2
3

内容溢出

当div设置了宽高时候，

overflow，控制溢出边框盒后的处理方式。

断词处理

word-break ，会影响文字在什么位置被截断换行 ，指定非CJK脚本的断行规则。

word-break: normal|break-all|keep-all;

word-break: normal; //普通,CJK字符（文字位置截断），非CJK字符（单词位置截断）.使用浏览器默认的换行规则。
word-break: break-all;//截断所有，所有字符都在文字处截断。允许在单词内换行。
word-break: keep-all;//保存所有，所有文字都在单词之间截断。 只能在半角空格或连字符处换行。
1
2
3

**提示:**CJK脚本是中国，日本和韩国（“中日韩”）脚本。

空白处理

单行文本

网页上显示信息，显示不了

单行文本超出隐藏,用…显示

white-space:nowrap;/*不换行*/
 
overflow:hidden;/*超出隐藏*/
    
text-overflow:ellipsis;/*文字溢出超出省略*
1
2
3
4
5

多行文本

多行文本超出隐藏

-webkit内核才有作用，而移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；

"p2">
这是一个div里面的多行文本。如果值为 hidden，当点击hidden时，滚动机制关闭，内容会被修剪，但是浏览器不会显示供查看内容的滚动条，默认值是 visible。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。


CSS

/*多行文本溢出显示省略号*/
        #p2{
            width: 220px;
            height: 58px;
            overflow:hidden;
            text-overflow:ellipsis; 
            background: greenyellow;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
            display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
            -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中；

display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ；

-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 ；

text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。