CSS-03

# 盒子模型

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

# 看透网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

其实就是把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

# 盒子模型（Box Model）

所谓盒子模型：

就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
外边距（margin）、
边框（border）、
内边距（padding）、
实际内容（content）四个属性。

首先，我们来看一张图，来体会下什么是盒子模型。

1.所有的文档元素（标签）都会生成一个矩形框，它描述了一个文档元素在网页布局汇总所占的位置大小。

2.因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

拿水果来比喻帮助记忆:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            /* 内边距 */
            padding: 10px;
            /* 边框 */
            border: 20px solid red;
            /* 外边框 */
            /* 盒子与盒子的距离 */
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        Hello
    </div>
    <div class="box">
        Hello
    </div>
</body>
</html>

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
27
28
29
30

结果

# 盒子边框（border）

边框就是柚子皮。

语法：

border : border-width | border-style | border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框样式（border-style），常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线  
dotted：边框为点线
double：边框为双实线

1
2
3
4
5

我们在开发中，经常把表单原本的边框去掉，然后添加任意的样式。（border: 0）

# 边框综合设置

border : border-width || border-style || border-color

/*没有顺序*/   
border: 1px solid red;

1
2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            /* 边框的粗细 */
            border-width: 5px;
            /* 边框的样式  实线*/
            border-style: solid;
            /* 边框的样式  虚线*/
            border-style: dashed;
            /* 边框的颜色 */
            border-color: aqua;
            /* 双实线 */
            border: 20px double orange;
        }
    </style>
</head>
<body>
    <div class="box">box</div>
</body>
</html>

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
27
28

结果

# 圆角边框(CSS3)

从此以后，我们的世界不只有矩形。radius 半径（距离）

允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

语法格式：

border-radius: 左上角  右上角  右下角  左下角;

其中每一个值可以为数值或百分比的形式。
技巧：让一个正方形变成圆圈
```
border-radius: 50%;
```
1
以上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。
而我们这里矩形就只用用高度的一半就好了。精确单位。

演示例子风车：

fengche

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            width: 410px;
            height: 410px;
            /* border: 1px solid #ccc; */
            transition: all 5s;
            margin-top: 200px;
            margin-left: 400px;
        }
        .con div {
            width: 200px;
            height: 200px;
            background-color: rgb(53, 234, 53);
            display: inline-block;
        }
        .con1 {
            border-radius: 0px 200px 0px 200px;
        }
        .con2 {
            border-radius: 200px 0px 200px 0px;
        }
        .con:hover {
            /* 旋转 */
            transform: rotate(3600deg);
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con2"></div>
        <div class="con1"></div>
    </div>
</body>
</html>

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 内边距（padding）

padding属性用于设置内边距。 是指边框与内容之间的距离。

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

1
2
3
4

# 属性值设置

温馨提示：后面跟几个数值表示的意思是不一样的。

值的个数	表达意思
1个值	padding：上下左右边距比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距左右边距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3个值	padding：上边距左右边距下边距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4个值	padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

# 外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距  下外边距  左外边

1
2
3
4
5

取值顺序跟内边距相同。

# 外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

# 文字(行内元素)居中

文字水平居中是 text-align: center
盒子水平居中:左右margin 改为 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

1
2

# 清除元素的默认内外边距

为了更方便地控制网页中元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

1
2
3
4

注意：行内元素是只有左右外边距的，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。

# 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

# 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

www

解决方案：不要这样设置。

# 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

可以为父元素定义1像素的上边框或上内边距。

可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

# 盒子阴影

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值 (opens new window)寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

注意:

前两个属性是必须写的。其余的可以省略。

默认是外阴影 (outset) ，不用设置，想要内阴影设为 inset 。

X轴与Y轴如果有值，就改变了（正值向右向下）

div {
    width: 200px;
    height: 200px;
    border: 10px solid red;
    /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
    /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
    box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);			
}

1
2
3
4
5
6
7
8

# overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible(默认) : 　不剪切内容也不添加滚动条。
auto : 　 超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条

1
2
3
4

应用:溢出的文字隐藏

.hid-kk{
    width: 100px;
    height: 100px;
    display: block;
    /*1. 先强制一行内显示文本*/
    white-space: nowrap;
    /*2. 超出的部分隐藏*/
    overflow: hidden;
    /*3. 文字用省略号替代超出的部分*/
    text-overflow: ellipsis;
}

1
2
3
4
5
6
7
8
9
10
11

# CSS 三大特性

层叠,继承,优先级是我们学习CSS 必须掌握的三个特性。

# CSS层叠性

所谓层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。

可以这样理解权重：这个选择器对于这个元素的重要性。

# CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

注意：

1.**所以对于字体、文本属性等网页中通用的样式可以使用继承。**例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。

2.并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素高属性。

# CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。

!important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的

比如的例子：

选择器	权重
div ul li	0,0,0,3
.nav ul li	0,0,1,2
a:hover	0,0,1,1
.nav a	0,0,1,1
#nav p	0,1,0,1

注意:

1.数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

2.继承的权重是 0

帮助我改善此页面

#JavaWeb

上次更新: 2024年3月20日

← CSS-02 CSS-浮动(float)→