小舞很执着

这个屌丝很懒，什么也没留下！

热门标签

CSS笔记（三）_css父子关系嵌套写法

作者：小舞很执着 | 2024-07-15 08:43:30

踩

css父子关系嵌套写法

1. 盒子模型

页面布局要学习三大核心：盒子模型、浮动、定位

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子Box。
利用CSS设置好盒子样式，然后摆放到相应位置。
往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子。

1.2 盒子模型（Box Model）组成

所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。
盒子里的内容
在这里插入图片描述
盒子模型的组成：

border(边框)
content(内容)
padding(内边距)
margin(外边距)

1.1 边框（border）

border可以设置元素的边框。

边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
语法：border : border-width | | border-style || border-color

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

1.1.1 border-style（边框类型）和border-color

border-style值	意义
none	没有边框即忽略所有边框的宽度（默认值）
solid	边框为单实线（最为常用的）
dashed	边框为虚线
dotted	边框为点线

div {
            width: 300px;
            height: 200px;

            border-width: 5px;
            border-style: dashed;
            
            border-color: pink;
        }
1
2
3
4
5
6
7
8
9

1.1.2 边框简写border

边框简写：border: 1px solid red;没有顺序

边框分开写法：
border-top: 1px solid red; 只设定上边框
boder-bottom: 5px bashed pink;只设定下边框

      div {
            width: 300px;
            height: 200px;

            border-top: 5px solid pink;
            border-bottom: 3px dashed red;
            border-left: 2px dotted green;
            border-right: 2px double yellow;
1
2
3
4
5
6
7
8

在这里插入图片描述
例子：设定上边框红色，其余边框蓝色。（利用层叠性）

        div {
            width: 200px;
            height: 200px;
            border: 5px solid blue;
            border-top: 5px solid red;
        }
1
2
3
4
5
6

在这里插入图片描述

1.1.3 表格的细线边框 border-collapse（边框合并）

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：border-collapse: collapse;

collapse单词是合并的意思
border-collapse：collapse;表示相邻边框合并在一起

<style>
        table {
            width: 500px;
            height: 249px;
        }

        table,
        td {
            border: 1px solid pink;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>12</td>
                <td>12</td>
                <td>12</td>
                <td>12</td>
                <td>12</td>
            </tr>
            <tr>
                <td>142</td>
                <td>142</td>
                <td>142</td>
                <td>142</td>
                <td>142</td>
            </tr>
            <tr>
                <td>3797</td>
                <td>3797</td>
                <td>3797</td>
                <td>3797</td>
                <td>3797</td>
            </tr>
        </tbody>
    </table>
</body>
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
48
49
50

在这里插入图片描述
如果没有 border-collapse: collapse;就会变成单元格td线变粗（没有合并）。

1.1.4 边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此我们有两种方案解决：

测量盒子大小的时候，不量边框
如果测量的时候包含了边框，则需要在设定 width/height 时减去边框宽度

1.2 内边距（padding）⭐

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

属性	作用
padding-left	左内边距
padding-right	右内边距
padding -top	上内边距
padding-bottom	下内边距

padding简写属性：

值的个数	表达意思
padding : 5px;	1个值，代表上下左右都有5像素内边距
padding :5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding :5px 10px 20px 30px	4个值，上是5像素，右是10像素，下20像素，左是30像素，顺时针

以上四种情况，我们实际开发都会遇到。

1.2.1 padding会影响盒子大小的情况⭐

⭐当我们给盒子指定padding值之后，发生了两件事：

内容和边框有了距离，增加了内边距。
padding影响了盒子的实际大小
⭐也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/828508?site