两个阶段学会CSS（阶段二）

最新推荐文章于 2021-12-07 23:04:45 发布

福星高照。

最新推荐文章于 2021-12-07 23:04:45 发布

阅读量203

点赞数 17

分类专栏：小白基础入门文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_45662100/article/details/111182523

版权

入门同时被 3 个专栏收录

9 篇文章

订阅专栏

小白

6 篇文章

订阅专栏

基础

2 篇文章

订阅专栏

本文深入解析CSS盒模型，包括元素结构（内容、内边距、边框和外边距）、边框样式（宽度、样式和颜色）、边框阴影、浮动元素及其影响、清除浮动方法，以及position属性和光标样式。理解这些有助于掌握网页布局的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS盒子模型
一、盒子模型是什么
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
如图：
在这里插入图片描述
不同部分的说明：
1、Margin(外边距) - 清除边框外的区域，外边距是透明的。
2、Border(边框) - 围绕在内边距和内容外的边框。
3、Padding(内边距) - 清除内容周围的区域，内边距是透明的。
4、Content(内容) - 盒子的内容，显示文本和图像。

实例：
在这里插入图片描述
注： width和height设置的是内容的宽和高。
所以最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左内边距+右内边距+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部内边距+底部内边距+上边框+下边框+上边距+下边距

二、边框样式
border（边框）
写法一：
1、border-width 规定边框的宽度，单位px
2、border-color 规定边框的颜色
3、border-style 规定边框的样式：solid 实线、double 双实线、dashed 虚线、dotted 点线、ridge 3D线等。

写法二：
border ： ① ② ③ ;
三个空分别填 ①宽度，②样式，③颜色；
如图：
在这里插入图片描述
效果为：

三、边框阴影
（外）box-shadow 边框阴影
box-shadow： ① ② ③ ④ ⑤ ；
五个值分别代表：
① h-shadow 阴影的水平距离；
② v-shadow 阴影的垂直距离；
③ blur 阴影的模糊距离；
④ color 阴影的颜色；
如图：
在这里插入图片描述
效果为：

（内）边框阴影：
box-shadow：① ② ③ ④ ⑤ inset ；

三、浮动–float
值： 1、left ；左浮动；
2、right ；右浮动；
3、none；默认值，不浮动；
**注：**元素浮动后，则脱离普通流。
元素具有浮动流之后具备的特点：
1、浮动流会被排除在普通流之外，该元素不占有之前的页面空间，其他元素会上前补位。
原样式：在这里插入图片描述将红色块浮动后：
页面显示为：红方块浮起脱离普通流，绿方块上前部位，蓝方块紧接绿方块。（就好比浮起后的浮动流是水面，普通流是水底）

2、浮动元素会停靠在父元素的左边或右边，或者停留在其他已经浮动的元素的边上。
如图：将红块和绿块同时左浮动
在这里插入图片描述如图所示，绿块紧接着红块右边排列，蓝块则被遮住。

3、浮动元素拥有浮动样式后依然还存在父级中，只是浮起了
4、浮动可以让多个块元素合成一排。
如图：将红绿蓝块同时左浮动。
在这里插入图片描述则红绿蓝同在一行排列。

四、浮动引发的特殊效果
1、父元素的宽度显示不是所有已浮动元素所加宽度时，最后一个元素将被强制换行。
2、若事前没设置元素宽度时，元素一旦浮起之后，宽度就会变得自适应。
3、元素一旦浮起之后即变成块级元素，对行内元素影响极大。
4、会造成文本的行内元素进行文字环绕的方式进行排列。

五、清除浮动——clear
规定元素的哪一侧不允许其他浮动元素。
值：
1、left 在左侧不允许浮动元素。
2、right 在右侧不允许浮动元素。
3、both 在左右两侧均不允许浮动元素。
4、none 默认值。允许浮动元素出现在两侧。
**注：**清除浮动并不是不某种元素的浮动效果清除掉，而是取消上面元素使用浮动样式后，带给本元素的被动影响，如补位。

六、浮动元素对父级元素的影响
浮动元素脱离普通流导致元素不占有父级元素的空间，解决方案有：
1、直接父级设置高度

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动样式实例</title>
    <style>
        .school {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .student_1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .student_2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        .student_3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="school">
        <div class="student_1"></div>
        <div class="student_2"></div>
        <div class="student_3"></div>
    </div>
</body>
</html>

效果为：
在这里插入图片描述
弊端：必须知道父级元素的高度。

2、父级浮动

 <style>
        .school {
            width: 300px;
            /* height: 300px; */
            border: 1px solid black;
            float: left;
        }
        .student_1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .student_2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        .student_3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="school">
        <div class="student_1"></div>
        <div class="student_2"></div>
        <div class="student_3"></div>
    </div>

在这里插入图片描述

弊端：对后续元素有影响，父级的margin：0 auto；（水平居中）失效。
3、为父级元素添加隐藏样式 overflow ：hidden 或者auto；

   <style>
        .school {
            width: 300px;
            /* height: 300px; */
            border: 1px solid black;
            /* float: left; */
            overflow: hidden;
        }
        .student_1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .student_2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        .student_3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="school">
        <div class="student_1"></div>
        <div class="student_2"></div>
        <div class="student_3"></div>
    </div>

显示效果同3点。
弊端：元素一旦溢出就被一同隐藏
4、在父级元素里面加一个空元素，并设置为样式 clear：both；

    <style>
        .school {
            width: 300px;
            /* height: 300px; */
            border: 1px solid black;
            /* float: left; */
            /* overflow: hidden; */
        }
        .student_1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .student_2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        .student_3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="school" style="clear: both;">
        <div class="student_1"></div>
        <div class="student_2"></div>
        <div class="student_3"></div>
    </div>

效果：
在这里插入图片描述七、定位——position
position 规定元素的定位类型。
值：
1、absolute 绝对定位（从body的左顶点开始进行偏移）
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

  .student_1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50px;
        }

效果：
在这里插入图片描述

2、fixed 固定定位（从body的左顶点开始进行偏移）
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
3、relative 相对定位（从自己的左顶点开始偏移）
生成相对定位的元素，相对于其正常位置进行定位。

   <style>
        .teacher {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid red;
        }
        .student_1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="teacher">
        <div class="student_1"></div>
</div>

效果为：
在这里插入图片描述

4、偏移量
top ：_px; 向上偏移
bottom ：_px; 向下偏移
left ：_px; 向左偏移
right：_px; 向右偏移

5、堆叠顺序——z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

6、背景定位——background-position
background-position 属性设置背景图像的起始位置。
background-position ： ① ②；
①x轴；②y轴。

八、光标样式——cursor
cursor 属性规定要显示的光标的类型（形状）。
值：1、pointer 手指

.div_1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            cursor: pointer;
        }

2、text 输入状态

.div_1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            cursor: text;
        }

3、wait 等待状态

.div_1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            cursor: wait;
        }

4、help 问号帮助

.div_1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            cursor: help;
        }

5、crosshair ＋号

 .div_1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            cursor: crosshair;
        }

CSS大概就这些了啵，这些都是比较常用的。大家要记住哟！下个阶段就是CSS3的学习总结了吼，大家做好准备！OverOver！！！

在这里插入图片描述