一、盒子模型

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;
```

【前端基础】盒子模型和页面布局总结相关推荐

04-前端技术_盒子模型与页面布局
目录三,盒子模型与页面布局 1,网页布局介绍 1.1 固定布局 1.2 流式布局(Liquid Layout) 1.3 栅格化布局 1.4 自适应布局(Adaptive Layout) 1.5 响应 ...
CSS盒子模型与页面布局
202209 week1 day5~day6 前端学习 1 盒子模型 1.1 盒子模型结构 1.1.1 内容 1.1.2 边界(margin) 1.1.3填充(padding) 1.1.4 边框(bo ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
week3--CSS基础盒子模型选择器
CSS基础 && 盒子模型 && 选择器今天下午我是V神但是此时此刻 CSS 你是我的神 CSS基础 && 盒子模型 && 选择器 ...
咸鱼前端—CSS盒子模型
咸鱼前端-CSS盒子模型盒子模型盒子边框(border) 圆角边框(CSS3) 内边距(padding) 外边距(margin) 盒子阴影盒子模型所谓盒子模型就是把HTML页面中的元素看作是一 ...
html文件div盒子浮动,css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响...
定义: 在CSS处理页面的时候,它认为每个元素都是包含在一个不可见的盒子里,盒子模型由内容区域.内容区域周围空间(内边距padding).内边距的外边缘(边框,border)和边框外面将元素与相邻元素 ...
了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...
CSS基础——盒子模型【学习笔记】
盒子模型(Box Model) 所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 盒子模型有元素的内容.边框(border).内边距(padding).和 ...

【前端基础】盒子模型和页面布局总结