1、盒子模型简介
1.1 什么是盒子模型
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容（content）、内边距（padding）、外边框（border）、外边距（margin）。
举例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!--<meta charset="utf-8">-->
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 <meta http-equiv="Content-Language" content="zh-cn" />
7 <title>My test page</title>
8
9 <script src="jquery-3.3.1.js"></script>
10
11 <!--line-height设置文字行高，后续增加属性-->
12 <!--text-align设置文字对齐方式，后续增加属性-->
13
14 <!--width和height代表内容属性-->
15 <!--padding内边距属性-->
16 <!--margin外边距属性-->
17 <!--border边框属性-->
18 <style>
19 p {
20 width: 150px;
21 height: 40px;
22
23 line-height: 40px;
24 text-align: center;
25
26 padding: 20px;
27 margin: 10px 20px 30px 40px;
28 border: 30px solid red;
29 }
30 </style>
31 </head>
32
33 <body>
34 <p>测试盒子模型</p>
35 </body>
36 </html>
输出结果：
1.2 书写内边距与外边距时的规则（TRBL顺序）
实际上，有缺省值时，如只有两个值（上右），剩下的下左会取对面的值。
- 如果有四个参数：四个参数分别表示上右下左：h2{margin: 10px 20px 30px 40px;}
- 如果只有一个参数：表示上右下左四个方向都是这一个值：h2{margin: 10px;}
- 如果有两个参数：第一个参数表示上下，第二个参数表示左右（取对面的值）：h2{margin: 10px 20px;}
- 如果有三个参数：表示上右下，左边位置取右边的值：h2{margin: 10px 20px 30px;}
2、属性介绍
2.1 padding内边距
| 属性 | 描述 | CSS | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| padding |
在一个声明中设置所有内边距属性。如果设置padding属性1~4个值，则遵循TRBL的顺序及相关规则。
举例： 1 h1 {
2 padding: 10px 0.25em 2ex 20%;
3 }
4
5 <!--上述表示等价于-->
6 h1 {
7 padding-top: 10px;
8 padding-right: 0.25em;
9 padding-bottom: 2ex;
10 padding-left: 20%;
11 }
|
1 | ||||||||||
| padding-bottom |
设置元素的下内边距。 注意：给行内元素加顶部和底部的内边距是不起作用的，如下例子会不起作用。 1 <style>
2 span {
3 padding-top: 10px;
4 padding-bottom: 10px;
5 }
6 </style>
7
8
9 <span>这是span</span>
10 <div>这是div</div>
|
1 | ||||||||||
| padding-left | 设置元素的左内边距。 | 1 | ||||||||||
| padding-right | 设置元素的右内边距。 | 1 | ||||||||||
| padding-top | 设置元素的上内边距。 | 1 |
原文地址：https://www.cnblogs.com/zyjhandsome/p/9866283.html
时间： 2024-08-07 23:16:38