CSS之盒子模型 (五)：认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing

跳转目录🚀

1. 认识盒子模型

1.1 认识盒子

我觉得下面这张图描述的很形象，我们可以把HTML每一个元素看成是一个盒子

1.2 盒子模型 Box Model

• 每个盒子有四个属性，
  1. Content 内容
  2. padding 内边距
  3. border 边框
  4. margin 外边距
     
• 盒子模型的四边
  1. 因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边:
     

1.3 在浏览器的开发工具中

在浏览器的开发工具中，我们选择一个元素，查看Computed后，就可以清晰的看到盒子模型

2. Content 内容区

2.1 宽度和高度 width&height

盒子的内容是通过设置 宽度width和高度height 设置的。（行内级非替换元素是设置的宽高无效）

• width的默认值 auto在不同场景下
  1. 在块级元素中，独占一行(父元素)
  2. 行内级：包裹内容
  3. 行内可替换元素：根据替换元素大小，如img根据图片默认大小决定宽度

2.2 最大/最小 宽度高度 min/max

该属性常在移动端适配时使用，可以设置最大宽度和最小宽度。

• min-width ：宽度大于等于min-width
• max-width：宽度小于等于max-width

高度同理，但不常用。

• min-height
• max-height

 .home {
      background-color: #f00;
      max-width: 750px;
      min-width: 500px;
      height: 1000px;
      margin: 0 auto;
    }复制

3. padding 内边距

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

3.1 padding的四个方向

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

3.2 padding 简写属性

• padding简写属性，遵循顺时针转动：
  1. 4个值：依次是上 右 下 左
  2. 3个值：依次是上 左右 下
  3. 2个值：依次是上下 左右
  4. 1个值：四边同值

.box{
	border: 1px solid red;
    padding: 10px 20px 30px 40px;
    display: inline-block;
}复制

4. border 边框

作用： 用于设盒子的边框，边框相较于于content/padding/margin来说特殊一些

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

4.1 border-width 边框宽度

其中，border-width是以下四个属性的简写属性：

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

4.2 border-style 边框样式

其中，border-style是以下四个属性的简写属性：

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

边框的样式设置值

4.3 border-color 边框颜色

其中，border-color是以下四个属性的简写属性：

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

4.4 border 简写属性

其中，border可以对四边同时设置 宽度 样式 颜色, 并且是以下四个属性的简写属性

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

注意: 边框颜色、宽度、样式的编写顺序任意。在以上各简写属性都适用于顺时针转动规律

.box {
      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;
 
      /* styel */
      /* border-top-style: solid;
      border-right-style: dashed;
      border-bottom-style: ridge;
      border-left-style: groove; */
      border-style: solid ridge groove dotted;
 
      /* color */
      /* border-top-color: red;
      border-right-color: green;
      border-bottom-color: blue;
      border-left-color: orange; */
      border-color: red green blue orange;
 
	  /* 总缩写属性*/
	  /* border:10px solid red*/
    }复制

4.5 border-radius 圆角

作用： 用于设置边框的圆角

其中，border-radius是以下四个属性的简写属性

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

常用的值

1. 数值：通常用来设置小的圆角，比如6px
2. 百分比：通常用来设置一定弧度或者圆形

利用border-radius画圆

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

.circle{
	width:100px;
	height:100px;
	background-color:#f00;
	border:5px solid #0f0;
	border-radius:50%;
}复制

5. margin 外边距

作用： 用于设置盒子的外边距,通常用于元素和元素直接的间距

5.1 margin的四个方向

• margin-top:上外边距
• margin-bottom:下外边距
• margin-left:左外边距
• margin-right:右外边距

5.2 margin的简写属性

其中，margin可以对四边同时设置外边距, 并且是以下四个属性的简写属性

• margin-top
• margin-right
• margin-bottom
• margin-left
  

5.3 上下margin的传递

父子块级元素之间margin的传递：

1. margin-top传递
   • 条件①块级元素的顶部线和父元素的顶部线重叠 ==> 块级元素的margin-top值会传递给父元素
2. margin-bottom传递
   • 条件①：块级元素的底部线和父元素的底部线重叠，条件②：并且父元素的高度是auto ==> 块级元素的margin-bottom值会传递给父元素

案例1：上传递

	.box {
      width: 300px;
      height: 200px;
      background-color: #f00;
      /* 解决传递问题 */
      /* 第一种 */
      /* border: 1px solid blue; */
      /* 第二种 BFC */
      /* overflow: auto; */
      /* 第三种 */
      box-sizing: border-box;
      padding-top: 20px;
 
    }
 
    .content {
      width: 100px;
      height: 100px;
      background-color: #0f0;
      /* margin-top: 20px; */
    }复制

案例2：下传递

.box {
      width: 300px;
      /* height: 100px; */
      background-color: #f00;
      /* 解决传递问题 */
      /* 第一种 */
      /* border: 1px solid blue; */
      /* 第二种 BFC */
      /* overflow: auto; */
      /* 第三种 */
      /* padding-bottom: 20px; */
 
    }
 
    .content {
      width: 100px;
      height: 100px;
      background-color: #0f0;
      margin-bottom: 100px;
    }复制

解决传递问题
1. 设置父元素padding-top\padding-bottom
2. 设置父元素border
3. 父元素触发BFC(block format control)：有很多触发方式，其中可以通过设置overflow:auto;来触发BFC

5.4 上下margin的折叠

• 垂直方向上：相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse(折叠)
• 水平方向上：margin（margin-left、margin-right）永远不会collapse(折叠)

其中，折叠是取较大的值，我们可以只设置一个元素的margin来规避折叠的发生

折叠的场景：

• 两个兄弟块之间的上下margin折叠

.box{
	display:inline-block;
	width:100px;
	height:100px;
	background-color:#ff0;
	margin-bottom:20px;
}
 
.container{
	display:inline-block;
	width:100px;
	height:100px;
	background-color:#0f0;
	margin-top:20px
	}复制

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

.box {
      width: 300px;
      height: 100px;
      box-sizing: border-box;
      background-color: #f00;
      padding-top: 60px;
 
    }
 
    .content {
      width: 100px;
      height: 100px;
      background-color: #0f0;
      margin-top: 10px;
    }复制

总结：

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

5.5 块级元素水平居中

块级元素盒子模型 ：

• margin-left+border-left + padding-left + width + padding-right + border-right+margin-right

利用块级元素是独占一行的特性，当盒子设置了一定大小的width时：

• 默认情况下，将剩余空间全部分给 margin-right，即左对齐
• 设置 margin-left:auto; margin-right:auto;后，会平均分配剩余空间，即设置元素基于父元素水平居中

块级元素水平居中 ==> 设置 margin:0 auto;

body {
      margin: 0;
      padding: 0;
 
      /* inline-level box */
      /* 行内级： 行内非替换元素 span/a 行内替换元素 img input inline-block(没有一个元素默认是行内块元素，注意img这种是行内可替换元素，不是行内块) */
      /* text-align: center; */
    }
 
    .box {
      margin: 0 auto;
      width: 200px;
      height: 100px;
      background-color: #f00;
 
      /* display: inline-block; */
    }复制

疑问： 父子之间的距离不是应该使用padding吗？这里为什么会用margin来调整基于父元素的子元素水平居中呢？

回答： 我们设置了margin:0 auto 后左右外边距是交由浏览器来控制的，是没有办法的办法。使用text-align需要改变元素的显示类型，破坏块级元素原有的特性；之后会学习flex布局，主要还是使用flex布局

6. 外轮廓 outline

outline表示元素的外轮廓，默认显示在border的外面，不占据空间

outline相关属性：
写法与border写法是类似的的，outline可以用于去除tab键选中a元素、input元素的focus轮廓效果。

• outline-width：外轮廓的宽度
• outline-style：外轮廓的样式
• outline-color：外轮廓的颜色
• outline：outline-width outline-style outline-color的简写属性

7. 阴影shadow

7.1 盒子阴影 box-shadow

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

box-shadow格式：

• insert值为可选值，表示外框阴影，默认下内框阴影。
• 把以下四项简称称为length：offset-x offset-y blur-radius spread-radius分别表示x轴偏移量 y轴偏移量 模糊半径 扩展半径，length[2,4]表示x y的偏移量是必填的，后两个可选。
• color 设置阴影颜色，默认黑色，可选。(如果设置了color属性，可没有在box-shadow里指定颜色，则会以color属性的值为准)

效果就不截图了，有点太占空间了，自己测试吧

.box{
	width: 100px;
    height: 100px;
    background-color: #f00;
    box-shadow: 100px 200px 10px 20px;
	/*box-shadow:insert offset-x offset-y blur-radius spread-radius color*/
}复制

这里放一个测试阴影的网址：
https://html-css-js.com/css/generator/box-shadow/

7.2 文本阴影 font-shadow

作用： font-shadow属性可以设置一个或者多个阴影

text-shadow格式：与box-shadow格式相似，没有spread-raidus

8. 行内非替换元素的特殊性

此特性的制定，是为了防止设置这些属性后会破坏原本的排版

1. 以下属性对行内级非替换元素不起作用
   • width
   • height
   • margin-top
   • margin-bottom
2. 以下属性对行内级非替换元素比较特殊
   • padding-top
   • padding-bottom
   • 上下方向的border

.box {
      background-color: #f00;
 
      /* 内容：width/height （压根不生效） */
      width: 1000px;
      height: 1000px;
 
      /* 特殊： 上下生效 但是不占据空间 */
      /* 内边距  padding*/
      padding: 50px;
 
      /* 边框 border */
      border: 20px solid orange;
 
      /* 特殊： 上下不生效 */
      /* 外边距 margin */
      margin: 10px;
 
    }复制

9. 盒子尺寸 box-sizing

在前面的盒子模型中也有一张图，其实就是其中一种盒子模型content-box。box-sizing属性是用于设置盒子模型中宽高的行为

9.1 content-box

含义: 宽width 高height设置为content内容，而内边距padding和边框border为内容content之外的

9.2 border-box

含义: 宽width 高height设置为content内容、内边距padding和边框border的总和

其实content-box为标准盒子模型，border-box为IE盒子模型(已淘汰)，如果我们想要更换盒子模型就需要设置box-sizing的属性

10. 案例练习

案例练习1

 <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 {
      display: inline-block;
      color: black;
      font-size: 10px;
      text-decoration: none;
 
    }
 
    .button {
      width: 70px;
      height: 25px;
      line-height: 25px;
      border-radius: 13px;
      text-align: center;
    }
 
    .new {
      background-color: red;
      color: white;
    }
 
    .vip {
      background-color: black;
      color: rgb(246, 189, 103);
    }
  </style>
</head>
 
<body>
  <a href="www.baidu.com" class="button new">新人福利</a>
  <a href="www.baidu.com" class="button vip">PLUS会员</a>
</body>复制

案例练习2

知识点

• 文本单行超出显示省略号
• 之前有说过a元素里不能写div，但是块级/行内块级元素是可以存放在任何的元素的，规矩不是死的，而且在学习了之后的知识后会有更多不一样的解决办法，如路由跳转，打开新链接window.open等
  

body {
  background-color: #f4f4f4;
}
 
.item {
  display: inline-block;
  text-decoration: none;
  width: 234px;
  height: 300px;
  text-align: center;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px 0;
}
 
.item:hover {
  box-shadow: 0px 10px 50px 5px #dedede;
}
 
.item img {
  width: 160px;
  height: 160px;
}
 
.item .title {
  font-weight: normal;
  margin: 10px 10px 2px;
  font-size: 14px;
  color: #333;
}
 
/* 单行显示省略号 */
.item .subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  margin: 0 10px 10px;
  color: #b0b0b0;
}
 
.item .price {
  color: #ff6700;
  font-size: 16px;
  margin: 0 10px 14px;
}
 
.item .price>.discount {
  color: #b0b0b0;
  text-decoration: line-through;
  margin-left: 10px;
}复制

<body>
  <a href="https://www.mi.com/shop/buy/detail?product_id=18075" class="item" target="_blank">
    <img src="./img/a6cec580260ceb20ae6a885c2c65c611.jpeg" alt="">
    <h3 class="title">Redmi K60</h3>
    <p class="subtitle">骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
    <p class="price">2499元起<span class="discount">2699元</span></p>
  </a>
</body>复制

案例练习3

遇到的问题

• 如果需要将段落标题单行显示，多余隐藏显示省略号的效果。需要注意段落标签是否被a元素包裹，如果a元素作为段落标签的父元素而没有设置一定的宽度，则会导致上图的情况
• 解决办法：就是需要给a元素设置宽度，因为在设置no-wrap不允许换行后，段落元素的宽度是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>
    a {
      display: inline-block;
      text-decoration: none;
    }
 
    .item {
      width: 264px;
      height: 240px;
 
    }
 
    .item .album img {
      border-radius: 6px;
      height: 148px;
    }
 
    .item .info {
      width: 100%;
    }
 
    /* 段落单行显示问题 */
    .item .info a {
      width: 100%;
 
    }
 
    .item .info p {
      /* height: 40px; */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 8px 0px 0px 0px;
      color: #333;
      font-size: 15px;
    }
 
 
    .item .info .anchor {
      font-size: 13px;
      color: #9499a0;
    }
 
    .item .info .anchor:hover {
      color: rgb(76, 147, 190);
    }
 
    .item .info .anchor:hover::before {
      content: url(./img/widget-up.svg);
      display: inline-block;
      width: 15px;
      height: 15px;
      position: relative;
      top: 1px;
    }
 
    .item .info .anchor::before {
      content: url(./img/widget-up.svg);
      display: inline-block;
      width: 15px;
      height: 15px;
      position: relative;
      top: 1px;
    }
  </style>
</head>
 
<body>
  <div class="item">
    <a class="album" href="#">
      <img src="./img/03.webp" referrerpolicy="no-referrer" alt="">
    </a>
    <div class="info" href="#">
      <a href="#">
        <p>【星穹铁道】做好这3件小事，让你不花1分钱就能直接变强！</p>
      </a>
 
      <a class="anchor" href="#">
        <span class="nicknam">馒头真君</span>
        <span class="date">· 昨天</span>
      </a>
 
    </div>
  </div>
</body>
 
</html>复制

如何实现 多行显示省略号

	.item .info a {
      width: 100%;
 
    }
 
    .item .info p {
      /* height: 40px; */
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 8px 0px 0px 0px;
      color: #333;
      font-size: 15px;
	  /* 多行显示省略号 效果实现*/
	  /* 在webkit渲染内核浏览器的一种特殊布局方案，经常用于多行保留*/
	  display: -webkit-box;
	  /*保留2行*/
      -webkit-line-clamp: 2;
      /*盒子方向*/
      -webkit-box-orient: vertical;
    }复制