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

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

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

常用的值

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

利用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的传递：

margin-top传递
- 条件①块级元素的顶部线和父元素的顶部线重叠 ==> 块级元素的margin-top值会传递给父元素
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. 行内非替换元素的特殊性

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

以下属性对行内级非替换元素不起作用
- width
- height
- margin-top
- margin-bottom
以下属性对行内级非替换元素比较特殊
- 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;
    }

在这里插入图片描述

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

跳转目录🚀

1. 认识盒子模型

1.1 认识盒子

1.2 盒子模型 Box Model

1.3 在浏览器的开发工具中

2. Content 内容区

2.1 宽度和高度 width&height

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

3. padding 内边距

3.1 padding的四个方向

3.2 padding 简写属性

4. border 边框

4.1 border-width 边框宽度

4.2 border-style 边框样式

4.3 border-color 边框颜色

4.4 border 简写属性

4.5 border-radius 圆角

5. margin 外边距

5.1 margin的四个方向

5.2 margin的简写属性

5.3 上下margin的传递

5.4 上下margin的折叠

5.5 块级元素水平居中

6. 外轮廓 outline

7. 阴影shadow

7.1 盒子阴影 box-shadow

7.2 文本阴影 font-shadow

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

9. 盒子尺寸 box-sizing

9.1 content-box

9.2 border-box

10. 案例练习

案例练习1

案例练习2

案例练习3

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