CSS学习_盒模型

¤～空

已于 2024-07-26 21:59:55 修改

阅读量599

点赞数 16

分类专栏： CSS 文章标签：学习前端 css3

于 2024-07-22 22:03:20 首次发布

本文链接：https://blog.csdn.net/weixin_59680226/article/details/140618565

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、盒子模型

1.盒子模型基本内容

每一个HTML元素都可以叫盒模型。页面就是一个个盒模型堆砌起来的。优点是可以将元素放置在盒子的任地方，可以调整宽和高来充满整个屏幕。

在CSS中，盒模型（Box modle）是用来对元素进行设计和布局的，由内到外包含内容区，内边距，边框和外边距。

1)内容区content

用来放置文本或子元素，盒模型的实际内容区。

样式属性：width，height，background-color，fond-size等就是对该区域进行设置的；

2)内边距padding

对照上图：

定义元素边框与元素内容之间的空间，该区域是透明的，没有颜色。包含上下左右的四个内边距。

padding-top: 上内边距

padding-button: 下内边距

padding-left: 左内边距

padding-right: 右内边距

上述四个属性可以融合到一个属性里分别赋值或一起赋值，为缩短代码使用。每个值所代表的如下所示：

padding: 上右下左; 为记忆方便，可记为顺时针赋值
padding: 上左右下;
padding: 上下左右;
padding: 上下左右;

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型内边距演示</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* 上  右 下 左 */
            /* padding: 10px 15px 12px 12px; */
            /* 上 左右 下 */
            /* padding: 10px 20px 30px; */
            /* 上下 左右 */
            padding: 20px 20px;           
            /* padding-top: 10px;
            padding-left: 10px; */
            background-color: aqua;       
        }

        div:h1 {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div>
        <h1 style="background-color: blue;">标题1</h1>
    </div>
</body>

</html>

3)边框border

围绕在内边框外的边框。

border值由三个维度来决定：width，style，color

border-width

border-style

border-color

每个值都可以设置上下左右

xxx代表top,bottom,left,right

boeder-xxx-width

border-xxx-color

border-xxx-style

4)外边距margin

边框以外的区域， 赋值方式与padding类似相同。

默认情况元素的位置由上边距和左边距决定。

<!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>
        /* 
            外边距设置的是元素的周围距离，一般决定该元素在页面上的位置
            外边距由四个方面的属性来控制：
            margin-top
            margin-buttom
            margin-left
            margin-right
            也可以使用一个属性margin来设置四个方向上的距离
            margin-top
            margin-top
            margin-top
            margin-top
        */
        .outer {
            border: 10px solid blue;
            width: 800px;
            height: 800px;
            padding: 0px;

        }
        .inner {
            border: 10px solid blue;
            width: 500px;
            height: 200px;
            /* margin-top: 50px;
            margin-left: 100px;
            margin-right: 500px; */
            /* 默认情况元素的位置由上边距和左边距决定 */
            /* margin: 100px 50px; */
            /* 注意，通常情况左右边距可以使用百分比和auto */
            /* margin: 50px 15%; */
            /* 左右居中，方式一：自己算 */
            /* 第二种使用auto */
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">askjg</div>
    </div>
</body>

</html>

2.盒模型的水平和垂直布局

1)和模型的水平布局

必须满足：元素左右边距+左右边框宽度+左右内边距+width=父元素的内容区

情况一：七个属性都是固定值,也就是没有auto值

如果等式不成立，则右外边距自动调整数值，使之成立。

情况二：有auto值。 width，margin-left,margin-right这三个属性可以为auto值。

如果宽是auto值，则自动调整width的值，使等式成立；

如果宽不是auto值，剩下两个属性，谁是auto，就调整谁；

如果剩下两个都是auto值，就调整为相同值，使等式成立。

2)盒模型的垂直布局

只需设置上下外边距，上下边框的宽，上下内边距以及height即可。

子元素在垂直方向上可以在父元素里使用overflow属性：

overflow:

visible: 默认值，表示可见

hidden : 将溢出的内容隐藏

scroll: 添加了上下和左右的滚动条设置

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>

        /* 
            子元素在垂直方向上可以在父元素里使用overflow属性：
            overflow:
                visible:  默认值，表示可见
                hidden :  将溢出的内容隐藏
                scroll:   添加了上下和左右的滚动条设置
                auto:  根据需求自动添加滚动条

        */
        .outer {
            width: 500px;
            height: 500px;
            background-color:greenyellow;
            /* overflow: hidden; */
        }
        .inner {
            width: 200px;
            height: 600px;
            border:5px solid blue;
            padding: 50px;
            margin: 50px 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">地对地导弹</div>
    </div>

</body>
</html>

3.外边距的重叠现象

只有上下边距之间可以发生重叠，块元素左右不可能发生重叠：

1)兄弟元素之间：

两正值取最大值；

一负一正，取和，负数大的重合；

两个负数，去绝对值大的，可见部分发生重叠；

兄弟之间，外边距重叠问题不大，取决于你想不想

2)父子元素之间：

发生重叠印象整个页面布局，需要及时解决

子元素的上外边距传递给了父元素，使父元素距离他的父元素的上外边框发生改变

要解决上述问题，只需要设置父元素的border属性即可

<!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>
        .outer {
            margin: 50px auto;
            /* border: 5px solid greenyellow; */
            width: 500px;
            height: 500px;
            background-color: chocolate;
        }

        .in1,
        .in2 {
            width: 200px;
            height: 200px;
            /* background-color: aqua; */
            border: 10px solid red;
        }

        .in1 {
            background-color: aquamarine;
            margin-bottom: 50px;
            /* 研究父子之间的外边距重叠 */
            margin-top: 100px;
        }

        .in2 {
            background-color: beige;
            margin-top: 0px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="in1"></div>
        <div class="in2">akdssghu</div>
    </div>
</body>

</html>

看清楚设置的值，一个值设置多个变量不起作用。例如：

margin-top:10px auto;有值也没用。

4.行内元素的盒模型

1)行内元素的盒模型特点

内容区不能使用width和height，不生效，是由内容撑起来的。padding,border,magin的，左右都生效，上下不生效

扩展：display属性

- none 隐藏，不占有原来的空间。

- block 将行内元素变成块样式的显示形式，并不是将行内元素变为块元素

只是这样一更改就可以设置上述不能设置的属性，并且生效显示。

- inline 将块元素变成行内元素的样式显示，与block恰好相反

- inline-block 既有行内样式的特点又有块样式的特点

详细说明请看代码注释：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>行内元素的盒模型</title>
    <style>
        
        #s1 {
            width: 200px;
            height: 50px;
            border: 20px solid red;
            padding: 0px;
            margin: 40px;
            /* 变成块元素以前行内不适用的元素都适用了 */
            display: block;
        }
        #s2 {
            /* 将s2变为块元素，具有独占一行的特点
            因此后续的内容如果没有设置浮动或者定位
            会在s2定义的元素下方显示 */
            display: block;
        }
        div div{
            width: 200px;
            height: 100px;
            background-color: aqua;
            /* 设置成inline，那么块元素就具备了行内元素样式的特性
            宽高上下外边距，上下边框，上下内边距都失效 */
            /* display: inline; */
            /* 设置成inline-block，那么块元素既有行内样式又有块样式特点
            宽高上下外边距，上下边框，上下内边距都有，不换行 */

            display: inline-block;
        }
        #d1 {
            background-color: red;
        }
        #d1 {
            background-color: greenyellow;
        }
    </style>

</head>

<body>
    <div>
        <span id="s1">轻轻的走过那枫叶花丛中</span>
        <span id="s2">太阳撞碎暗黑色的天幕</span>
        <div id="d1">1</div>
        <div id="d2">2</div>
    </div>
</body>

</html>

2)默认样式

通常情况下，HTML的标签都带有自己的默认的css样式，比如，body里的元素并不是紧贴浏览器左侧和顶部的，因为body里的margin属性有默认值是8px；再比如，p元素的上下外边距默认值是1em等。

因此默认样式在一定程度上，影响了我们对于页面的布局，想要消除默认样式，且要运用到所有样式就要使用通配符选择器来取消。

*{

margin：0；

5.盒子的轮廓、阴影、尺寸

了解内容

1)轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

轮廓的样式：

                        dotted 点线轮廓
                        dashed 虚线轮廓
                        solid 实线轮廓
                        double 双线轮廓
                        groove 凹槽轮廓
                        ridge 垄状轮廓
                        inset 嵌入轮廓
                        outset 外凸轮廓

2)阴影

box-shadow 属性

语法：box-shadow: h-shadow v-shadow blur spread color inset;

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

3)尺寸

box-sizing 属性

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认情况下，元素的宽度(width) 和高度(height)计算方式如下：

width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度

语法：box-sizing: content-box|border-box|inherit:

content-box	默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box	告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

¤～空

关注

16
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
CSS学习_盒模型

每一个HTML元素都可以叫盒模型。页面就是一个个盒模型堆砌起来的。优点是可以将元素放置在盒子的任地方，可以调整宽和高来充满整个屏幕。在CSS中，盒模型（Box modle）是用来对元素进行设计和布局的，由内到外包含内容区，内边距，边框和外边距。
复制链接

扫一扫

专栏目录