• CSS盒子模型


    盒子模型的组成

    CSS会把所有的HTML元素都看成一个盒子,所有的样式也都是基于这个盒子

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    • content(内容):盒子的内容
    • padding(内边距):用于控制元素内部与边框之间的距离
    • border(边框):盒子的边框
    • margin(外边距):用于控制元素与其他元素之间的距离(不影响盒子的大小,如果没设置width会影响盒子大小)

    盒子的大小 = content + 左右 padding + 左右 border

    div {
        /** 背景颜色包括内容区、内边距、 */
        background-color: red;
    
        /** 内容区的高和宽 */
        width: 200px;
        height: 200px;
    
        /** 内边距 */
        padding: 10px;
    
        /** 盒子边框 */
        border: red 10px solid;
    
        /** margin不影响盒子整体的大小 */
        margin: 10px;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    content_内容区

    属性名功能
    width / height设置内容区域宽、高度
    max-width / min-width设置内容区域的最大/小宽度(一般不与width一起使用)
    max-height / min-height设置内容区域的最大/小高度(一般不与height一起使用)
    div {
        min-height: 500px;
        min-width: 500px;
        background-color: red;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    默认宽度

    所谓的默认宽度,就是不设置width属性时,元素所呈现出来的宽度

    总宽度 = 父元素content - 自身的左右margin

    内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding

    padding_内边距

    属性名功能属性值
    padding-top上内边距长度
    padding-right右内边距长度
    padding-bottom 下内边距长度
    padding-left左内边距长度
    padding复合属性长度,可以设置 1 ~ 4 个值

    padding复合属性的使用规则:

    1. padding : 10px; 四个方向内边距都是10px
    2. padding : 10px 20px; 上 10px ,左右 20px(上下、左右)
    3. padding : 10px 20px 30px; 上 10px ,左右 20px ,下 30px(上、左右、下)
    4. padding : 10px 20px 30px 40px; 上 10px ,右 20px ,下 30px ,左 40px(上、右、下、左)
            div {
                width: 400px;
                height: 400px;
                background-color: red;
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
            }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    注意:

    • padding的值不能为负数
    • 行内元素上下内边距不能完美设置,左右内边距可以,会导致元素覆盖
    • 块级元素、行内块元素,四个方向内边距都可以完美设置

    border_边框

    属性名功能属性值
    border-style 边框线风格,复合了四个方向的边框风格none: 默认值
    solid: 实线
    dashed: 虚线
    dotted: 点线
    double: 双实线
    border-width边框线宽度,复合了四个方向的边框风格长度,默认 3px
    border-color 边框线颜色,复合了四个方向的边框颜色颜色,默认黑色
    border复合属性值没有顺序和数量要求
    border-left
    border-left-style
    border-left-width
    border-left-color
    border-right
    border-right-style
    border-right-width
    border-right-color
    border-top
    border-top-style
    border-top-width
    border-top-color
    border-bottom
    border-bottom-style
    border-bottom-width
    border-bottom-color
    分别设置各个方向的边框,left、right、top、bottom是各个方向的复合属性同上
    border-radius边框圆角
    div {
        width: 400px;
        height: 400px;
        background-color: red;
        /** border-left: blue 10px solid; */
        border-left-width: 10px;
        border-color: blue;
        border-style: solid;
        border-radius: 40px
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    margin_外边距

    属性名功能
    margin-left 左外边距
    margin-right右外边距
    margin-top上外边距
    margin-bottom下外边距
    margin复合属性,可以写 1~4 个值,规律同padding(顺时针)

    注意:

    1. 子元素的margin,是参考父元素的content计算的
    2. 设置上、左的margin影响自己的位置,下、右margin影响后面兄弟元素的位置
    3. 块级元素、行内块元素,均可以完美地设置四个方向的margin,行内元素可以完美设置左右margin上下margin设置无效
    4. margin的值也可以是auto,如果给一个块级元素设置左右margin都为auto,该块级元素会在父元素中水平居中
    5. margin的值可以是负值
    6. 没有直接设置 margin 属性时,浏览器会默认应用一些样式规则
        <style>
            .outer {
                width: 400px;
                height: 400px;
                padding: 50px;
                background-color: orangered;
            }
    
            .inner {
                width: 100px;
                height: 100px;
                background-color: blue;
                margin: auto;
            }
        style>
    
    <div class="outer">
        <div class="inner">div>
    div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    margin塌陷问题

    什么是 margin 塌陷?

    第一个子元素的上margin会作用在父元素上,最后一个子元素的下margin会作用在父元素上,也就是被父元素吃掉了,这个属于历史遗留问题

    如何解决 margin 塌陷?

    1. 给父元素设置不为0padding
    2. 给父元素设置宽度不为0border
    3. 给父元素设置css样式overflow:hidden
        <style>
            .outer {
                width: 400px;
                background-color: gray;
                overflow: hidden;
            }
    
            .inner {
                width: 100px;
                height: 100px;
            }
    
            .inner1 {
                background-color: red;
                margin-top: 50px;
            }
    
            .inner2 {
                background-color: orange;
                margin-bottom: 50px;
            }
        style>
        
    <div class="outer">
        <div class="inner inner1">div>
        <div class="inner inner2">div>
    div>
    <div>测试div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    margin合并问题

    什么是margin合并?

    上面元素的下外边距和下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    如何解决margin塌陷?

    上下两个元素设置上或下外边距就可以了,或者使用float

        <style>
            .box1 {
                width: 200px;
                height: 200px;
                background-color: red;
                margin-bottom: 50px;
            }
    
            .box2 {
                width: 200px;
                height: 200px;
                background-color: blue;
                margin-top: 60px;
            }
        style>
    
    <div class="box1">div>
    <div class="box2">div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    处理内容溢出

    属性名功能属性值
    overflow溢出内容的处理方式visible:显示(默认值)
    hidden:隐藏
    scroll:显示滚动条,不论内容是否溢出
    auto:内容时显示滚动条,不溢出不显示
    overflow-x水平方向溢出内容的处理方式同overflow
    overflow-y垂直方向溢出内容的处理方式同overflow
        
    
    
    "outer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, iste pariatur? Esse impedit iure nobis officia voluptates! Adipisci alias amet at doloremque error et magnam maiores minima, nemo neque perferendis,
    "inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti, dicta distinctio dolorem ducimus eius fuga hic iste maxime, nam porro praesentium quam, sunt tempora voluptas. Ad, consequuntur cumque dicta, dolorem eos esse impedit iusto libero magni nam natus nisi nostrum nulla obcaecati optio, pariatur quas quisquam quos repudiandae tempora.
    facilis illum nihil omnis quidem temporibus. Alias ducimus pariatur ratione repudiandae, sunt tempore voluptatem. Ea eaque eveniet fuga nulla pariatur. Accusamus at expedita laborum nam natus odio officia perspiciatis quam quibusdam
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    注意:

    1. overflow-xoverflow-y不能一个是hidden,一个是visible,这两个属于实验性属性,不建议使用
    2. overflow常用的值是hiddenauto,除了能处理溢出的显示方式,还可以解决很多疑难杂症

    隐藏元素

    属性属性值
    visibilityvisible:显示元素(默认值)
    hidden:隐藏元素,但会占有原来的位置
    displaynone:隐藏元素且不占位
        
    
    
    "box1">
    "box2">
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    继承样式

    元素如果本身设置了某个样式,就使用本身设置的样式。本身没有设置样式,会从父元素开始一级一级继承。但继承的样式优先级是最低的。

    能继承的属性,都是不影响布局的,简单说:都是和盒子模型没关系的

    支持继承的属性:字体属性、文本属性(除了vertical-align)、文字颜色等

    不支持继承的属性:边框、背景、内边距、外边距、宽高、溢出方式等

    默认样式

    元素一般都些默认的样式,如:

    1. a:下划线、字体颜色、鼠标小手
    2. h1 ~ h6:文字加粗、文字大小、上下外边距。
    3. p元素:上下外边距
    4. ul、ol:左内边距
    5. body>:有8px外边距(4个方向)

    优先级:元素的默认样式 > 继承的样式

    布局小技巧

    行内元素、行内块元素,可以被父元素当做文本处理,如: text-align 、 line-height 、 text-indent 等

    如何让子元素,在父元素中水平居中,在子元素加margin: (父元素content - 子元素盒子总高) / 2 auto;

        <style>
            .outer {
                width: 400px;
                height: 400px;
                background-color: blue;
                overflow: hidden;
            }
    
            .inner {
                width: 200px;
                height: 100px;
                background-color: red;
                margin: 150px auto;
                text-align: center;
                line-height: 100px;
            }
        style>
    
    <div class="outer">
        <div class="inner">居中div>
    div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    当子元素为行内元素、行内块元素,给父元素加上:text-align:centerline-height

        <style>
            .outer {
                width: 400px;
                height: 400px;
                background-color: blue;
                text-align: center;
                line-height: 400px;
            }
    
            .inner {
                background-color: red;
                font-size: 20px;
                text-align: center;
            }
        style>
    
    <div class="outer">
        <span class="inner">居中span>
    div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    如何让子元素,在父亲中垂直居中

    子元素为行内元素、行内块元素:让父元素的 height = line-height ,每个子元素都加上: vertical- align:middle;(若想绝对垂直居中,父元素font-size设置为0)

        
    
    
    "box"> 你好 "./images/3.png">
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    元素之间的空白问题

    **产生的原因:**行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符

    **解决方案:**给父元素设置font-size:0,再给需要显示文字的元素,单独设置字体大小

        <style>
            div {
                height: 200px;
                background-color: darkgreen;
                font-size: 0;
            }
    
            .d1 {
                background-color: blue;
            }
    
            .d2 {
                background-color: red;
            }
    
            .d3 {
                background-color: chocolate;
            }
    
            span {
                font-size: 20px;
            }
        style>
        
    <div>
        <span class="d1">韩信span>
        <span class="d2">李白span>
        <span class="d3">露娜span>
    div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    行内块的幽灵空白问题

    **产生原因:**行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的

        <style>
            div {
                width: 600px;
                background-color: red;
            }
    
            img{
                height: 200px;
                vertical-align: bottom;
            }
        style>
    
    <div>
        <img src="001.jpeg">x
    div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    解决方案:

    • 方案一: 给行行内块设置vertical-align,值不为baseline即可,设置为middel、bottom、top均可
    • 方案二: 若父元素中只有一张图片,设置图片为块元素display:block
    • 方案三: 给父元素设置font-size:0如果该行内块内部还有文本,则需单独设置font- size
  • 相关阅读:
    王道 第六章 应用层
    latex修改公式的默认编号
    PLC数据采集案例
    小白零基础学Java该怎么学习?如何快速入门?
    智联招聘的基于 Nebula Graph 的推荐实践分享
    xss过waf的小姿势
    抖音web版地址个人主页和视频地址
    matplotlib中的pyplot实用详解
    Docker Stack部署应用详解+Tomcat项目部署详细实战
    RabbitMQ部署指南
  • 原文地址:https://blog.csdn.net/weixin_45477086/article/details/132843170