CSS 盒子模型

本文深入探讨了CSS中的盒子模型,包括边框的粗细、样式和颜色设置,以及如何通过内外边距实现元素居中。同时,介绍了圆角边框、阴影效果的创建。接着,详细阐述了浮动元素的影响,如标准文档流、display属性和解决父级边框塌陷问题的方法。最后,讨论了相对、绝对和固定定位,以及z-index在图层堆叠中的作用。

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

1.什么是盒子模型

在这里插入图片描述
margin:外边距
border:边框
padding:内边距

2.边框(border)

1.边框的粗细

2.边框的样式

3.边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /*body.总有一个默认的外边出margin: e,常见操作*/
        /*h1,ul,li,a,bodyi{*/
        /*margin: e;*/
        /*padding: B;*/
        /*text-decoration: none;*/
        /*}*/
        /*border:粗细,样式:颜色*/
        .first{
            text-align: center;
            width: 300px;
            border: orangered 1px solid;
        }
        form{
            background: #FFCC70;
        }
        #uesr input{
            border: red 2px solid;
        }
        h1{
            background: #FFCC70;
            margin: 0;
        }
        /*实线*/
        div:nth-of-type(1) input{
            border: #13c915 3px solid;
        }
        /*虚线*/
        div:nth-of-type(2) input{
            border: #ecda1e 3px dashed;
        }
        div:nth-of-type(3) input{
            border: #C850C0 3px solid;
        }
    </style>
</head>
<body>
<div class="first">
    <h1>会员登录</h1>
    <form action="#">
        <div id="user">
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

效果图
哈哈

3.内外边距及div居中

margin:0 0 0 0/*分别表示上、右、下、左;从上开始顺时针*/
/*例1:居中*/
margin:0 auto /*auto表示左右自动*/
/*例2:*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px,左右为20px,下为30px*/

盒子的计算方式:
margin+border+padding+内容的大小
总结:
body总有一个默认的外边距 margin:0
常见操作:初始化
margin:0;
padding:0;
text-decoration:none;

4.圆角边框及阴影

border-radius有四个参数(顺时针),左上->右上->右下->左下
圆圈:圆角=半径+边框

<style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*一个border-radius只管一个圆的1/4*/
            border-radius: 50px 20px 20px 30px;/*左上 右上 右下 左下 ,顺时针方向*/
        }
</style>

阴影

 #first{
            width: 25px;
            height: 25px;
            border: red 2px solid;
            box-shadow: 10px 10px 1px orange;
        }

5.浮动

块级元素:独占一行
h1~h2 p div 列表(ul li)…
行内元素:不独占一行
img span a strong…
块级元素可以包含行内元素,但是反过来则不行

5.1标准文档流

在这里插入图片描述

5.2display(非常重要)

display:
block:块元素
inline:行内元素
inline-block:行内块元素

<style>
        div{
            width: 100px;
            height: 100px;
            border: red 1px solid;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: red 1px solid;
            display: inline-block;
        }
    </style>

效果演示:
在这里插入图片描述

5.3Float(浮动)

float: left;
float: right;
这种浮动有弊端:他会随着页面的变化,布局也发生变化

5.4父级边框塌陷的问题

clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
解决方案:
1.增加父级元素的高度
#father{
height :800px
}
简单,但是代码中尽量避免空div
2.增加一个空的div标签,清除浮动

<div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}

简单,元素要是有了固定高度,就会被限制
3.在父级元素中添加overflow方法
overflow:hidden;
简单,下拉的一些场景中避免使用
4.在父类中添加一个伪类

#father:after{
content: '';
display:block;
clear:both;
}

写法虽然复杂了一点,但是没有副作用, 推荐使用!
display:方向不可以控制
float:浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题。

6.定位

相对定位:positon:relstive;

相对于原来的位置,进行指定的偏移,相对定位的话,它仍然在标准文档流中!原来的位置会被保留
top:-20px;/向上偏移20px/
left:20px;/向右偏移20px/
bottom:10px;/向上偏移10px/
right:20px;/向左偏移20px/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 10px;
            padding: 10px;
            font-size: 30px;
            line-height: 25px;
        }
        #father{
            border: red 1px solid;
            padding: 0;
        }
        #first{
            background: orange;
            border: #f5f526 1px dashed;
            position: relative;
            top: -20px;
            left: 20px;
        }
        #second{
            background: #13c915;
            border: green 1px dashed;
            position: relative;
            top: -20px;
            right: 20px;
        }
        #third{
            background: #165175;
            border: blue 1px dashed;
            position: relative;
            bottom: -20px;
            left: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id ="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            border: 2px red solid;
            height: 300px;
            width: 300px;
            padding: 10px;
        }
        a{
            /*背景颜色*/
            background: pink;
            /*文字居中*/
            text-align: center;
            /*宽度*/
            width: 100px;
            /*高度*/
            height: 100px;
            /*字体颜色*/
            color: white;
            /*去下划线*/
            text-decoration: none;
            /*块级元素*/
            display:block;
            /*行高*/
            line-height:100px;
        }
        a:hover{
            background: blue;
        }
        #a2,#a4{
            position: relative;
            top:-100px;
            right: -200px;
        }
        #a5{
            position: relative;
            bottom:300px;
            right: -100px;
        }

    </style>
</head>
<body>
<div id="father">
        <a href="#" id="a1">连接一</a>
        <a href="#" id="a2">连接二</a>
        <a href="#" id="a3">连接三</a>
        <a href="#" id="a4">连接四</a>
        <a href="#" id="a5">连接五</a>
</div>
</body>
</html>

绝对定位 position: absolute;

定位:基于xxx定位,上下左右~
1、没有父级元素定位的前提下,相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结:相对一父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留
子级元素用绝对定位,父级元素要用相对定位

固定定位

<style>
        body{
            height: 300px;
        }
        /*绝对定位,相对于浏览器*/
        div:nth-of-type(1){
            background: lime;
            width: 200px;
            height: 100px;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        /*固定定位*/
        div:nth-of-type(2){
            background: #C850C0;
            width: 200px;
            height: 100px;
            position: fixed;
            bottom: 0;
            right: 0;
        }
    </style>

z-index

图层-z-index:默认是0,最高无限~999
index.html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #context{
            width: 100px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px solid yellow;
        }
        /*父级相对定位*/
        #context,ul{
            position: relative;
        }
        ul,li{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        .tipBg,.tipText{
            position: absolute;
            width: 50px;
            height: 25px;
            top:50px
        }
        .tipText{
            color: #ff4d00;
            z-index: 999;
        }
        .tipBg{
            background: #165175;
            opacity: 0.5;/*背景透明度*/
            filter: alpha(opacity=50);
        }

    </style>
</head>
<body>
<div id="context">
    <ul>
        <li><img src="1.png" alt=""></li>
        <li class="tipText">滑稽</li>
        <li class="tipBg"></li>
        <li>地点:sd</li>
    </ul>
</div>
</body>
</html>
### CSS 盒子模型详解 CSS盒子模型是网页设计和布局中的核心概念之一。它描述了HTML文档结构化的方式以及如何通过样式控制这些元素的空间分配。 #### 1. 盒子模型的组成部分 每个HTML元素都可以看作是一个矩形盒子,该盒子由以下几个部分组成[^1]: - **内容 (Content)**: 这是盒子的主要区域,用于放置文本或其他媒体内容。 - **内边距 (Padding)**: 它位于内容边缘与边框之间的空白区域,用来增加内容周围的可读空间。 - **边框 (Border)**: 边框围绕着内边距和内容,可以设置不同的宽度、颜色和风格来定义边界线。 - **外边距 (Margin)**: 外边距是在边框之外的一片透明区域,用于分隔相邻的盒子并防止它们相互接触。 #### 2. 盒子模型属性 以下是几个重要的盒子模型相关属性及其功能说明: ##### 2.1 `width` 和 `height` 属性 这两个属性分别设定盒子的内容区宽度和高度。需要注意的是,默认情况下,指定的尺寸仅适用于内容区域而不包括 padding, border 或 margin 的值[^2]。 ##### 2.2 `border` 边框属性 可以通过此属性自定义边界的外观,比如粗细、线条样式(实线、虚线等)以及颜色[^3]。 ##### 2.3 `padding` 内边距 用于调整内部填充量,即内容与其周围边框间的距离。它可以单独应用于上、右、下、左各个方向或者统一应用到所有侧面[^1]。 ##### 2.4 `margin` 外边距 负责管理与其他元素之间外部间距的部分。同样支持多向配置,并且当两个垂直 margins 邻近时会发生折叠现象——取两者较大者作为最终间隔[^2]。 ##### 2.5 盒子模型占位计算 总的实际占用面积等于 content area 加上其四周的所有附加层厚度之和。例如给定一个具有固定 width/height 值为100px 的 div 元素加上额外参数如下所示,则实际渲染出来的大小将是 `(100 + 5 + 5 + 20 + 20)` px × `(100 + 5 + 5 + 20 + 20)` px: ```css div { width: 100px; height: 100px; border: 5px solid black; /* 上下左右均为5像素 */ padding: 20px; /* 各侧均设为20像素 */ } ``` #### 3. box-sizing 属性 为了简化复杂布局的设计过程,引入了一个名为 `box-sizing` 的新特性。默认行为遵循传统标准模式 (`content-box`) ,其中声明的 dimensions 不含 paddings/borders;而另一种选项叫做 alternate model(`border-box`) 可让开发者更直观地操作整体尺寸因为此时所指代的就是整个可视范围内的确切数值. ```css /* 使用 border-box 来改变盒模型的行为方式*/ * { box-sizing: border-box; } ``` 以上便是关于CSS盒子模型的一些基本介绍及常见应用场景下的实现方法论探讨。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值