前端学习第五天——css

最新推荐文章于 2023-03-10 19:29:20 发布

lune_one

最新推荐文章于 2023-03-10 19:29:20 发布

阅读量302

点赞数

分类专栏：笔记文章标签： css 前端学习

本文链接：https://blog.csdn.net/weixin_44954230/article/details/124532373

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.CSS的三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

1.1层叠性

给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行那个样式。
样式不冲突，不会层叠。

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
   <!--文档的标题-->
  <style>
    div{
        color:red;
        font-size: 12px;
    }
    div{
      color: aqua;
    }
  </style>

 
</head>

<body>
  <!--文档的主体-->
  
  <div>长江后浪推前浪，前浪死在沙滩上</div>
  
</body>

</html>

实现效果：

1.2继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本的颜色和字号。简单的理解就是：子承父业。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
   <!--文档的标题-->
  <style>
    div{
        color:red;
        font-size: 14px;
    }
    
  </style>

 
</head>

<body>
  <!--文档的主体-->
  
  <div>
    <p>龙生龙，凤生风，老鼠生的孩子会打洞</p>
  </div>
  
</body>

</html>

实现效果：

行高的继承性

body{

font:12px/1.5 'Microsoft YaHei';

}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小 * 1.5
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
   <!--文档的标题-->
  <style>
    body{
      color: aqua;
      /* font:12px/24px 'Microsoft YaHei'; */
      font:12px/1.5 'Microsoft YaHei';
    }
    div{
      /* 子元素继承了父元素body的行高1.5 */
      /* 这个1.5就是当前元素文字大小font-size的1.5倍 所有当前div的行高就是21px */
      font-size: 14px;
    }
    p{
    /* 1.5 * 1.6 = 24 px当前行高 */
      font-size: 16px;
    }
    /* li没有手动指定文字大小 则会继承父亲的 文字大小 body 12px 所有 li 的文字大小为 12px */
    /* 当前li的行高就是 12 * 1.5 = 18px */
  </style>

 
</head>

<body>
  <!--文档的主体-->
  
  <div>龙生龙，凤生风，老鼠生的孩子会打洞</div>
  <p>龙生龙，凤生风，老鼠生的孩子会打洞</p>
  <ul>
    <li>我没有指定文字大小</li>
  </ul>
  
</body>

</html>

实现效果：

1.3优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器权重如下：

选择器	选择器权重
继承或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=""	1，0，0，0
!important 重要的	∞无穷大

优先级注意点：

权重是有4组数字组成，但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，!important无穷大。
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
   <!--文档的标题-->
  <style>
    .test {
            color: red;
        }
        div {
            color: pink!important;
        }
        #demo {
            color: green;
        }
  </style>

 
</head>

<body>
  <!--文档的主体-->
  
  <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
  
</body>

</html>

实现效果：

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

div ul li ---------> 0，0，0，3
.nav ul li ---------> 0，0，1，2
a:hover ---------> 0，0，1，1
.nav a ---------> 0，0，1，1

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
   <!--文档的标题-->
  <style>
    /* 复合选择器会有权重叠加的问题 */
    /* 权重虽然会叠加，但是永远不会有进位 */
    /* ul li 权重是 0，0，0，1+0，0，0，1=0，0，0，2 */
    ul li{
      color:green;
    }
    /* li的权重是0，0，0，1 */
    li{
      color: red;
    }
    /* .nav li 权重为 0，0，1，0 + 0，0，0，1=0，0，1，1 */
    .nav li{
      color: pink;
    }
  </style>

 
</head>

<body>
  <!--文档的主体-->
  
  <ul class="nav">
    <li>大猪蹄子</li>
    <li>大肘子</li>
    <li>猪尾巴</li>
  </ul>
  
</body>

</html>

实现效果：

2.盒子模型

页面布局要学习三大核心，盒子模型，浮动和定位，学习好盒子模型能非常好的帮助我们布局页面。

2.1看透网页布局的本质

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子Box。
利用CSS设置好盒子样式，然后摆放到相应位置。
往盒子里面装内容。

网页布局的核心本质：就是利用CSS摆盒子。

2.2盒子模型（Box Model）组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

2.3边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式边框颜色；

语法：

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
   <!--文档的标题-->
  <style>
    div{
      width: 300px;
      height: 200px;
      /* border-width 边框的粗细 一般情况下用px */
      border-width: 5px;
      /* border-style 边框的样式 solid 实线边框*/
      /* border-style: solid; */
       /* border-style 边框的样式 dashed 虚线边框*/
       /* border-style: dashed; */
        /* border-style 边框的样式 dotted 点线边框*/
      border-style: dotted;
      /* border-color 边框的颜色 */
      border-color:aqua;
    }
  </style>

</head>

<body>
  <!--文档的主体-->
  
  <div></div>
  
</body>

</html>

实现效果：

CSS边框属性允许你指定一个元素边框的样式和颜色。

边框简写：

border:1px solid red; 没有顺序

边框分开写法：

border-top:1px solid red; /* 只设定上边框，其余同理 */

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
   <!--文档的标题-->
  <style>
    div{
      width: 200px;
      height: 200px;
      /* 边框的复合写法 简写： */
      /* boder包含了四条边 */
      border: 5px solid blue;
      /* 层叠性 只是层叠了 上边框 */
      border-top: 5px solid red;
    }
  </style>

</head>

<body>
  <!--文档的主体-->
  
  <div></div>
  
</body>

</html>

实现效果：

2.4表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse:collapse;

collapse单词是合并的意思。
border-collapse:collapse;表示相邻边框合并在一起。

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
  <!--文档的标题-->
  <style>
    table{
      width: 500px;
      height: 249px;
    }
    th{
      height: 35px;
    }
    table,
    td,th{
         border:1px solid royalblue;
         border-collapse: collapse;
         font-size: 14px;
         text-align: center;
    }
  </style>
</head>

<body>
  <!--文档的主体-->
  <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" hight="150">
    <tr>
      <th>排名</th>
      <th>关键词</th>
      <th>照片</th>
      <th>今日搜索</th>
      <th>最近7日</th>
      <th>相关链接</th>
    </tr>
    <tr>
      <td>1</td>
      <td>晴天</td>
      <td><img src=img1.jpg wight="30" height="30"></td>
      <td>169</td>
      <td>450</td>
      <td><a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin" target="_blank">周杰伦</a>
      </td>
    </tr>

    <tr>
      <td>2</td>
      <td>七里香</td>
      <td><img src=img1.jpg wight="30" height="30"></td>
      <td>120</td>
      <td>360</td>
      <td><a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin" target="_blank">周杰伦</a>
      </td>
    </tr>

    <tr>
      <td>3</td>
      <td>生化危机</td>
      <td><img src=img2.jpg wight="30" height="30"></td>
      <td>65</td>
      <td>245</td>
      <td><a href="https://baike.baidu.com/item/%E7%94%9F%E5%8C%96%E5%8D%B1%E6%9C%BA/5043882?fr=aladdin"
          target="_blank">生化危机</a></td>
    </tr>

    <tr>
      <td>4</td>
      <td>小狗</td>
      <td><img src=img.jpg wight="30" height="30"></td>
      <td>50</td>
      <td>145</td>
      <td><a href="https://baike.baidu.com/item/%E7%8B%97/85474?fr=aladdin" target="_blank">小狗</a></td>
    </tr>
  </table>
</body>

</html>

实现效果：

2.5边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此我们有两种方案解决：

测量盒子大小的时候，不量边框。
如果测量的时候包含了边框，则需要width/height 减去边框宽度。

2.6内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
  <!--文档的标题-->
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      padding-left: 20px;
      padding-top: 30px;
      padding-right: 20px;
    }
  </style>
</head>

<body>
  <!--文档的主体-->
  <div>
    盒子的内容是contnt
    盒子的内容是contnt
    盒子的内容是contnt
    盒子的内容是contnt
  </div>
</body>

</html>

实现效果：

padding属性（简写属性）可以有一到四个值。

值的个数	表达意思
padding:5px;	1个值，代表上下左右都有5像素内边距
padding:5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding:5px 10px 20px;	3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding:5px 10px 20px 30px;	4个值，上是5像素，右10像素，下20像素，左30像素顺时针

当我们给盒子指定padding值之后，发生了2件事：

内容和边框有了距离，添加了内边框。
padding影响了盒子实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

例子（新浪导航栏）：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
  <!--文档的标题-->
  <style>
    div{
      height: 41px;
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;
      background-color: #fff;
      line-height: 41px;
    }
    .nav a{
      /* a属于行内元素 此时必须要转换 行内块元素 */
      display: inline-block;
      height:41px;
      padding: 0 20px;
      font-size: 12px;
      color: #4c4c4c;
      text-decoration: none;

    }
    .nav a:hover{
      background-color:#eee;
      color: #ff8500;
    }
  </style>
</head>

<body>
  <!--文档的主体-->
  <div class="nav"> 
    <a href="#">新浪导航</a>
    <a href="#">手机新浪网</a>
    <a href="#">移动客服端</a>
    <a href="#">微博</a>
    <a href="#">新浪网</a>
  </div>
</body>

</html>

实现效果：

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

2.7外边距（margin）

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式代表的意义跟padding完全一致。

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->
 
<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    /* .one{
      margin-bottom: 20px;
    } */
   .two{
     margin-top: 20px;
   }
  </style>
 
  <!--文档的标题-->
</head>
 
<body>
  <!--文档的主体-->
  <div class="one">1</div>
  <div class="two">2</div>
</body>
 
</html>

实现效果：

2.7.1外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件。

盒子必须指定了宽度（width）
盒子的左右外边距都设置为auto

.header{ width:960px;margin:0 auto;}

常见的写法，以下三种都可以：

margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可。

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->
 
<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
   <!--文档的标题-->
  <style>
    .header{
      width: 900px;
      height: 200px;
      background-color: aqua;
      margin:100px auto;
      text-align: center;
    }
  </style>
 
 
</head>
 
<body>
  <!--文档的主体-->
  <div class="header">内容</div>
  
</body>
 
</html>

实现效果：

2.8外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：

尽量只给一个盒子添加margin值。

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、据对定位的盒子不会有塌陷的问题。

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
  <!--文档的标题-->
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
      margin-top: 50px;
      /* border: 1px solid transparent; */
      /* padding: 1px; */
      overflow: hidden;
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin-top: 100px;
      
    }
  </style>


</head>

<body>
  <!--文档的主体-->
  <div class="father">
    <div class="son"></div>
  </div>


</html>
</body>

</html>

实现效果：

2.9清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
  <!--文档的标题-->
  <style>
    /* 这句话也是css的第一行代码 */
    *{
      padding: 0;/*清除内边距*/
      margin: 0;/*清除外边距*/
    }
    span{
      background-color: pink;
      margin: 20px;
    }
  </style>


</head>

<body>
  <!--文档的主体-->
  123
  <ul>
    <li>abcd</li>
  </ul>
   <span>行内元素尽量只设置内外边距</span>
     
   </body>
   </html>

</html>
</body>

</html>

实现效果：

综合案例1：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
  <!--文档的标题-->
  <style>
   *{
       padding: 0;
       margin: 0;
   }
   body{
     background-color: #f5f5f5;
   }
   a{
     color: #333;
     text-decoration: none;
   }
   .box{
        width: 298px;
        height: 415px;
        background-color: #fff;
        /* 让块级的盒子水平居中对齐 */
        margin:100px auto;
   }
   .box img{
     /* 图片的宽度和父亲盒子一样宽 */
     width: 100%;

   }
   .review{
     height: 70px;
     font-size: 14px;
     /* 因为这个段落没有 width属性 所以padding不会撑开盒子的宽度 */
     padding: 0 28px;
     margin-top: 30px;
   }
   .appraise{
     font-size: 12px;
     color: #b0b0b0;
     padding: 0 28px;
     margin-top: 20px;
   }
   .info{
     font-size: 14px;
     padding: 0 28px;
     margin-top: 15px;
   }
   .info h4{
        display: inline-block;
        font-weight: 400;
   }
   .info span{
     color: #ff6700;
   }
   .info em{
     font-style: normal;
    color: #ebe4e0;
    margin:0 6px 0 15px;
   
   }
  </style>


</head>

<body>
  <!--文档的主体-->
  <div class="box">
    <img src="iamge.png">
    <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
    <div class="appraise">来自于 117384232的评价</div>
    <div class="info">
      <h4><a href="#">Redimi AirDots真无线蓝...</a></h4>
      <em>|</em>
      <span>99.9元</span>
    </div>
  <div></div>
  </div>
  
   </body>
   </html>

</html>
</body>

</html>

实现效果：

综合案例2:

新知识点：去掉li前面的项目符号（小圆点）

语法：

list-style:none;

例子：

<!DOCTYPE html>
<!--文档类型声明,作用就是告诉浏览器使用那种HTML版本来显示网页-->
<!--这句话的意思是:当前页面采取的是HTML5版本来显示网页-->
<html lang="en">
<!--lang语言种类 en(英语) zh-CN(中文)-->

<head>
  <!--文档的头部-->
  <meta charset="UTF-8">
  <!--字符集-->
  <!--定义网页编码格式为 utf-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--X-UA-Compatible是IE8及以上新加的设置,在meta通过X-UA-Compatible可以设置指定网页的兼容性模式设置-->
  <!--IE=edge告诉IE浏览器使用最新的引擎渲染网页-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度.(自调节)-->
  <title>Document</title>
  <!--文档的标题-->
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      /* 去掉li里面的小圆点 */
      list-style: none;
    }

    .box {
      width: 248px;
      height: 163px;
      border: 1px solid #ccc;
      margin: 100px auto;
    }

    .box h3 {
      height: 32px;
      border-bottom: 1px dotted #ccc;
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      padding-left: 15px;
    }

    .box ul li a {
      font-size: 12px;
      color: #666666;
      text-decoration: none;
    }
    .box ul li a:hover{
      text-decoration: underline;
    }

    .box ul li {
      height: 23px;
      line-height: 23px;
      padding-left: 20px;
    }

    .box ul {
      margin-top: 7px;
    }
  </style>


</head>

<body>
  <!--文档的主体-->
  <div class="box">
    <h3>品优购快报</h3>
    <ul>
      <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
      <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
      <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
      <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
      <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
    </ul>
  </div>

</body>

</html>

</html>
</body>

</html>

实现效果：