盒子模型

知识点

背景

页面中的元素都是一个个方块组成，我们将其称之为盒子模型，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)

盒子模型示例图片

内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 设置宽高 */
width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

/* 设置边框 */
border-top-color:red;    /* 设置顶部边框颜色为红色 */  
border-top-width:10px;   /* 设置顶部边框粗细为10px */   
border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  dashed(虚线)  dotted(点线); */
border-top:10px solid red;  /* 以上内容也可以合并为这一句 */
border:10px solid red  /* 如果四个边框一样则可以直接写成一句 */

/* 设置内间距 */
padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  四个方向的内边距值。 */
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

/* 设置外间距 */
与内间距设置一致

元素分类

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

  • 块元素

    块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

    • 支持全部的样式
    • 如果没有设置宽度，默认的宽度为父级宽度100%
    • 盒子占据一行、即使设置了宽度

  • 内联元素

    内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

    • 支持部分样式（不支持宽、高、margin上下、padding上下）
    • 宽高由内容决定
    • 盒子并在一行
    • 代码换行，盒子之间会产生间距
    • 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

  • 解决内联元素间隙的方法

    • 去掉内联元素之间的换行
    • 将内联元素的父级设置font-size为0，内联元素自身再设置font-size

  • 内联块元素
    内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

    • 支持全部样式
    • 如果没有设置宽高，宽高由内容决定
    • 盒子并在一行
    • 代码换行，盒子会产生间距
    • 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

  • display属性

    display属性是用来设置元素的类型及隐藏的，常用的属性有：

    • none：元素隐藏且不占位置
    • block：元素以块元素显示
    • inline：元素以内联元素显示
    • inline-block：元素以内联块元素显示

技巧

margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 以下方法只有margin使用，padding和border均没有 */

/* 设置元素水平居中（仅适用于左右居中，不适用于上下居中）： margin:x auto; */
margin: x auto;

/* margin负值让元素位移及边框合并 */
body {margin:0;}  /* 设置body的边框为0 */
margin-left: -50px;  /* 设置盒子偏移 */

/* 解决嵌套盒子塌陷的bug（在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败） */
1. 给外部盒子加上一个边框属性
2. 外部盒子设置 overflow：hidden
3. 给外部盒子设置一个伪元素类：
.clearfix:before{
    content: '';
    display:table;
}
/* 设置鼠标悬停时，鼠标下子元素的属性*/
.classname:hover a{
    display:block
}

overflow元素溢出

1
2
3
4
5
6
overflow的设置项：
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。