文章目录
盒子模型
盒子模型介绍
页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
内容区域的宽度和高度
作用：利用width 和height 属性默认设置是盒子内容区域的大小，数字+px
边框 border
作用：给设置边框粗细、边框样式、边框颜色效果
| 作用 | 属性 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线solid、虚线 dashed、点线dotted |
| 边框颜色 | border-color | 颜色取值 |
border连写形式：
border: 1px solid #000;
border单方向设置：
border -方位名词，border-top：10px dashed yellow；
内边距 padding
作用：设置边框与内容区域之间的距离
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding: 10px; | 上右下左都设置为10px |
| 二个值 | padding: 10px 20px; | 上下都设置为10px，左右设置为20px |
| 三个值 | padding: 10px 20px 30px; | 上设置10px，左右设置为20px，下设置为30px |
| 四个值 | padding: 10px 20px 30px 40px; | 上设置为10px，右设置为20px，下设置为30px，左设置为40px |
padding单方向设置：
padding -方位名词，padding-left : 50px;
盒子实际大小计算公式：
盒子宽度= 左边框+ 左padding + 内容宽度+ 右padding + 右边框
盒子高度= 上边框+ 上padding + 内容宽度+ 下padding + 下边框
当盒子被border和padding撑大后，自己计算多余大小，手动在内容中减去（手动内减）
给盒子设置属性box-sizing:border-box ，浏览器会自动计算多余大小，自动在内容中减去
不会撑大盒子的特殊情况：
块级元素如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度，此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
外边距 margin
作用：设置边框以外，盒子与盒子之间的距离
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | margin: 10px; | 上右下左都设置为10px |
| 二个值 | margin: 10px 20px; | 上下都设置为10px，左右设置为20px |
| 三个值 | margin: 10px 20px 30px; | 上设置10px，左右设置为20px，下设置为30px |
| 四个值 | margin: 10px 20px 30px 40px; | 上设置为10px，右设置为20px，下设置为30px，左设置为40px |
margin单方向设置：
margin -方位名词，margin-left:50px;
清除默认内外边距：
浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
* {
margin: 0;
padding: 0;
)
外边距折叠现象
-
外边距正常情况：水平布局的盒子，左右的margin正常，互不影响，最终两者距离为左右margin的和
-
外边距合并现象：垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值
解决办法： 只给其中一个盒子设置margin -
外边距塌陷现象：互相嵌套的块级元素，子元素的margin-top 会作用在父元素上，导致父元素一起往下移动
解决办法：
（1）给父元素设置border-top 或者padding-top（分隔父子元素的margin-top）
（2）给父元素设置overflow：hidden
（3）转换成行内块元素
（4）设置浮动
行内元素的margin和padding无效情况：
给行内元素设置margin和padding时，水平方向的margin和padding布局中有效，垂直方向的margin和padding布局中无效
浮动
标准流
标准流又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
浮动
浮动作用:
浮动早期的作用为图文环绕，现在用于网页布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右
浮动代码:
属性名：float
属性值：left、right
浮动特点:
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果：一行可以显示多个，可以设置宽高
- 浮动的元素居中不能通过text-align:center或者margin:0 auto
清除浮动
清除浮动是为了清除浮动带来的影响，如果子元素浮动了，此时子元素不能撑开标准流的块级父元素，需要父元素有高度，从而不影响其他网页元素的布局
清除浮动的方法：
- 直接设置父元素高度
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
height: 300px;
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
- 额外标签法
说明：在父元素内容的最后添加一个块级元素，给添加的块级元素设置clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
.clearfix {
/* 清除左右两侧浮动 */
clear: both;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
</html>
- 单伪元素清除法
说明：用伪元素替代了额外标签
优点：项目中使用，直接给标签加类即可清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
.clearfix::after {
content: '';
display: block;
clear: both;
/* 补充：解决兼容性，隐藏 伪元素*/
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
- 双伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
/* .clearfix::before作用：解决外边距塌陷的问题 */
.clearfix::before,
.clearfix::after {
content: '';
display: table
}
.clearfix::after {
clear: both;
}
</style>
</head>
<body>
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
- 给父元素设置overflow : hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
overflow: hidden;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
定位
定位的基本介绍
网页常见布局方式
- 标准流
块级元素独占一行， 行内元素/行内块元素一行显示多个 - 浮动
可以让原本垂直布局的块级元素变成水平布局 - 定位
可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况
定位的常见应用场景
- 可以解决盒子与盒子之间的层叠问题：定位之后的元素层级最高，可以层叠在其他盒子上面
- 可以让盒子始终固定在屏幕中的某个位置
定位的基本使用
属性名：position
常见属性值：
| 定位方式 | 属性值 |
|---|---|
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
设置偏移值:
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则（离哪边近用哪个）
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离又边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+px | 距离下边的距离 |
静态定位
静态定位是默认值，就是之前认识的标准流。
position: static
注意：
- 静态定位就是标准流，不能通过方位属性进行移动
相对定位
相对于自己之前的位置进行移动
position: relative
特点：
- 需要配合方位属性实现移动
- 相对于自己原来位置进行移动
- 在页面中占位置，没有脱标
应用场景:
- 配合绝对定位组CP（子绝父相）
- 用于小范围的移动
绝对定位
相对于非静态定位的父元素进行定位移动
position: absolute
特点：
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置
应用场景:
- 配合相对定位组CP（子绝父相）
子绝父相
让子元素相对于父元素进行自由移动
子元素：绝对定位，父元素：相对定位，父元素是相对定位，则对网页布局影响最小
子绝父绝特殊场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可
子绝父相水平居中:
- 子绝父相
- left：50%；
- transform：translateX（-50%）；
子绝父相水平垂直都居中：
- 子绝父相
- left：50%；
- top：50%；
- transform：translate（-50%，-50%）；
固定定位
相对于浏览器进行定位移动
position: fixed
特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置
应用场景：让盒子固定在屏幕中的某个位置
元素的层级关系
不同布局方式元素的层级关系：
标准流< 浮动< 定位
不同定位之间的层级关系:
相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素
更改定位元素的层级:
属性名：z-index
属性值：数字， 数字越大，层级越
装饰
垂直对齐
基线：
浏览器文字类型元素排版中存在用于对齐的基线（baseline）
文字对齐问题:
场景：解决行内/行内块元素垂直对齐问题
问题：当图片和文字在一行中显示时，其实底部不是对齐的
垂直对齐方式：
属性名：vertical-align
属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
项目中vertical-align 可以解决的问题：
- 文本框和表单按钮无法对齐问题
- input和img无法对齐问题
- div中的文本框，文本框无法贴顶问题
- div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
- 使用line-height让img标签垂直居中问题
注意：不推荐使用行内块元素让div在一行中显示，因为可能会出现垂直对齐问题，推荐优先使用浮动完成效果
光标类型
设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
边框圆角
让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px 、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
原理：
边框圆角的常见应用：
- 画一个正圆：盒子必须是正方形，设置边框圆角为盒子宽高的一半 border-radius:50%
- 胶囊按钮：盒子要求是长方形，设置border-radius：盒子高度的一半
overflow溢出部分显示效果
溢出部分指的是盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
属性名：overflow
常见属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
元素隐藏
场景：让某元素本身在屏幕中不可见
常见属性：
- visibility：hidden 隐藏元素本身，并且在网页中占位置
- display：none 隐藏元素本身，并且在网页中不占位置，display：block；（显示）
元素透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字，1表示完全不透明， 0表示完全透明
注意：opacity会让元素整体透明，包括里面的内容，如：文字、子元素等
边框合并
场景：让相邻表格边框进行合并，得到细线边框效果
代码：border-collapse：collapse；
用CSS画三角形
场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。
实现原理：利用盒子边框完成
实现步骤：
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为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>
div {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid orange;
}
/*
1. 书写一个盒子
2. 盒子添加四个方向的border, 颜色设置不同
3. 保留其中一个方向的border, 其他方向颜色是transparent
*/
</style>
</head>
<body>
<div></div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
