本文详细介绍了HTML/CSS的盒模型，包括元素的结构（内容、内边距、边框和外边距），边框样式（实线、虚线等）、圆角和轮廓线的设置，以及内边距、外边距的计算。此外，讲解了页面布局中的浮动布局、定位布局（相对、绝对和固定）及其在解决布局问题中的应用，如避免父元素高度为0的问题和使用overflow属性。
一、盒子模型
1、盒模型概念
- 在模型中，规定了元素内容、内边距、边框和外边框
- 最内是内容，包围内容的是内边距，内边距的边缘是边框
- 边框以外是外边距，外边距默认是透明的
2、边框
1.1、边框border
语法：
border:width style color;
边框样式为必填项，分为：
| 样式取值 | 含义 |
|---|---|
| solid | 实线边框 |
| dotted | 点线边框 |
| hashed | 虚线边框 |
| double | 双线边框 |
1.2、单边框border-xx
分别设置某一方向的边框，取值：width style color
| 属性 | 作用 |
|---|---|
| border-top | 设置上边框 |
| border-bottom | 设置下边框 |
| border-left | 设置左边框 |
| border-right | 设置右边框 |
实例：制作一个三角标（元素高、宽为0，保留左边框，将上、中、下边框颜色置为透明）：
<!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>
#test{
width: 0px;
height: 0px;
margin: 0 auto;
border-left: 50px solid orange;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
1.4、圆角边框border-radius
- 属性：border-radius 指定圆角半径
- 取值：像素值或百分比
- 取值规律
- 一个值 表示统一设置上右下左
- 四个值 表示分别设置上右下左
- 两个值 表示分别设置上下 左右
- 三个值 表示分别设置上右下，左右保持一致
实例：绘制一个圆：
<!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>
#test{
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
border: 2px solid blue;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
1.5、轮廓线outline
- 属性：outline
- 取值：width style color
- 区别：边框实际占位，轮廓不占位
- 特殊：取值none可以取消文本输入框默认轮廓线
1.6、盒阴影box-shadow
-
属性：box-shadow
-
取值：h-shadow v-shadow blur spread color;
h-shadow 取像素值，阴影的水平偏移距离 v-shadow 取像素值，阴影的垂直偏移距离 blur 取像素值，表示阴影的模糊程度，值越大越模糊 spread 选填，取像素值，阴影的尺寸 color 设置阴影颜色，默认为黑色
示例：
<!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>
#test{
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
border-radius: 5px;
box-shadow: 5px 5px 8px #777;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
效果如下：
3、内边距
-
属性：padding
-
作用：调整元素内容框与边框之间的距离
-
取值：单位为px或百分比，不允许使用负值
20px; 一个值表示统一设置上右下左 20px 30px; 两个值表示分别设置上下 左右 20px 30px 40px; 三个值表示分别设置上右下，左右保持一致 20px 30px 40px 50px; 四个值表示分别设置上右下左 -
单方向内边距，只能取一个值：
padding-top padding-right padding-bottom padding-left
4、外边距
-
属性：margin
-
作用：调整元素与元素之间的距离
-
特殊：
- margin:0; 取消默认外边距
- margin:0 auto; 左右自动外边距，实现元素在父元素范围内水平居中
- margin:-10px; 元素位置的微调
-
单方向外边距：只取一个值
margin-top margin-right margin-bottom margin-left -
外边距合并
-
垂直相遇
-
元素之间同时设置垂直方向的外边距，最终取较大的值包含合并，如：
<!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> #test1{ margin: 0 auto; height: 100px; width: 100px; background-color: blue; border:1px solid black; margin-bottom: 100px; } #test2{ margin: 0 auto; height: 100px; width: 100px; border:1px solid black; background-color: red; margin-top: 80px; } </style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body> </html>运行结果如下：
-
当一个元素包含在另一个元素中时，他们的上和包含上/或下和包含下外边距也会发生合并，最终的外边距取较大的值。
包含时，要想让合并后的间距生效，可以给外层元素加一个边框，1px即可
示例代码：
未给外层元素加边框时的合并：
<!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> #test1{ margin: 0 auto; height: 300px; width: 300px; background-color: blue; margin-top: 100px; } #test2{ height: 100px; width: 100px; background-color: red; margin-top: 100px; } </style> </head> <body> <div id="test1"> <div id="test2"></div> </div> </body> </html>
结果如下：最终的margin取较大值（100px）
给外层元素加上边框后，即#test1修改如下：
#test1{ margin: 0 auto; height: 300px; width: 300px; background-color: blue; border: 1px solid black; margin-top: 100px; }运行结果如下：
-
-
5、元素最终尺寸(宽/高)
- 最终宽度=width+(padding+border+margin)*2
- 最终高度=height+(padding+border+margin)*2
二、页面布局
默认布局方式，按照代码书写顺序及标签类型从上到下，从左到右依次显示
1、浮动布局
主要用于设置块元素的水平排列
-
属性：
float -
取值
float:left/right -
特点
- 元素设置浮动会从原始位置脱流，向左或向右依次停靠在其他元素边缘，在文档中不再占位
- 元素设置浮动，就具有块元素的特征，可手动调整宽高
- 文字环绕：浮动元素遮挡正常元素的位置，无法遮挡正常内容的显示，内容围绕在浮动元素周围显示
-
问题：
子元素全部设置浮动，导致父元素高度为0，影响父元素背景色和背景图片展示，影响页面布局。
-
解决：
- 对于内容固定的元素，如果子元素都浮动，可以给父元素固定的高度（如导航栏）
- 为父元素设置overflow属性，解决高度0：overflow:hidden;（常用）
2、定位布局
定位布局共3种方式，分别时相对定位relative、绝对定位absolute和fixed。
设置方法：
position:relative
position:absolute
position:fixed
2.1、相对定位
参照元素在文档中的原始位置偏移，不脱离文档流，常用于配合绝对定位使用
2.2、绝对定位
参照已定位的最近的祖先元素进行便宜，脱离文档流。一般是父元素使用相对定位，子元素使用绝对定位。
2.3、固定定位
参照窗口定位，位置固定，脱离文档流。
当元素发生堆叠时，按如下规则显示：
-
定位元素和未定位元素发生堆叠，已定位元素在上
-
定位元素和定位元素发生堆叠，按html书写顺序，后写的在上
-
可使用z-index调整显示位置，默认值为1值越大元素越靠上，如：
z-index: 1000;
扫一扫
1960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
