CSS盒子模型

最新推荐文章于 2024-08-20 13:42:14 发布
最新推荐文章于 2024-08-20 13:42:14 发布
阅读量70 收藏
点赞数
分类专栏： # HTML-CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Welitsi/article/details/132104523
版权

1.盒子模型

◼ HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性

  • 内容（content） : 元素的内容width/height

  • 内边距（padding） : 元素和内容之间的间距

  • 边框（border） : 元素自己的边框

  • 外边距（margin）: 元素和其他元素之间的间距

在这里插入图片描述

2.盒子模型的四边

◼ 因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边:

在这里插入图片描述

在浏览器的开发者工具中

在这里插入图片描述

3.内容 - 宽度和高度

◼ 设置内容是通过宽度和高度设置的:

  • 宽度设置: width
  • 高度设置: height

◼ 注意: 对于行内级非替换元素来说, 设置宽高是无效的!

<!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>
    .box {
      background-color: #f00;

      /* width */
      /* auto 交给浏览器来决定 */
      /* 块级元素: 独占一行(父元素) */
      width: auto;
    }

    .title {
      /* 行内级: 包裹内容 */
      display: inline-block;
      width: auto;
    }

    img {
      width: auto;
      width: 200px;
    }
  </style>
</head>
<body>
  
  <div class="box">我是box</div>
  <span class="title">我是span元素</span>
  <img src="../images/gouwujie01.jpg" alt="">

</body>
</html>

◼ 另外我们还可以设置如下属性:

  • min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
  • max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
  • 移动端适配时, 可以设置最大宽度和最小宽度;

◼ 下面两个属性不常用:

  • min-height：最小高度，无论内容多少，高度都大于或等于min-height
  • max-height：最大高度，无论内容多少，高度都小于或等于max-height
<!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>

    body {
      /* inline-level boxs */
      /* text-align: center; */
    }
    .home {
      height: 2000px;
      background-color: #f00;

      /* 最大的宽度: 750px */
      max-width: 750px;

      /* 最小的宽度: 500px */
      min-width: 600px;

      /* 块级元素居中 */
      margin: 0 auto;
    }
  </style>
</head>
<body>
  
  <div class="home"></div>

</body>
</html>

4.内边距 - padding

◼ padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;

◼ padding包括四个方向, 所以有如下的取值:

  • padding-top：上内边距
  • padding-right：右内边距
  • padding-bottom：下内边距
  • padding-left：左内边距

◼ padding单独编写是一个缩写属性：

  • padding-top、padding-right、padding-bottom、padding-left的简写属性
  • padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

◼ padding并非必须是四个值, 也可以有其他值

<!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>
    .box {
      /* 设置一个红色的实体边框 */
      border: 1px solid red;
      display: inline-block;

      /* line-height */
      /* line-height: 36px; */

      /* 内边距: padding */
      /* padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px; */

      /* 等价于: 缩写属性 */
      padding: 10px 20px 30px 40px;

      /* 其他值的情况 */
      /* 3个值 */
      /* 省略left -> 使用right */
      padding: 10px 20px 30px;
      /* 2个值 */
      /* 省略: left -> 使用right */
      /* 省略: bottom -> 使用top */
      padding: 10px 20px;
      /* 1个值 */
      /* 上下左右都使用同一个值 */
      padding: 10px;
    }
  </style>
</head>
<body>
  
  <div class="box">我是box</div>

</body>
</html>

4.1 padding的其他值

在这里插入图片描述

5.边框 - border

◼ border用于设置盒子的边框:

在这里插入图片描述

◼ 边框相对于content/padding/margin来说特殊一些:

  • 边框具备宽度width;
  • 边框具备样式style;
  • 边框具备颜色color;

5.1边框的设置方式

◼ 边框宽度

  • border-top-width、border-right-width、border-bottom-width、border-left-width
  • border-width是上面4个属性的简写属性

◼ 边框颜色

  • border-top-color、border-right-color、border-bottom-color、border-left-color
  • border-color是上面4个属性的简写属性

◼ 边框样式

  • border-top-style、border-right-style、border-bottom-style、border-left-style
  • border-style是上面4个属性的简写属性

5.2边框样式的设置值

◼ 边框的样式有很多, 我们可以了解如下的几个:

  • groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
  • ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来

在这里插入图片描述

5.3同时设置的方式

◼ 如果我们相对某一边同时设置 宽度 样式 颜色, 可以进行如下设置:

  • border-top
  • border-right
  • border-bottom
  • border-left
  • border：统一设置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>
    .box {
      display: inline-block;

      width: 300px;
      height: 300px;

      /* width */
      /* border-top-width: 10px;
      border-right-width: 20px;
      border-bottom-width: 30px;
      border-left-width: 40px; */
      /* border-width: 10px 20px 30px 40px; */

      /* style */
      /* border-top-style: solid;
      border-right-style: dashed;
      border-bottom-style: groove;
      border-left-style: ridge; */
      /* border-style: solid dashed groove ridge; */

      /* color */
      /* border-top-color: red;
      border-right-color: blue;
      border-bottom-color: green;
      border-left-color: orange; */
      /* border-color: red blue green orange; */

      /* 总缩写属性 */
      border: 10px solid red;
    }
  </style>
</head>
<body>
  
  <div class="box">我是box</div>

</body>
</html>

6.圆角 – border-radius

◼ border-radius用于设置盒子的圆角

在这里插入图片描述

◼ border-radius常见的值:

  • 数值: 通常用来设置小的圆角, 比如6px;
  • 百分比: 通常用来设置一定的弧度或者圆形;

◼ border-radius事实上是一个缩写属性:

  • 将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
  • 开发中比较少见一个个圆角设置;

◼ 如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.

在这里插入图片描述

<!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>

    div {
      width: 180px;
      height: 100px;
      background-color: #f00;

      border: 10px solid green;
    }

    .box {
      /* 设置圆角 */
      /* 设置具体的数值 */
      /* border-radius: 20px; */
      /* 设置百分比 */
      /* 百分比相对于谁, 了解即可 */
      border-radius: 10%;
    }

    .content {
      border-radius: 20px;
    }

    .home {
      width: 100px;
      height: 100px;
      border: 10px solid red;
      background-color: #0f0;

      border-radius: 50%;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>
  <div class="content"></div>


  <div class="home"></div>

</body>
</html>

7.外边距 - margin

◼ margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;

◼ margin包括四个方向, 所以有如下的取值:

  • margin-top：上内边距
  • margin-right：右内边距
  • margin-bottom：下内边距
  • margin-left：左内边距

◼ margin单独编写是一个缩写属性：

  • margin-top、margin-right、margin-bottom、margin-left 的简写属性
  • margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

◼ margin也并非必须是四个值, 也可以有其他值;

7.1 margin的其他值

在这里插入图片描述

<!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>
    /* 取出元素之间的空隙——暂时解决方案 */
    body {
      font-size: 0;
    }

    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #f00;

      /* margin-bottom: 30px; */
      /* margin-right: 30px; */
    }

    .container {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #0f0;

      /* margin-top: 30px; */
      /* margin-left: 30px; */

      /* 缩写属性 */
      margin: 0 20px;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

  <div class="container"></div>

</body>
</html>

7.2上下margin的传递

◼ margin-top传递

  • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

◼ margin-bottom传递

  • 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

◼ 如何防止出现传递问题？

  • 给父元素设置padding-top\padding-bottom
  • 给父元素设置border
  • 触发BFC: 设置overflow为auto

◼ 建议

  • 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>
    .container {
      /* 消除传递方式1：给父元素设置padding */
      /* padding-bottom: 1px; */
      /* 消除传递方式2：触发BFC */
      /* overflow: auto; */
      /* 消除传递方式3：设置border */
      /* border: black solid 1px; */
      background-color: skyblue;
    }

    .top {
      height: 40px;
      margin: 30px;
      background-color: #faa;
    }

    .bottom {
      height: 30px;
      margin: 40px;
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div>我是div</div>
</body>
</html>

7.3上下margin的折叠

◼ 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）

◼ 水平方向上的margin（margin-left、margin-right）永远不会collapse

◼ 折叠后最终值的计算规则

  • 两个值进行比较，取较大的值

◼ 如何防止margin collapse？

  • 只设置其中一个元素的margin

7.4上下margin折叠的情况

◼ 两个兄弟块级元素之间上下margin的折叠

在这里插入图片描述

◼ 父子块级元素之间margin的折叠

在这里插入图片描述

<!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>
    .box1 {
      height: 100px;
      background-color: #f00;

      margin-bottom: 30px;
    }

    .box2 {
      height: 100px;
      background-color: #0f0;

      margin-top: 50px;
    }
  </style>
</head>
<body>
  
  <div class="box1"></div>
  <div class="box2"></div>

</body>
</html>

8.外轮廓 - outline

◼ outline表示元素的外轮廓

  • 不占用空间
  • 默认显示在border的外面

◼ outline相关属性有

  • outline-width: 外轮廓的宽度
  • outline-style：取值跟border的样式一样，比如solid、dotted等
  • outline-color: 外轮廓的颜色
  • outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似

◼ 应用实例

  • 去除a元素、input元素的focus轮廓效果
<!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>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;

      border: 50px solid orange;
      padding: 30px;

      outline: 30px solid #0f0;
    }

    /* 行内级元素设置margin-top无效 */
    a {
      margin-top: 100px;
      display: inline-block;

      outline: none;
    }

    input {
      outline: none;
    }

    /* a:focus {
      outline: none;
    } */
  </style>
</head>
<body>
  
  <div class="box"></div>

  <a href="#">百度一下</a>
  <input type="text">

</body>
</html>

9.盒子阴影 – box-shadow

◼ box-shadow属性可以设置一个或者多个阴影

  • 每个阴影用<shadow>表示
  • 多个阴影之间用逗号,隔开，从前到后叠加

◼ <shadow>的常见格式如下

在这里插入图片描述

  • 第1个：offset-x, 水平方向的偏移，正数往右偏移
  • 第2个：offset-y, 垂直方向的偏移，正数往下偏移
  • 第3个：blur-radius, 模糊半径
  • 第4个：spread-radius, 延伸半径
  • <color> ：阴影的颜色，如果没有设置，就跟随color属性的颜色
  • inset：外框阴影变成内框阴影
<!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>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;

      box-shadow: 5px 5px 10px orange, 10px 10px 10px green;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

9.1 盒子阴影 – 在线查看

◼ 我们可以通过一个网站测试盒子的阴影:

  • https://html-css-js.com/css/generator/box-shadow/

在这里插入图片描述

10.文字阴影 - text-shadow

◼ text-shadow用法类似于box-shadow，用于给文字添加阴影效果

◼ <shadow>的常见格式如下

在这里插入图片描述

  • 相当于box-shadow, 它没有spread-radius的值;

◼ 我们可以通过一个网站测试文字的阴影:

  • https://html-css-js.com/css/generator/box-shadow/
<!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>
    .box {
      font-size: 50px;
      font-weight: 700;

      text-shadow: 5px 5px 5px orange, 10px 10px 5px blue, 15px 15px 5px green;
    }
  </style>
</head>
<body>
  
  <div class="box"> Hello Coderwhy </div>

</body>
</html>

11.行内非替换元素的注意事项

◼ 以下属性对行内级非替换元素不起作用

  • width、height、margin-top、margin-bottom

◼ 以下属性对行内级非替换元素的效果比较特殊

  • padding-top、padding-bottom、上下方向的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>
    span {
      /* 宽高不生效 */
      width: 200px;
      height: 200px;
      /* 左右生效、上下不生效 */
      margin: 20px;
      /* 上下左右都生效，但上下不占据空间 */
      padding: 30px;
      /* 有效果，但不占据空间 */
      border: red solid 2px;
      background-color: skyblue;

    }
  </style>
</head>
<body>
  <div>我是div元素</div>
  <div>我是div元素</div>
  啊啊啊<span>我是span元素</span>
</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>
    /* 
      1> 背景色有没有设置到border下面(有设置)
      2> 前景色会在border没有设置颜色的情况下, 显示出来color颜色
    */
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
      /* color: orange; */
      padding: 30px;
      border: 10px solid rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

在这里插入图片描述

12.CSS属性 - box-sizing

◼ box-sizing用来设置盒子模型中宽高的行为

◼ content-box

  • padding、border都布置在width、height外边

◼ border-box

  • padding、border都布置在width、height里边

12.1 box-sizing: content-box

在这里插入图片描述

◼ 元素的实际占用宽度 = border + padding + width

◼ 元素的实际占用高度 = border + padding + height

12.2 box-sizing: border-box

在这里插入图片描述

◼ 元素的实际占用宽度 = width

◼ 元素的实际占用高度 = height

12.3 IE盒子模型

在这里插入图片描述

13.元素的水平居中方案

◼ 在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）

◼ 行内级元素(包括inline-block元素)

  • 水平居中：在父元素中设置 text-align: center

◼ 块级元素

  • 水平居中：margin: 0 auto
<!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>
    body {
      margin: 0;
      padding: 0;

      /* inline-level box */
      /* 行内级: 行内非替换元素span/a 行内替换元素 img input inline-block */
      /* text-align: center; */
    }

    .container {
      width: 800px;
      height: 150px;
      background-color: #0f0;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;

      margin: 0 auto;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box"></div>
  </div>

</body>
</html>

14.综合案例练习

在这里插入图片描述

1.案例1： 小米商城

reset.css

body, p, h3 {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f5f5f5;
  font: 12px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}

h3 {
  font-weight: 400;
}

/* a的重置 */
a {
  text-decoration: none;
  color: #333;
  font-size: 12px;
}

demo02.css

.item {
  display: inline-block;

  width: 234px;
  height: 300px;
  padding: 20px 10px;

  text-align: center;

  background-color: #fff;
  box-sizing: border-box;
}

.item:hover {
  box-shadow:  0 2px 20px 5px rgba(0, 0, 0, .1)
}

.item img {
  width: 160px;
  height: 160px;
}

.item .title {
  margin-top: 14px;
}

.item .desc {
  color: #999;
  margin-top: 8px;

  /* 单行显示省略号-固定写法 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item .price {
  margin-top: 14px;
  font-size: 14px;
}

.item .new-price {
  color: #ff6700;
}

.item .old-price {
  color: #999;
  text-decoration: line-through;
  margin-left: 5px;
}

index.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>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/demo02.css">
  <style>
    body {
      text-align: center;
    }
  </style>
</head>
<body>
  
  <a class="item" href="https://www.mi.com/xiaomipad5pro" target="_blank">
    <img src="../images/xiaomi01.webp" alt="">
    <h3 class="title">小米平板5 Pro</h3>
    <p class="desc">
      全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
    </p>
    <div class="price">
      <span class="new-price">2399元起</span>
      <span class="old-price">2499元</span>
    </div>
  </a>

</body>
</html>

2.案例2：B站

<!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>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    a {
      display: block;
    }

    .item {
      width: 300px;
      margin: 0 auto;
    }

    .item .album img {
      width: 100%;
      border-radius: 8px;
    }

    .item .info p {
      font-size: 15px;
      margin-top: 8px;

      /* 显示一行 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
        /* 多行显示省略号写法 */
      /* display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; */
    }

    .item .info .anchor {
      font-size: 13px;
      color: #888;
      margin-top: 5px;
    }

    .item .info .anchor::before {
      content: url(../images/widget-up.svg);
      display: inline-block;
      width: 16px;
      height: 16px;
      position: relative;
      top: 1px;
    }
  </style>
</head>
<body>
  
  <div class="item">
    <div class="album">
      <a href="#">
          <!-- 增加 referrerpolicy 属性可以解决某些图片禁止访问的问题 -->
        <img src="https://i0.hdslb.com/bfs/archive/9c763bf06b7765462eac62cc0a9a34b260d3f9c8.jpg@672w_378h_1c.webp" referrerpolicy="no-referrer" alt="">
      </a>
    </div>
    <div class="info">
      <a href="#">
        <p>萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？</p>
      </a>
      <a class="anchor" href="#">
        <span class="nickname">Muxi慕喜咩</span>
        <span class="time">3-20</span>
      </a>
    </div>
  </div>

</body>
</html>
DustinWangq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css盒子模型
2301_80840100的博客
06-22 1158
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
CSS 盒子模型
m0_52861684的博客
08-28 1467
CSS 盒子模型总结。
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
21.4 CSS 盒子模型
09-02
CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
使用css如何获取最后一行的元素？使用css解决双边框问题
最新发布
希文Gershwin
08-20 601
我只要知道最后一行中有哪几个元素，然后给最后一行的元素设置就行了但是只能获取到最后一个元素需要知道一排要有几个元素才行。
深入探索CSS的:unresolved伪类：选择未解析元素的神秘面纱
2401_85702623的博客
08-17 714
伪类是CSS的一个选择器，用于选择那些尚未解析的元素。在Web开发中，我们可能会遇到一些元素，它们依赖于外部资源或异步加载的内容，这些元素在加载过程中可能还没有完全解析。使用伪类，我们可以为这些元素定义特定的样式，直到它们完全解析并显示在页面上。
CSS——弹性盒（flex）
Fan_web的博客
08-16 1411
本文主要跟大家分享了弹性盒的内容，同时扩充了CSS中的部分知识：像素、视口、移动端、完美视口、vw单位以及适配、响应式布局中的媒体查询等等。下一节将开始分享关于JavaScript的初级学习内容。
CSS的:defined伪类：选择已定义元素的新选择器
2401_85743969的博客
08-17 640
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
CSS的文字阴影属性text-shadow
读心悦
08-17 265
CSS的属性用于在文本上添加阴影效果。这个属性可以接受一个或多个阴影，每个阴影由其在X轴和Y轴上的偏移量、模糊半径（可选）和颜色值来定义。你可以通过逗号分隔来指定多个阴影。
CSS的:definite和:indefinitte伪类：探索确定性与不确定性的元素选择
2401_85763803的博客
08-17 536
CSS（层叠样式表）是控制网页样式的核心技术，它允许开发者根据元素的特性来应用样式。CSS4提出了一些新的伪类选择器，其中就包括:definite和伪类。这些伪类基于元素的确定性或不确定性来选择元素，为开发者提供了一种创新的方式来处理基于上下文的样式需求。本文将详细介绍:definite和伪类的使用方式、应用场景以及如何通过它们增强网页的语义表达和视觉表现。
CSS方向选择的艺术：深入探索:horizontal和:vertical伪类
2401_85702623的博客
08-17 775
和:vertical伪类是CSS选择器，用于根据元素的书写模式（writing mode）来选择元素。选择器应用于书写模式为水平方向的元素，而:vertical选择器应用于书写模式为垂直方向的元素。
掌握CSS的:any-link伪类：统一链接样式的高效方法
2401_85339615的博客
08-17 673
any-link伪类是CSS3中引入的选择器，它匹配所有类型的链接元素，无论它们是未访问的还是已访问的。这个伪类是:link和:visited的通用形式，允许开发者编写一套样式规则，同时应用于这两种链接状态。
css 文字图片居中及网格布局
m0_69254007的博客
08-16 296
【代码】css 文字图片居中及网格布局。
css盒子模型知识点
12-06
CSS盒子模型由四个部分组成：内容区域、内边距、边框和外边距。其中，内容区域包含了元素的实际内容，内边距是内容区域和边框之间的空白区域，边框是内边距和外边距之间的线条，外边距是边框和相邻元素之间的空白...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值