CSS DAY2

最新推荐文章于 2025-12-10 20:30:06 发布

原创最新推荐文章于 2025-12-10 20:30:06 发布 · 910 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

盒子模型：

盒子模型
盒子模型介绍
盒子的概念
页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

内容区域的宽度和高度
内容的宽度和高度
作用：利用width 和height 属性默认设置是盒子内容区域的大小

属性：width /height

常见取值：数字+px

边框（boder)
边框（border）-单个属性
作用：给设置边框粗细、边框样式、边框颜色效果。

单个属性：

作用   属性名   属性值
边框粗细   border-width   数字+px
边框样式   border-style   实线solid、虚线dashed、点线dotted
边框颜色   border-color   颜色取值
边框（border）-连写形式
属性名：border

属性值：单个取值的连写，取值之间以空格隔开，如：border : 10px solid red;(粗细、样式、颜色)

快捷键：bd + tab

边框（border）-单方向设置
场景：只给盒子的某个方向单独设置边框

属性名：border -方位名词

属性值：连写的取值

盒子实际大小初级计算公式
需求：盒子尺寸400*400，背景绿色，边框10px 实线黑色，如何完成？

注意点：①设置width和height是内容的宽高 ②设置border会撑大盒子
盒子实际大小初级计算公式：

盒子宽度= 左边框+ 内容宽度+ 右边框
盒子高度= 上边框+ 内容高度+ 下边框
解决：当盒子被border撑大后，如何满足需求？

解决：计算多余大小，手动在内容中减去（手动内减）

内边距(padding)
内边距（padding）-取值
作用：设置边框与内容区域之间的距离

属性名：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 -方位名词

属性值：数字+ px

盒子实际大小终极计算公式
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

注意点：

①设置width和height是内容的宽高

②设置border会撑大盒子

③设置padding会撑大盒子

盒子实际大小终极计算公式：

盒子宽度= 左边框+ 左padding + 内容宽度+ 右padding + 右边框
盒子高度= 上边框+ 上padding + 内容宽度+ 下padding + 下边框
解决：当盒子被border和padding撑大后，如何满足需求？

自己计算多余大小，手动在内容中减去（手动内减）

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度

此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

外边距（margin）
作用：设置边框以外，盒子与盒子之间的距离

属性名：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
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！（同border的属性）

5.2 外边距（margin）-单方向设置
场景：只给盒子的某个方向单独设置外边距

属性名：margin -方位名词

属性值：数字+ px

5.3 margin单方向设置的应用
应用：

方向   属性   效果
水平方向   margin-left   让盒子向右移
水平方向   margin-right   让盒子向左移
垂直方向   margin-top   让盒子向下移
垂直方向   margin-bottom   让盒子向上移

浮动的基础用法：

让多个块级盒子（div）水平排列成一行

<!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>行内块中间有缝隙</title>
<style>
div {
width: 150px;
height: 200px;
background-color: #d87093;
display: inline-block;
}
</style>
</head>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

.left,.right {

/* 添加浮动，元素统一向左浮动，向右同理 float:right*/

float: left;

width: 300px;

height: 300px;

background-color: blue;

}

/* 可以利用层叠性将右盒子向右浮动，覆盖掉上面统一声明的向左浮动 */

.right {

/* float: right; */

background-color: pink;

}

</style>

</head>

<body>

左盒子

</div>

右盒子

</div>

</body>

</html>

定位：主要为这三种

固定定位（滑动页面的时候盒子位置不变）

<!DOCTYPE html>

<head>

<style>

.fixed {

width: 200px;

height: 200px;

background-color: aqua;

/* 使用固定定位 */

position: fixed;

top: 50px;

left: 300px;

}

</style>

</head>

<body>

</div>

<h1>我是h的内容</h1>

</body>

</html>

相对定位：

自己位置的微调。相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。

在head中选中对象

position：relative

再使用四条指令进行调整

绝对定位：

在盒子定位中通过给元素设置 position:absolute即可实现绝对定位
精确控制位置：使用 left、right、top、bottom 四个属性调整位置
绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。

绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了
两个或多个绝对定位的元素，“标签”靠后写的标签，它的层的叠放顺序靠上