CSS 的属性特性、盒子模型、盒子模型注意点

76433橘子
132 阅读14分钟

CSS 的属性特性 和 盒子模型

前端 CSS 学习目录导航

1. CSS 字体属性和文本属性

2. CSS 特性、盒子模型

3. CSS 背景设置、高级元素 form表单使用

4. CSS 结构伪类 以及 其他前端开发知识补充

5. CSS 定位流布局——position

6. CSS 浮动流布局——float

7. CSS 弹性盒布局——flex

8. CSS 形变和动画

9. CSS HTML5拓展 和 CSS函数使用

10. CSS BFC的理解

11. CSS 媒体查询

12. CSS 单位拓展、预处理器、移动端适配方案

CSS生成样式的网址

CSS 属性的特性

  • 继承性（Inherited）

    • 如果一个元素实现设置的属性的话具备我们的继承性，那么设置的这个元素的的后代元素也是会继承这个属性的
    • 但是如果说后代元素对于该属性设置了这个对应的属性，那么在这个元素的身上，直接以这个元素上的属性为标准
    • 但是我们实现的继承是我们的计算值不是我们的设置值
    • 同时我们的属性的继承的话，我们还是可以实现强制性继承的，就是对需要强制性继承的属性，在后代中指定:Inherited

  • 层叠性

    • 就是我们同时对一个元素实现样式的设计的时候，那么这个时候多次对同一个元素实现设计样式，那么这个时候
    • 就会导致我们的样式不断的层叠，最终显示最后的一个样式的设计
    • 就是相当于是我们的一层一层的实现覆盖，最后覆盖的就是我们需要展示的样式
    • 实现判断的时候，最终的体现判断的方法: 通过选择器的优先级来实现显示，但是同级的时候，就是通过的先后顺序
    • 选择器的权重判断 + 同级的先后顺序判断
    • 选择器的权重比较: !important > 内敛样式 > id选择器 > 类选择器，属性选择器，伪类 > 元素选择器，伪元素 > 通配符

  • HTML元素类型

    • HTML的元素类型分为我们的 块级元素 / 行内元素 / 行内块元素
    • 块级元素: 可以实现的是独自占用一行的元素，设置宽高默认有效的元素，并且会导致默认换行 显示模式: block
    • 行内元素: 就是只占用我们的内容含有的部分，设置宽高默认不生效，不会引起换行 显示模式: inline
    • 行内块元素: 就是结合了上面两者的特性，不换行，可以实现设置宽高 显示模式: inline-block

  • 实现修改HTML元素的显示类型

    • 我们是可以通过我们的 display 这个属性来实现我们的设置元素的不同的显示模式的

    • display 可以实现的设置的值的含有:

      • block 这个就是我们的块级元素的显示模式
      • inline 这个就是行内元素的显示模式
      • inline-block 这个就是我们的行内块元素
      • none 实现将我们的元素隐藏
      • content 实现的就是将我们的元素实现显示

  • 网页中的元素实现隐藏的方法

    • 注意我们的设置元素是否隐藏的时候，我们实现的时候，不仅仅是需要控制我们的字体，还需要控制我们的背景

    • 元素实现隐藏就是我们的元素不实现我们的占用位置，不占据空间的效果，这个就是隐藏

    • 就是通过的我们的最终的那个: display: none 这个就i可以实现我们的元素的不展示

      • 这个的控制元素的是否显示的话，我们的元素是不会再占用空间的

    • 或者说通过我们的属性: visibility 来实现控制我们的元素的是否显示，默认的值是: visible,实现隐藏hidden

      • 但是通过这个属性来实现我们的控制元素的是否显示的话，最终的的效果就是我们的元素还是会占用空间的

    • 同时还是可以通过我们的: 设置我们的背景色属性值为: transparent

    • 或者说通过我们的 rgba 来实现我们的颜色的设置，就是实现设置我们的颜色为我们的 透明色即可

      • 或者说我们就直接通过我们的: rgba 来实现我们的直接设置我们的 a 对应的值即可，取值为 0-1

        • 这个的实现的时候，只是对我们的本身设置的元素含有效果，但是对我们的子元素是没有控制的

      • 但是的话，我们的背景色的话，我们是可以通过我们的 opacity 的属性值来实现我们的控制元素的透明度

        • 但是这个属性的话，来实现的我们的设置透明度，不仅仅是控制我们我们的元素的本身，还有我们的所有的子元素

  • 解决元素内容溢出的解决方案（overflow）

    • 元素内容溢出的话，就是我们的元素中具有的内容，超出了我们的元素本身的大小，导致了元素的内容的超出

    • 原本的我们的盒子的大小是由我们的元素具有的内容来实现控制显示的

    • 记住这个属性很强大的，解决不了的都可以尝试使用

    • 但是这个时候，我们是可以通过我们的属性来实现控制显示的模式: 这个属性就是我们的 overflow

      • 这个属性可以实现设置的值含有:

        • visible 这个属性就是我们的控制显示的默认值
        • hidden ： 这个属性值的设置，就是可以实现的是超出盒子大小的部分的内容实现隐藏，不显示
        • scroll: 这个属性值的设置，就是实现的是将我们的元素的内容以滚动条的形式实现展示
        • auto： 这个的属性值的设置就是来实现自动的判断盒子中的内容是否出现超出，然后实现显示

CSS 的盒子模型

  • 认识盒子模型

    • 通过浏览器的调试者工具就可以看见我们的其中之一的盒子模型

      • 内容区域（content）: 就是通过设置盒子的高度和宽度来实现的控制内容区域的大小
      • 内边距（padding）: 这个就是来实现的是我们的设置一个盒子模型中的内容区和边框的距离大小
      • 边框（border）: 就是来实现的是设置一个盒子的边框，来增加美感的
      • 外边距（margin）：这个就是设置盒子和盒子之间的间距的设置
      • image-20241002043432183.png

  • 盒子模型的内容区域（content）

    • 在我们的盒子模型的内容区域的设置中，我们实现设置的的时候，一般需要实现的就是我们的设置高度以及宽度

    • 然后的话，我们实现设置我们的网页的时候，主要是设置我们的内容区域的样式，来实现我们的内容更加的好看罢了

    • 高度的实现设置: height, 高度的设置:width

    • 同时在我们的移动端的实现适配的时候，我们需要实现的设置的是

      • min-weight 或者 max-weight 这个就是设置我们的盒子的最大和最小的宽度
      • min-height 或者 max-height 这个就是实现设置的盒子的最大和最小的高度
      • 这两个主要实现的就是移动端的适配性的时候很需要的四个属性
      • 但是一般的话，我们的一个盒子的设计的时候，一般是不需要设置高度的，一般都是由我们的内容来实现撑大

  • 盒子模型的内边距（padding）

    • 实现的设置是我们的设置最终的 内容区和内边距 的间距

    • 我们的盒子模型的内边距是分为四个方向来实现设置的

      • padding-top padding-right padding-bottom padding-left
      • 但是这几个属性的单独设置是可以直接通过一个 padding 来实现设置的
      • 通过一个padding 的属性来实现设置的时候，顺序是: 上右下左的顺序来实现设置的

  • 盒子模型的边框（border）

    • 每一个的边框都是具有 宽度 样式 颜色 方向

    • 边框宽度的设置

      • border-top-width border-right-width border-bottom-width border-left-width
      • 但是我们的最终的简写形式为: border-width 这个属性直接将上面的全部实现了包含，一起实现了设计

    • 边框颜色的设置

      • border-top-color border-right-color border-bottom-color border-left-color
      • 但是实际上的话，颜色的设置是可以四个方向直接一起设置的: border-color

    • 边框的样式

      • border-top-style border-right-style border-bottom-style border-left-style

      • 但是我们的这四个方向还是可以实现设计的； border-style

      • 边框的样式可以实现设置的值含有:

        • solid 实线
        • dashed 虚线
        • dotted 点线

    • 同时上面的写法还是可以实现混合实现书写的

      • border-方向 ： border-weight border-style border-color
      • 或者说直接使用 border 属性来直接实现设置，这个实现了最终的包含四个方向

    • 边框圆角效果（border-radius）

      • 通过我们的这个就可以实现我们的设计出最终的盒子的圆角的效果了
      • 可以实现设置的值含有: 设计大小的单位或者说百分比
      • 但是百分比的实现设计的时候，最终的实现设计的时候，就是通过border+padding+content来计算的

  • 盒子模型的外边距的设置（margin）

    • 这个属性就就是用来实现设置我们的盒子和盒子之间的外边距的，这个是元素和元素之间的间距设置
    • 和上面的那些属性一样的，同样是分为了我们的四个方向
    • margin-top margin-right margin-bottom margin-left
    • 一样的，还是可以直接书写混合属性的，直接包含四个方向，上右下左
    • 但是需要注意的是: margin 实现的设置是设置我们的块级元素之间的间距，一般的话书写的方式的话
    • 我们的最终的实现效果就是块级元素里面书写我们的行内元素
    • 设置盒子模型的时候，其相对而言的设置都是相对于我们的父盒子来实现设置的，默认是以浏览器窗口来设置的

CSS 盒子模型的注意点

  • 内边距（padding）和外边距（margin）的对比

    • padding是设置的是我们的将边框和内容区实现分离
    • margin 这个属性是设置的是我们的将内部的和父盒子的区域间距，这个就是一个相对的属性设置
    • 但是实现使用外边距的时候，设置左右没问题的，但是上下会有问题，这个时候就需要使用overflow来解决
    • 这种嵌套的盒子的设置，可以把内部的盒子当作内容，然后使用padding
    • margin 的使用可以使用在那个兄弟元素之间

  • 外边距（margin）的上下传递问题

    • 一般这个的传递性问题的话，是出现在父盒子和子盒子之间的传递问题

    • 这个时候左右不会出现传递，但是上下就会出现传递，设置上下，这个会导致是父盒子移动

      • 这种现象就是margin 的上下传递问题

      • 这个时候，是可以通过设置边框（border）来实现解决这个问题，这个时候就没有传递性问题了

      • 同时在设置两个兄弟盒子之间的那个盒子的间距的问题的时候，只用设置一个即可

        • 否则就会导致只保持我们的大的间距的设置的值

    • 如何实现解决传递问题耶:

      • 给父元素设置外边距padding-top或者padding-bottom
      • 给父元素设置边框border
      • 或者说触发BFC，设置overflow 为 auto

  • 外边距（margin） 的上下折叠性问题（collapse）

    • 还是主要针对的是我们的 上下的两个属性的设置margin-top margin-bottom

    • 折叠问题出现的计算问题

      • 两个值实现比较，取相对较大的值

    • 出现的情况

      • 两个块级兄弟元素之间出现折叠的现象（collapse）

image-20241003144557771.png

image-20241003144700454.png

  • 块级元素水平据中问题

    • 块级元素的剧中问题的实现就是通过的我们的 margin 来实现的设置的

    • 实现的设置的代码为: margin: number px auto 这个就可以实现我们的元素居中的问题

      • maegin:0 auto
      • 这个时候就可以实现我们的块级元素的自动的居中，但是是相对于我们的父盒子来实现的
      • 同时我们的盒子模型的使用的时候。习惯设置的属性含有； border-box: box-sizing

  • 盒子模型的外轮廓（outline）

    • 一个盒子的实现的时候是具有我们的内容区 内边距 边框 外边距

    • 但是只不过我们的 内边距 和 边框 都是会导致我们的盒子撑大的，这个就导致了我们的最终的效果盒子变大

    • 这个时候就需要我们的盒子实现的是保持我们的盒子大小就是设置的盒子大小

      • 这个时候就需要设置我们的: border-box: box-sizing

    • 但是我们的外边距的设置是不会导致我们的盒子撑大的，这个是不会占用空间的

CSS 阴影的设置

  • 盒子阴影（box-shadow）

    • 这个阴影的实现设置的时候，可以使用逗号实现隔绝开，从前到后实现折叠的效果

    • 这个就是我们的阴影的设置

    • 这个属性我们可以书写的属性含有 2-4 个

    • 设置的具体的格式:

      • 1.设置水平和垂直方向的那个偏移量（offset-x offset-y）
      • 2.设置阴影的模糊度 (blur) 以及我们的向外扩散的值【可选】
      • 3.设置我们的阴影的颜色（shadow-color），阴影的颜色是可以设置多个的，但是还是需要这几步骤，用,隔开
      • 4.还可以选择阴影的出现的方式 inset这个值不是默认的，但是有的时候还是需要的
      • 还有很多的设置模式，直接官方文档
    •     <!DOCTYPE html>
    <html lang="en">  
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      .content{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        box-shadow: -10px -10px 10px 10px orange;
      }
    </style>
    <body>
      <div class="content"></div>
    </body>
    </html>

  • 文字阴影（text-shadow）

    • 这个就是用来实现我们的文字背景的实现书写的，给我们的文字添加阴影
    • 我们的文字阴影的实现设置的时候，是不用含有我们的向外扩展的属性设置的
    • 和我们的盒子阴影的区别就是没有我们的 spread-radius 值的设置
    •     <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <style>
      .content{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        box-shadow: -10px -10px 10px 10px orange;
        text-shadow: 5px 5px 10px black;
      }
    </style>
    <body>
      <div class="content">hello fronted</div>
    </body>
    </html>
  • 这两个属性随便玩玩就行了，有实际需求的时候，直接用就行了，记忆模式: shadow

CSS 的盒子模型 box-sizing 属性

  • 首先这个属性我们是可以设置两个值的，一个就是默认值： content-box 和 border-box

  • content-box：

    • content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

  • border-box

    • border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
avatar
文章
阅读
粉丝