CSS核心样式-02-盒模型属性及扩展应用

目录

三、盒模型属性

常见盒模型区域

盒模型图

盒模型五大属性

[1. 宽度 width](#1. 宽度 width)

[2. 高度 height](#2. 高度 height)

[3. 内边距 padding](#3. 内边距 padding)

四值法

三值法

二值法

单值法

案例

[4. 边框 border](#4. 边框 border)

按照属性值的类型划分为三个单一属性

[①线宽 border-width](#①线宽 border-width)

[②线型 border-style](#②线型 border-style)

[③边框颜色 border-color](#③边框颜色 border-color)

根据边框的方向划分为四个单一属性

根据方向和类型综合划分

[5. 外边距 margin](#5. 外边距 margin)

四个单一属性

复合属性的四种值的写法

四、盒模型扩展应用

[1. 清除默认样式](#1. 清除默认样式)

①清除盒模型的内外边距

标签选择器的并集方式

通配符方式

[②清除 ul 和 ol 两种列表的默认前缀](#②清除 ul 和 ol 两种列表的默认前缀)

[③清除 a 标签默认样式](#③清除 a 标签默认样式)

④清除默认加粗效果

⑤设置初始化的公共样式

[2. height 应用](#2. height 应用)

情况一:必须设置高度

溢出盒子

overflow解决溢出问题

情况二:必须不设置高度

[3. 居中](#3. 居中)

[① 文本水平居中](#① 文本水平居中)

[② 文本垂直居中](#② 文本垂直居中)

单行文本垂直居中

多行文本垂直居中

[③ 元素垂直居中](#③ 元素垂直居中)

[④ 元素水平居中](#④ 元素水平居中)

[4. 父子盒模型](#4. 父子盒模型)

[父元素的width ≥ 所有子元素width + padding + border + margin](#父元素的width ≥ 所有子元素width + padding + border + margin)

特殊情况:盒模型自动内减

[5. margin 塌陷现象](#5. margin 塌陷现象)

同级元素塌陷

父子元素塌陷

[解决 margin 塌陷问题的方法](#解决 margin 塌陷问题的方法)

同级元素

父子元素


三、盒模型属性

盒模型又叫框模型,包含了五个用来描述盒子位置、尺寸的属性,分别是宽度 width、高度 height、内边距 padding、 边框 border、外边距 margin

常见盒模型区域

盒模型的属性中,根据不同属性的效果,可以划分区域:

书写元素内容区域:width+height

• 盒子可以实体化 的区域(也就是可以添加颜色显示出来的区域):width+height+padding+border

• 盒子实际占位 的位置:width+height+padding+border+margin

盒模型图

学习过程中,学会查看浏览器控制台(右侧 computed 部分)中的盒模型图:

盒模型五大属性

盒模型五大属性分别是:

宽度 width、高度 height、内边距 padding、 边框 border、外边距 margin

1. 宽度 width

  • 作用:设置可以添加元素内容的区域的宽度。
  • 属性值:
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>
        .box {
            width: 300px;
            background-color: red;
        }
        p {
            width: 50%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>这是一段文字</p>
    </div>
</body>
</html>

p 的父级是 box,box 的父级是 body,p 的宽度就是 box 宽度的50%。

• 如果一个元素不添加width 属性,默认属性值为auto,不同的元素浏览器会根据其特点自动计算出实际宽度,例如 div 、p 元素等独占一行 的,其 width 属性的值会自动撑满父元素的 width 100%区域 ,如果是span 元素等不需要独占一行的,其 width 属性的值是根据内部元素内容自动撑开的宽度。

body 元素比较特殊,不需要设置 width 属性,宽度会自动适应浏览器窗口的宽度。

2. 高度 height

  • 作用:设置可以添加元素内容的区域的高度。
  • 属性值:

与宽度 width 的属性值设置非常类似。

• 如果一个元素不添加 height 属性,默认属性值为auto,浏览器会自动计算出实际高度,也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。

3. 内边距 padding

  • 作用:设置的是元素的边框内部到宽高区域之间的距离。
  • 特点:可以去加载背景,不能书写嵌套的内容。
  • 属性值:常用 px 为单位的数值。
  • 如果设置 padding: 50px;上下左右四个方向的内边距都是 50px 。
  • padding 是一个复合属性,可以根据内边距的方向不同划分为四个方向的单一属性。

书写四个方向单一属性时,一般是按照顺时针规律书写:上、右、下、左。

有时为了化简书写,一般习惯将四个方向的单一属性进行合写成 padding 属性。

padding 属性值:可以有 1-4 个值,值之间用空格进行分隔。

根据四个方向属性值不同,padding 有多种值的书写表示方法

根据 padding 的属性值的个数不同,区分了四种表示法:

四值法

设置四个属性值,分配方向上、右、下、左

三值法

设置三个值分配给上、左右、下

二值法

设置两个值,分配给上下、左右

单值法

设置属性值只有一个,分配方向上右下左,四边的值相同。

案例

制作三边内边距相同,一边不同。

方法①:使用四值法(10px 10px 10px 20px)、三值法(10px 10px 20px),进行属性值设置。

方法②(推荐使用):利用综合属性和单一属性之间的层叠,对综合属性设置单值法,将四边内边距设置相同,在后面使用单一属性写法,再次定义某个方向的属性值不同,可以实现单一属性层叠综合属性的一部分。

html 复制代码
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 10px;
            padding-right: 20px;
        }
        p {
            background-color: yellow;
        }
    </style>

让单一属性层叠掉综合属性中的某一个。案例中先写综合属性 padding: 10px; 使得四个方向内边距都是 10px ,然后想让哪个边不同就写哪个边,比如想让右边不同就写 padding-right: 20px; 即可实现,并且减少出错。

其中第二种用法更加灵活 ,推荐使用,使用过程中注意书写顺序,单一属性必须书写在后,才能层叠掉综合属性中重复的部分。

4. 边框 border

  • 作用:设置的是内边距外面的边界区域,作为盒子的实体化的最外层。

  • 属性值:由三个值组成,分别为线的宽度、线的形状、线的颜色

    html 复制代码
        <style>
            .box {
                width: 200px;
                height: 200px;
                background-color: red;
                border: 10px solid green;
            }
        </style>
  • border 属性是一个复合属性,根据划分依据不同可以有两种单一属性的划分方式。

按照属性值的类型划分为三个单一属性

划分为:

线宽:border-width

线型:border-style

颜色:border-color

①线宽 border-width
  • 作用:设置边框线的宽度。
  • 属性值:常用 px 形式的数值,四个方向都有边框,属性值类似于 padding,也有四种值的写法,即单值法二值法三值法四值法。
html 复制代码
 <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-width: 10px 20px 30px 40px;
        }
    </style>
②线型 border-style
  • 作用:设置边框的线条形状。
  • 属性值:形状的单词,总体也是类似 padding 的综合属性写法,也有单值法二值法三值法四值法的写法。
  • 属性值的单词可能性:
html 复制代码
 <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-width: 10px 20px 30px 40px;
            border-style: dashed solid groove inset;
        }
    </style>
③边框颜色 border-color
  • 作用:设置边框的颜色。

  • 属性值:颜色名或颜色值,整体类似 padding 综合属性写法,也有单值法二值法三值法四值法的写法。

    html 复制代码
        <style>
            .box {
                width: 200px;
                height: 200px;
                background-color: red;
                border-width: 10px 20px 30px 40px;
                border-style: dashed solid groove inset;
                border-color: red green yellow blue;
            }
        </style>
根据边框的方向划分为四个单一属性

划分为:

上边框:border-top

右边框:border-right

下边框:border-bottom

左边框:border-left

每个单一属性都必须与复合属性 border 一致,设置三个属性值。

html 复制代码
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-top: 10px solid green;
        }
    </style>
根据方向和类型综合划分

类似 border-top 的单一方向属性,也可以根据属性值类型继续进行单一属性划分。

单一属性写法:border-方向-类型。

注意:细分时必须先写方向划分再写类型划分,否则属性名错误。

html 复制代码
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            border-top-color: green;
        }
    </style>

5. 外边距 margin

  • 作用:设置的是盒子与盒子之间的距离。
  • 特点:不能渲染背景。
  • 属性值:常用 px 为单位的数值。
  • 外边距的设置方式与内边距 padding 一模一样。
四个单一属性

上 margin‐top: 20px;

右 margin‐right: 20px;

下 margin‐bottom: 10px;

左 margin‐left: 20px;

复合属性的四种值的写法

四值法 margin: 10px 20px 30px 40px;

三值法 margin: 10px 20px 30px;

二值法 margin: 10px 20px;

单值法 margin: 10px;

html 复制代码
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 10px 20px 30px 40px;
        }

四、盒模型扩展应用

虽然我们了解了盒模型的五个属性的基本语法, 但是在实际工作中还有更多的方法和技巧需要掌 握,因此,我们需要扩展对盒模型的应用知识。

1. 清除默认样式

大部分标签都有一个浏览器加载的默认样式,会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响,一定要清除默认样式。

①清除盒模型的内外边距

盒模型(例如 body、div、p 等)属性中的内外边距:大部分容器级标签都有默认边距,要么用标签选择器的并集方式,要么用通配符全部清除。

本来设计图没有边距,但是这里都有默认边距,所以要清除默认样式:

标签选择器的并集方式
html 复制代码
 <style>
       /* 标签选择器并集方式清除默认样式(可以提前考虑到还没写的标签) */
       body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li {
        margin: 0;
        padding: 0;
       }
 </style>
通配符方式

也可以使用这种简便方法,但仅仅适合一些小的案例

html 复制代码
    <style>
       /* 通配符方式清除默认样式(通配符选中所有标签) */
       * {
        margin: 0;
        padding: 0;
       }
    </style>

通配符会选择所有,而标签选择器的并集方式会有针对性的进行选择,所以标签选择器的并集方式的效率要高一些

在实际项目中,一般用标签选择器的并集方式,如果是一些小案例,为了简化代码量可以使用通配符的方式。

②清除 ul 和 ol 两种列表的默认前缀

<ul> 和 <ol> 两种列表有默认的列表前缀,清除方式:使用 list-style 属性。

html 复制代码
    <style>
       /* 清除 ul 和 ol 两种列表的默认前缀 */
       ul,ol {
        list-style: none;
       }
    </style>

③清除 a 标签默认样式

清除<a> 标签的默认样式,顺带设置页面中常用的 a 的公共样式:设置 color 和 text-decoration(可以通过设置color 使得a标签跟其他字体颜色一致,text-decoration设置清除下划线,主要就是想让a标签跟其他字体看起来一样,如果想让有的a标签不这样可以单独设置属性覆盖掉这个)。

html 复制代码
    <style>
       /* 清除 a 标签默认属性 */
       a {
        color: blueviolet;
        text-decoration: none;
       }
    </style>
</head>
<body>
    <a href="">这是一个a标签</a>
</body>

④清除默认加粗效果

一些标签默认带加粗效果,比如h1-h6,b,strong,

清除默认加粗效果:设置font-weight。

html 复制代码
    <style>
       /* 清除默认加粗效果 */
       h1,h2,h3,h4,h5,h6,b,strong {
        font-weight: normal;
       }
    </style>

⑤设置初始化的公共样式

一般除了清除默认样式之外,做项目时还会设置初始化的公共样式。

可以给 <body> 标签设置整体文字样式,让大部分后代标签全部去继承(body里面的所有标签都可以继承,注意h1-h6标题,他们也继承,但是他们有自己的font-size,所以继承的body的就被层叠掉了,所以他们的字体还是自己原来的样式)

html 复制代码
    <style>
       /* 设置初始化的公共样式 */
       body {
        color: blue;
        font-size: 20px;
        font-family: Arial, "宋体";
       }
    </style>

2. height 应用

根据不同的需求,高度属性可以设置也可以不设置。

• 如果设置了高度:盒子占有的高度位置就确定死了,后面的同级元素会紧挨着在后面加载。

• 如果不设置高度:会根据标签内部内容高度自动撑开。

以 <div> 标签为例,根据情况不同选择是否设置高度:

情况一:必须设置高度

设计图中盒子高度占位是固定的,后面同级元素在高度下面加载,这时候就必须设置高度。

溢出盒子

设置高度会产生一种情况:自身盒子内部内容过多会溢出盒子区域

盒子内部内容过多,但是盒子只有200px的高度,设置了高度后即使盒子装不下这些内容但是盒子也不会被撑开,这就是设置高度之后产生的效果。

span没有被挤走,还是在盒子下方

overflow解决溢出问题

对于这个问题,可以使用overflow 溢出属性进行解决。

设置了高度的盒子,如果内部元素的加载高度超过父级,会出现溢出效果。

可以通过一个溢出的属性 overflow,进行溢出部分内容的显示效果设置。

visible跟上面出现的情况一样

hidden是经常使用的(溢出隐藏)

scroll在水平和竖直方向各出现一个滚动条,溢出方向出现滑块

auto,类似于文本域textarea,无溢出就正常显示,有溢出就出现滚动条。

auto是哪个方向溢出就哪个方向出现滚动条,不溢出的不会出现;而scroll是无论是否溢出两个方向都会出现滚动条,而只有溢出的才会出现滑块进行滑动。

情况二:必须不设置高度

设计图要求盒子高度必须自适应内部内容的高度,这是就不能设置高度。

比如一些新闻下面有评论区,有的新闻长有的短,新闻设置自适应,新闻内容有多少盒子就自动撑高多少,评论区就在新闻下面。

这时可以选择不设置高度 ,或者设置height的属性值是自动的,二者效果相同

html 复制代码
    <style>
       /* 设置高度为自动 */
       div {
        width: 200px;
        height: auto;
        border: 1px solid black;    
       }
    </style>

3. 居中

在网页中经常见到元素或者文字居中的效果。

① 文本水平居中

水平居中:text-align属性。(不论单行或多行都用这一条属性可以设置)

html 复制代码
    <style>
       /* 设置文本水平居中 */
       p {
        width: 200px;
        height: auto;
        border: 1px solid black; 
        text-align: center;   
       }
    </style>

② 文本垂直居中

单行文本垂直居中

单行文本垂直居中:让文字行高 line-height 等于盒子高度 height

(因为文字在自己的行高中是垂直居中的,所以让文字行高等于盒子高度,那么文字就可以在盒子垂直居中了)。

html 复制代码
    <style>
       /* 设置文本水平居中 */
       p {
        width: 200px;
        height: 200px;
        border: 1px solid black; 
        text-align: center;   
        line-height: 200px;
       }
    </style>
多行文本垂直居中

多行文本垂直居中:让存放文本的元素高度自适应 或者设置元素内边距上下值相同

不设置元素高度:

设置元素内边距上下值相同:

html 复制代码
    <style>
       /* 设置文本垂直居中--设置元素内边距上下相同 */
       p {
        width: 200px;
        border: 1px solid black; 
        text-align: center;  
        padding: 20px 0; 
       }
    </style>

③ 元素垂直居中

一个元素内部嵌套的子元素,在父元素中居中。

垂直居中:与多行文字类似,让父元素高度自适应 ,子元素高度自动撑开父级的高度,再给父元素设置相同的上下边距

html 复制代码
    <style>
       /* 设置元素垂直居中 */
       /* 不给父元素设置高度让其自适应,但设置内边距上下相同 */
       .box {
        width: 200px;
        border: 2px solid greenyellow;
        padding: 20px 10px;
       }
       .demo {
        width: 100px;
        height: 100px;
        background-color: aqua;
       }
    </style>
</head>
<body>
    <div class="box">
        <div class="demo"></div>
    </div>
</body>

④ 元素水平居中

针对类似 <div> <p>样式上必须独占一行的盒子,如果子盒子宽度低于父盒子宽度 ,可以设置子盒子的 margin 值,水平方向的值都设置为 auto 。(父子都是独占一行的盒子)

原因:auto 只在水平方向有作用,水平方向的 margin 如果设置为 auto,边距会自动无限增大,直到撑满整个父元素除了子元素宽度之外剩余的区域,如果两个水平方向都是 auto,两边都要无限大,只能达到一个平衡,两边距离相同,导致盒子居中。

html 复制代码
    <style>
       /* 设置元素水平居中 */
       /* 父元素设置不变,子元素设置magin左右都为auto */
       .box {
        width: 200px;
        border: 2px solid greenyellow;
        padding: 20px 10px;
       }
       .demo {
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 0 auto;
       }
    </style>
</head>
<body>
    <div class="box">
        <div class="demo"></div>
    </div>
</body>

4. 父子盒模型

父元素的width ≥ 所有子元素width + padding + border + margin

一般情况下,一个父元素内部可以放一个或多个子元素,而且多个子元素要排成一行显示,必须保证父元素的宽度一定要足够(不考虑溢出情况),需要遵循一个设置尺寸的规律:所有子元素的宽度加在一起不能大于父元素的宽度 width。
父元素的width ≥ 所有子元素width + padding + border + margin

如果不满足条件:要么多余的子元素掉下来,不能在一排,要么溢出父元素

(float: left;浮动属性,添加后就可以让本来独占一行的四个<p>标签排成一排)

html 复制代码
    <style>
        /* 首先清除一下默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
       .box1 {
        width: 1000px;
        height: 100px;
        border: 1px solid green;
       }
       .box1 p {
        float: left;
        width: 200px;
        height: 100px;
        background-color: blue;
        margin-right: 10px;
       }
    </style>
</head>
<body>
    <div class="box1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
</body>

否则,比如将子盒子的magin-right的值改为60px,子盒子就会掉下来:

magin-right的值极限是50px,子盒子刚好排成一排;51px都不可以。

另一种情况:父子盒模型中,只有一个子元素,且子元素是类似 <div> 标签必须占一行的。他不会出现上述那种掉下去的情况,但是他会出现溢出的情况。

父盒子是200×200,但是子盒子是(200+20)×(200+20),子盒子溢出。

经过上述两种情况:

所以,后续做项目时,计算或量取尺寸时一定要计算准确,一像素都不能偏差。

特殊情况:盒模型自动内减

对于上面第二种,即父子盒模型中,只有一个子元素,且子元素是类似 <div> 标签必须占一行的,有一种特殊的解决方式,即盒模型自动内减的方式。

解决方式:不设置子元素的 width 属性,子元素的 width 属性值会自动加载父级元素的 width。

如果同时设置了子元素水平方向的 padding 和 border 、margin,不需要手动去进行内减(像上面那种,要想子盒子不超出父盒子,width要变成180,加上border的20才能刚好是200,不需要手动减,如果不设置子元素的 width 属性运行程序会自动将width变成180),子元素的 width 会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

5. margin 塌陷现象

margin 塌陷现象:在垂直方向 如果有两个元素的外边距有相遇的,浏览器中加载的真正的外边距不是两个间距的加和,而是两个边距中值较大的,边距值小的塌陷到了边距值大的值内部。

同级元素塌陷

上面的元素有下边距,下面的元素有上边距,两个边距相遇,真正的盒子间距离是较大的那个值。

父子元素塌陷

父子元素之间也会出现 margin 塌陷,父元素和子元素都设置了同方向的margin-top 值,两个属性之间没有其他的内容进行隔离(中间没有padding 或者border将两个元素隔开),导致两个属性相遇,发生margin 塌陷。

本身父元素与上一个元素的距离是0,子元素如果设置了垂直方向的上边距,会带着父级一起掉下来。

解决 margin 塌陷问题的方法

同级元素

同级元素:如果两个元素垂直方向有间距,只需要设置给一个元素,不要进行拆分。

想让上面盒子与下面盒子之间有50px间距时,没必要将50拆成20和30,只需要将50给其中任何一个元素即可。

父子元素

父子元素:

让两个边距不要相遇,中间可以使用父元素 border 或 padding 将边距分隔开;

更加常用的方法,父子盒模型之间的距离就不要用儿子的 margin 去踹出来,而是父级的 padding 挤出来。(一般不用子元素的magin,而是使用父级的padding)

另外注意:水平方向的 margin 没有塌陷现象。

相关推荐
ekskef_sef38 分钟前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6411 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻1 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云1 小时前
npm淘宝镜像
前端·npm·node.js
dz88i81 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr2 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
顾平安3 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网3 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工3 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
不是鱼3 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js