CSS盒子模型

最新推荐文章于 2024-07-24 13:52:24 发布
最新推荐文章于 2024-07-24 13:52:24 发布
阅读量741 收藏 4
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43157097/article/details/131564981
版权

CSS盒子模型

一、认识盒子模型

请添加图片描述

1、盒子模型（Box Model）

可以把HTML每一个元素看出一个个的盒子，可以具备这4个属性

请添加图片描述

（1）内容（content）

​ 元素的内容width/height

（2）内边距（padding）

​ 元素和内容之间的间距

（3）边框（border）

​ 元素自己的边框

（4）外边距（margin）

​ 元素和其他元素之间的间距

2、盒子模型的四边

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

请添加图片描述

在浏览器的开发工具中

请添加图片描述

<!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;
      padding: 0%;
      border: solid;

    }
  </style>
</head>
<body>
  <div class="box">我是Box</div>
</body>
</html>

二、内容width/height

1、设置内容

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

  • 宽度设置: 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>
    /* content */
    .box {
      width:200px;
      height:200px;
      background-color:#f00
    }
  </style>
</head>
<body>
  <div class="box"></div>
</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>
    .box {
      background-color: #f00;

      /* width 默认是auto */
      /*浏览器默认是auto*/
      width: auto;

      /* width: 100%; */

    }

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

2、属性

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

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

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

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

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

3、不常用属性

下面两个属性不常用:

  • min-height：最小高度，无论内容多少，高度都大于或等于min-height

  • max-height：最大高度，无论内容多少，高度都小于或等于max-height

三、内边距padding

1、作用

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

2、padding取值

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

  • padding-top：上内边距

  • padding-right：右内边距

  • padding-bottom：下内边距

  • padding-left：左内边距

3、padding缩写

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

  • padding-top、padding-right、padding-bottom、padding-left的简写属性

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

3、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: 40px;
      padding-left: 40px; */

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

      /* 其他值的情况 */
      /* 3个值 */
      padding: 10px 20px 30px;  /*left =  right*/
      /* 2个值 */
      padding: 10px 20px;  /* left = right bootom = top*/
      /* 1个值 */
      padding: 10px;  /*四个方向都一样*/
    }
  </style>
</head>
<body>
  <div class="box">我是box</div>
</body>
</html>

四、边框/圆角border

1、作用

border用于设置盒子的边框:

2、边框得特殊属性

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

  • 边框具备宽度width;

  • 边框具备样式style;

  • 边框具备颜色color;

3、设置边框的方式

  • 边框宽度

    • 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个属性的简写属性
<!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>

4、边框的样式设置值

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

  • groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内

  • ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来

请添加图片描述

5、同时设置的方式

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

    • border-top
    • border-right
    • border-bottom
    • border-left
    • border：统一设置4个方向的边框

  • 边框颜色、宽度、样式的编写顺序任意

请添加图片描述

6、圆角 – border-radius

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

7、border-radius补充

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

五、外边距margin

1、作用

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

2、margin取值

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

  • margin-top：上内边距

  • margin-right：右内边距

  • margin-bottom：下内边距

  • margin-left：左内边距

<!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: 10px 20px;  */  /*这个的话左边div下沉了*/
      margin: 0 20px;
    }
  </style>
</head>
<body>
  <div class="box"></div>

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

3、margin缩写属性

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

  • argin-top、margin-right、margin-bottom、margin-left的简写属性

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

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

4、margin的其他值

[外链图片转存失败,源站可能有请添加图片描述

5、上下margin的传递

  • margin-top传递

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

  • margin-bottom传递

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

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

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

  • 建议

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

盒子模型-margin-bottom传递(了解)

<!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: 300px;
      /* height: 300px;  不会传递，auto情况会传递 */
      height: auto;
      background-color: #f00;
    }

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

      margin-bottom: 100px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="container">
    </div>
  </div>

  <div>哈哈哈哈啊</div>
</body>
</html>

盒子模型-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>
    .box {
      width: 300px;
      height: 300px;
      background-color: #f00;

      /* 增加border则不会传递,下面代码逐渐优化 */
      /* border: 1px solid #000; */
      /* border: 1px solid transparent; */

      /* border: 1px solid rgba(0, 0, 0, 0);  同上面的transparent */
      /* border: 0 solid transparent; 不能设置为0   */

      /* 触发box的BFC */
      overflow: auto;
    }

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

      /* 左右是不会传递的 */
      /* margin-left: 30px; */

      /* 传递给了box，box就相对于div设置了 */
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="container">

    </div>
  </div>
</body>
</html>

6、上下margin的折叠

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

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

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

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

  • 如何防止margin collapse？

    • 只设置其中一个元素的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;
    }
    /* collapse取最大值max(30,50) */
    
  </style>
</head>

<body>

  <div class="box1"></div>
  <div class="box2"></div>

</body>
</html>

7、上下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>
    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;

      /* 块级元素block box width =width + padding + border  + margin */
      /* display: inline-block; */

       /*0表示上下为0，左右为auto*/
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

块级元素水平居中

请添加图片描述

块级元素的水平居中问题margin-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 {
      /*div独占一行，设置了宽度，则margin-left = 0 ，box占了width = 100px, 则将独占一行的剩余分配给margin-right*/
      /*上面问题解决： margin-left和right设置为auto*/
      width: 100px;
      height: 100px;
      background-color: #f00;

      /* 块级元素block box width =width + padding + border  + margin */
      /* display: inline-block; */

      /*margin两个属性：上下是0，左右是auto*/
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </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: red;
      
      border: 50px solid orange;
      padding: 30px;

      /* 外轮廓 */
      outline: 10px solid #0f0;
    }

    /* a color: red lvlha active hover 都设置，所以下面伪类也可以设置 */
    a {
      /* a元素是行内级元素，设置margin效果无效 */
      margin-top: 10px;
      display: inline-block;

      /* 不添加的话，tab选中百度一下会有一个默认的外边框 */
      outline: none;
    }

    /* 伪类 */
    /* a::focus {
      outline: none;
    } */

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

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


  <input type="text">
</body>
</html>

六、盒子和文字阴影

1、盒子阴影 – box-shadow

  • box-shadow属性可以设置一个或者多个阴影
    • 每个阴影用表示
    • 多个阴影之间用逗号,隔开，从前到后叠加
  • 的常见格式如下

    • 请添加图片描述

    • 第1个：offset-x, 水平方向的偏移，正数往右偏移

    • 第2个：offset-y, 垂直方向的偏移，正数往下偏移

    • 第3个：blur-radius, 模糊半径

    • 第4个：spread-radius, 延伸半径

    • ：阴影的颜色，如果没有设置，就跟随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 {
      height: 100px;
      width: 100px;
      background-color: red;
      /* 
      分别是x轴offset，y轴offset，模糊度，向四周增加模糊度 颜色属性 
      insert 表示向内添加阴影
      */
      
      /* box-shadow: 5px 5px 10px 10px orange inset; */

      /*阴影的叠加*/
      box-shadow: 5px 5px 10px 10px orange inset,5px 5px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

2、文字阴影 - text-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;

      /*没有扩展和向内shadow*/
      text-shadow: 5px 5px 5px orange, 10px 10px 5px blue,5px 5px 10px green;
    }
  </style>
</head>
<body>
  <div class="box">Hello ZKYAAA</div>
</body>
</html>

3、行内非替换元素的特殊性

  • 以下属性对行内级非替换元素不起作用
    • width、height、margin-top、margin-bottom
  • 以下属性对行内级非替换元素的效果比较特殊
    • padding-top、padding-bottom、上下方向的border
<!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>
    .content {
      background-color: #f00;
      color: white;

      /* 内容：width/height 不生效 */
      width: 300px;
      height: 300px;

      /* 内边距：padding */
      /* 特殊：上下会被撑起来，但是不占据空间 */
      /* padding: 50px; */

      /* 边框：border */
      /* 特殊：上下会被撑起来，但是不占据空间 */
      /* border: 50px solid orange; */

      /*外边距： margin */
      /* 特殊：上下的margin不生效 */
      margin: 50px;
    }
  </style>
</head>
<body>
  <span class="content">
    我是span内容，哈哈哈
  </span>
  aaaaa
  <!-- padding的上下padding是不占空间的 -->
  <div>
    bbbb
  </div>
</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;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>

七、box-sizing

1、CSS属性 - box-sizing

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

  • content-box

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

  • border-box

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

  • box-sizing: content-box

    • 元素的实际占用宽度 = border + padding + width
    • 元素的实际占用高度 = border + padding + height
    • 请添加图片描述

  • box-sizing: border-box

    • 元素的实际占用宽度 = width
    • 元素的实际占用高度 = height
    • 请添加图片描述

  • IE盒子模型

    • W3C标准盒子模型
      *请添加图片描述

    • IE盒子模型（IE8以下浏览器）

      • 请添加图片描述
    <!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 {
      box-sizing : content-box;
      width: 100px;
      height: 100px;
      background-color: #f00;

      padding: 30px;
      border: 10px solid orange;
    }

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

      padding: 30px;
      border: 10px solid blue;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

    效果展示：

请添加图片描述

2、元素的水平居中方案

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

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

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

  • 块级元素

    • 水平居中：margin: 0 auto

3、案例练习

（1）盒子模型练习-案例01-京东按钮
<!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>
    .btn {
       /* 先全局后局部 */
       display: inline-block;

       width: 70px;
       height: 25px;
       line-height: 25px;

       /* 水平和垂直居中 */
       line-height: 25px;

       /* 内容居中 */
       text-align: center;

       border-radius: 13px;
    }

    /* a的样式 */
    .new {
      background-color: #e1251b;
      color: #fff;
    }

    .vip {
      background-color: #363634;
      color: #e5d790;
    }
  </style>
</head>
<body>
  <!-- 新人福利 -->
  <a class="btn new" href="https://xinren.jd.com/?channel=99#/home" target="_blank">新人福利</a>
  <a class="btn vip" href="https://passport.jd.com/new/login.aspx?ReturnUrl=https%3A%2F%2Fplus.jd.com%2Findex%3Fflow_system%3Dappicon%26flow_entrance%3Dappicon3%26flow_channel%3Dpc" target="_blank">PLUS会员</a>
</body>
</html>

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

请添加图片描述

（2）盒子模型练习-案例02-京东小米手机
<!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>
    body {
      text-align: center;
    }
    
    .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: 20px;
      font-size: 14px;
    }

    .item .new-price {
      color: #ff6700;
    }
    
    .item .old-price {
      color: #999;
      text-decoration: line-through;
    }

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

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;
}

请添加图片描述

这里a已经修改为inline-block

请添加图片描述

（3）水平居中的总结
<!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;
      text-align: center;
    }

    .box span {
      background-color: #0f0;
    }

    .container {
      background-color: #00f;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <span>我是span元素</span>
    <div class="container"></div>
  </div>

</body>
</html>

请添加图片描述

（4）盒子模型练习-案例03

字体过多部分显示省略号

<!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: inline-block;   */
      display: block;  
    }

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

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

    /* 方式1：使得多余字显示省略号 
    此时a的display
      a {
        display: inline-block;    
      }
    */
    .item ,.info a {
      width: 100%;
    }

    .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="#">
        <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>

请添加图片描述

ZK谕
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
css里box是什么文件,CSS Box盒模型的详细解说
weixin_35262602的博客
08-03 938
CSS盒子模型在于你做css之后每个元素都由一个包围该元素的矩形框定义。了解框模型的工作原理是理解CSS并更好地控制布局和演示的关键。话不多说，让我们直接讨论一下CSS盒子模型是什么，一个盒子如何影响它周围的盒子，以及一些常见的浏览器问题。简而言之，CSS中的盒模型描述了为HTML元素生成的框。在下面的这篇文章中，您将学习关于CSS盒子模型的示例和技巧，以便最好地利用CSS开发。什么是CSS Bo...
CSS--盒子模型(box)--使用/教程/实例
IT利刃出鞘的博客
12-19 4573
说明 本文介绍CSS中的盒子模型的用法。 盒子模型介绍 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
CSS基础知识(二）——盒子模型
weixin_54799350的博客
06-21 6840
CSS盒子模型相关属性介绍
【CSS系列】第七章 · CSS盒子模型，看这一篇就够了
麟-小白的博客
05-13 1947
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！！！如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多呀！❤❤❤爱你们！！！目录【往期回顾】1.元素的显示模式1.1CSS长度单位1.px：像素。2.em：相对元素fontsize的倍数。3.rem：相对根字体大小，html标签就是根。4.
CSS盒子模型详解
qq_46056318的博客
11-01 2183
盒子可见框的大小，由内容区、内边距、边框共同决定，所以在计算盒子大小时，需要将三个区域加到一起计算。CSS将页面中的所有元素都设置为了一个矩形的盒子，对页面的布局就是将不同的盒子摆放到不同的位置。子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度。总结：兄弟元素之间的外边距的重叠，对于开发是有利的，不需要进行处理。内边距，也叫填充，是内容区和边框之间的空间，背景颜色会延申。
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
css盒子模型
08-22
CSS盒子模型是网页布局的基础，它是CSS（Cascading Style Sheets）中用于描述网页元素在屏幕上占用空间的方式。深入理解盒子模型对于精确控制网页元素的布局至关重要。在本实战中，我们将探讨盒子模型的各个组成部分...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
21.4 CSS 盒子模型
09-02
CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
css盒子模型详解
热门推荐
weixin_44992737的博客
06-10 2万+
css盒子模型，box model，弹性盒模型，怪异盒模型，浏览器内核
CSS从入门到精通——盒模型
SOLDIER_ON的博客
11-11 1777
盒模型(Box Model)，是CSS中重要的基础之一。浏览器在对文档进行布局时，会根据CSS盒模型将所有元素，表示为一个矩形。换句话说，每个元素都是一个盒子。盒模型描述了元素所占空间的内容。每个盒子有四个边：外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content)。图片表示盒模型，如下：基础实例内容区域包含盒子的内容，显示文本和图像。一般使用width和height指定大小。内边距(Padding) 是指内容周围的区域，内边距默认是透明的。
CSS_弹性盒子模型
qq_55961861的博客
08-09 418
CSS_弹性盒子模型！
盒子模型
m0_61102549的博客
07-18 80
1.页面中的每一个标签，都可以看作一个“盒子”，通过盒子的视角更方便的进行布局2.浏览器在渲染（显示）网页时，会将网页看作一个个的举行区域，也形象称之为盒子盒子模型：CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型布局顺序：从外往内 从下往上。
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
最新发布
贵林之恋的博客
07-24 331
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
css盒子模型知识点
12-06
CSS盒子模型由四个部分组成：内容区域、内边距、边框和外边距。其中，内容区域包含了元素的实际内容，内边距是内容区域和边框之间的空白区域，边框是内边距和外边距之间的线条，外边距是边框和相邻元素之间的空白...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值