【CSS】盒模型，水平格式化，垂直格式化，块布局经典示例，元素隐藏方法，CSS函数

李小浦

已于 2024-02-28 13:46:20 修改

阅读量306

点赞数 18

分类专栏： # CSS 文章标签： css

于 2022-09-22 22:42:19 首次发布

本文链接：https://blog.csdn.net/partworld/article/details/126968745

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

盒模型

盒模型说白了就是一个方块，元素套元素就是方块套方块，一层套一层。每一个方块可以控制它的摆放方式。
蓝色是边框，橘黄色是外边距，绿色是内边距，内容是在内边距以内的空白区域
最内侧是connect-box，绿色是padding-box，蓝色是border-box，橘黄色是margin-box
补充：box-shadow属性：这是盒子阴影
box-shadow : inset 0px 0px 15px 2px blue;
inset是向内影子，向右偏移量，向下偏移量，模糊度，扩散半径(在原来的基础上向四周扩散)，颜色
如果设置多个阴影的话，阴影是可以叠加的
text-shadow：这个是文字阴影，和box-shadow相比，没有inset，没有扩散半径，其他的都一样

在这里插入图片描述

margin-left：左外边距，margin-right : 右外边距，margin-top：上外边距，margin-bottom：下外边距；margin对行内非替换元素有特殊性，上下的margin是不生效的
padding同样使用四个方向，padding：20px 10px，这个就相当于上右下左(顺时针)，如果写了两个，其他两个方向就是对称的，上右下左相当于20px 20px 10px 10px，缺少left的值就会使用right的值；padding对行内非替换元素有特殊性，上下会被撑起来，但是不占据空间
border是边框的意思，border ：10px solid blue；border对行内非替换元素也有特殊性，上下会被撑起来，但是不占据空间
面试题：用css画出一个三角形：将padding设置成0px，border的颜色都设置成透明的rgba(0,0,0,0)

用CSS的border属性实现各种形状
补充：box-sizing属性: 作用是设置width和height属性用来指定哪个盒子的尺寸，属性值可以是content-box和border-box，默认盒子的尺寸是content-box
如果里面有子元素的话，那么width：50%是父元素的content内容的width的百分之50
补充：border-radius属性: 作用是边框圆角化，例：border-radius：30px，还有border-top-left-radius：50px 20px，这个画出来的是个椭圆，水平方向上一半50px，垂直方向上一半20px

上下margin的传递

margin的左右的是不会传递的，上下是会传递的；如果子块级元素的顶部线和父元素的顶部线重叠，从而出现了margin的子传父的现象
margin-bottom传递：如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那就就会发生marign传递现象
如何解决：1.给子元素设置margin改成给父元素设置padding2.给父元素设置border:1px solid transparent3.触发父元素的bfc，给当前的盒子建立独立的空间，overflow：auto

margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距

上下margin的折叠

垂直方向上相邻的2个margin有可能会合并为1个margin，这种现象叫做collapse；
有两种情况，一个是兄弟之间的margin折叠，取得是最大值；一个是父子之间的margin折叠，取得的也是最大值
计算规格：两个值进行比较，取较大的值

块级元素的水平居中问题

1.父级使用text-align:center；子级使用display：inline-block(因为text-align：center适用于行内元素)
2.margin:0 auto

视觉格式化(布局)

基本框

CSS假定每个元素都有一个或者多个(span)矩形框，这个就是元素框。外边距可以设置为负的，内边距不能为负值。也可以设置内容背景(例如某种颜色或图像)，范围是border以内(包括border)
边框使用已定义的样式生成，css3中，边框也可以为图像，边框的颜色使用border-color属性设置。

包含块

每个元素都相对于包含块摆放，包含块就是一个布局上下文，浏览器窗口叫做初始包含块(viewport）
包含块由最近的块级祖先框，表单元格或行内块祖先框的内容边界构成，p的包含块是div的content-box，div的包含块是body的content-box

重要术语

常规流normal flow

指的就是从左向右，从上向下显示，也就是我们熟悉的html的文档布局。而在阿拉伯语中，流方向可能不同。一般的页面都是使用正常流

非替换元素

在标签中间包裹文字，有开始和结束标签的，是非替换元素
例如：span em div等

替换元素

input，img等，本身不是文字，作为其他内容占位符的一个元素。

块级元素

p，h1，div之类的元素。通过声明display：block，可以让元素变成块级元素。

行内元素

strong，span等都是行内元素，或者写一个浏览器不认识的标签也是行内元素。

根元素

html元素就是根元素。

块级元素水平格式化

元素的水平方向和垂直方向，其处理方式可能不同。有上边距，左边距等等
一般的，一个元素的width是border以内的距离(包括border)，height也同样，但是我们可以通过box-sizing：content-box/border-box属性来改变边距的范围。
对块级元素独占一行，可以设置宽度和高度
行内级非替换元素元素在同一行显示，不可以设置宽度和高度，宽高是由包裹的内容决定的（默认伪元素是行内级元素，如果要设置宽高要display:inline-block）

水平格式化

p style=“width:200px;” 这段代码的border以内的宽度为200像素。但是如果加上padding：10px；margin：20px这两个属性，那么宽度就为260像素了，这样就会隐式的增加了宽度。

水平属性

水平布局的七大属性：margin-left,border-left,padding-left,width,padding-right,border-right,margin-right
这7个属性加在一起是元素包含块的宽度，也是块元素的父元素的内容区域的宽度

auto

margin-left,margin-right,width可以设置为auto，其余的属性必须设置为特定的值，或者默认宽度为0.外边距可以设置为负值，但是width必须设置为auto或某种类型的非负值。
没有auto时，元素过分受限，会重置margin-right为auto
当只有一个auto时，会把包含块的宽度减去其他六个值，得到这个auto
当有两个auto都出现在margin上，则两边的margin被计算为相同，元素居中。这也是元素居中的正确做法。
其中，margin-left不会被浏览器主动计算为负值，最小为零，为零时还无法满足条件时，继续重置margin-right
这里有一个负外边距的概念，如果重置的margin-right为负值，那么它的框框就会超过，类似于移出屏幕的概念，相当于子元素比父元素还宽。
常规流的块元素不会被子元素撑宽，它的宽度仅取决于包含块及自身的水平属性设置。

替换元素水平格式化

此处指display已经为block了，和以上基本差不多，只是width设置成auto没有什么用处。

垂直格式化

一个元素的默认高度是由其内容决定，高度还会受内容宽度影响。p style = “height = 10px”

overflow

补充：属性overflow ： hidden，可以将超出的部分隐藏，默认值是visible，scroll可以出现滚动条（但是注意要设置高度！），hidden是隐藏，auto是需要滚动的时候滚动，不需要的时候就没有滚动条

垂直属性

垂直格式化也有7个相关的属性：margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom
marign-top,height,margin-bottom都有auto属性
height如果是百分比的话，是包含块高度的百分比。
margin-top，margin-bottom，padding-top，padding-bottom如果是百分比的话，是基于包含块的宽度计算的。
这里需要注意，如果没有显式声明包含块的height，子元素的百分数高度会重置为auto

合并垂直外边距

兄弟之间的垂直块元素合并，保留较大者
父子元素的合并，保留较大者。
自己重叠，如果没有边框，保留较大者

BFC/IFC

FC分为BFC和IFC，FC是格式化上下文，IFC是行内级格式化上下文（inline format context）
Block format Context 块级格式化上下文，创建了一个封闭的空间，对于块元素来说，内部元素的margin就跑不出去了。里面的东西影响不到外面，外面的东西影响不到里面，html就是BFC格式的元素;BFC会使上下两个块级元素在同一BFC进行margin折叠，所以如果我们让他们不折叠，就重新创建一个BFC
MDN上整理的哪些具体情况下会创建BFC：1.html根元素2.浮动元素（float不是none）3.绝对定位元素（absolute或fixed）4.display：inline-block5.表格元素也会生成BFC6.overflow只要不等于visible的块元素就可以触发BFC7.display：flex8.display：grid9.display:flow-root
原本包裹的是可视范围，即包裹住子元素的border-box，元素跑到外面了，加完BFC之后包裹的就是布局范围了，即包裹住子元素所有的margin-box。
BFC还可以解决浮动高度塌陷的问题：BFC会使父元素的高度增加，以包裹住子元素的下边缘，从而解决浮动元素的高度塌陷问题

块布局经典示例

元素水平排列

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    section {
      border: 1px solid;
      width: 360px;
      margin: auto;
    }

    div {
      width: 60px;
      height: 30px;
    }

    div:not(:first-child) {
      margin-top: -30px
    }

    div:nth-child(2) {
      margin-left: 60px;
    }

    div:nth-child(3) {
      margin-left: 120px;
    }

    div:nth-child(4) {
      margin-left: 180px;
    }

    div:nth-child(5) {
      margin-left: 240px;
    }

    div:nth-child(6) {
      margin-left: 300px;
    }

  </style>
</head>

<body>
  <section>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
  </section>
</body>

</html>

4*4表格

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .a article {
      width: 60px;
      height: 30px;
    }

    .a article:nth-child(n+5) {
      margin-left: 60px;
    }

    .a article:nth-child(n+9) {
      margin-left: 120px;
    }

    .a article:nth-child(n+13) {
      margin-left: 180px;
    }

    .a article:nth-child(4n+5) {
      margin-top: -120px;
    }

    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

  </style>
</head>

<body>
  <main class="a">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </main>
</body>

</html>

元素之间有虚线分割

核心：超出去，然后再隐藏。

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* li:not(:last-child) {
      border-bottom: 1px dotted;
    } */
    li {
      border-bottom: 1px dashed;
      margin-bottom: -1px;
      padding-top: 1px;
    }

    ul {
      xdisplay: flow-root;
      xpadding-bottom: 0.1px;
      overflow: hidden;
    }

  </style>
</head>

<body>
  <ul>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
  </ul>
</body>

</html>

元素隐藏

display:none，元素是存在的，在html中是存在的，但是不显示出来，不占据任何空间，相当于v-show；v-if是浏览器压根没有渲染，不占据任何空间
visibility设置为hidden；visibility的默认值是visible，元素是可见的；但是和display的区别是依然占据着空间，display就是彻底没有了

通过透明度隐藏

rgba中的a是alpha，是设置透明度的，值是0~1，通过把a设置为0，就把文本隐藏了，但是还是可以选中的；需要注意的是，rgba的alpha只是单独的设置文字的透明度和背景的透明度，不影响子元素；属性值为transparent和rgba(0,0,0,0)相等
opacity:0，也可以将元素隐藏，但是依然占据空间；opacity设置透明度的是将文本和背景及其子元素全部设置，要和alpha进行区分