前端开发 CSS第三课 layout（布局）文档流盒模型边框内边距外边距盒子的水平布局垂直方向的布局垂直外边距的重叠行内元素的盒模型默认样式

最新推荐文章于 2024-09-27 16:12:29 发布

十旬叶大叔

最新推荐文章于 2024-09-27 16:12:29 发布

阅读量911

点赞数

分类专栏：前端开发文章标签： css html html5

本文链接：https://blog.csdn.net/qq_45059457/article/details/119964630

版权

前端开发专栏收录该内容

7 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS中的文档流、元素的两种状态（在文档流中和脱离文档流）、盒模型以及边框、内边距和外边距的设置。通过实例分析了块元素和行内元素的特点，解释了如何通过margin、padding和width等属性影响元素布局。同时，文章涵盖了垂直布局、外边距重叠、默认样式重置等方面，深入探讨了CSS布局中的关键概念和技巧，对于理解和掌握网页布局具有重要意义。

摘要由CSDN通过智能技术生成

1 文档流

网页是一个多层的结构，一层叠着一层，通过CSS可以分别为每一层来设置样式，作为用户只能看到最顶上的一层。这些层中，最底下的一层称为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列。
元素的两个状态：在文档流中；不在文档流中（脱离文档流）
元素在文档流中有什么特点：
块元素
块元素会在页面中独占一行（自上向下垂直排列）；

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            background-color: blue;
        }
        .box2{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">我是第一个div</div>
    <div class="box2">我是第二个div</div>
</body>
</html>

在这里插入图片描述
分析：第一个div的背景颜色为蓝色，第二个div的背景颜色为红色，上面为蓝色，下面为红色，所以块元素是自上向下排序的。
默认宽度是父元素的全部（会把父元素撑满）；

分析：将浏览器左右扩大缩小，div的背景颜色都是填充满的。
默认高度是被内容撑开。
在这里插入图片描述

分析：将第一个div的字体调大，内容大小随着字体大小改变，最终字体高度和背景颜色高度一致。
行内元素
行内元素不会独占页面的一行，只占自身的大小；

分析：span元素的内容只会占自身的大小。
行内元素在页面从左到右排列，如果一行之中不能容纳所有的行内元素，则元素会换到第二行继续从左到右排列（和书写习惯一致）；
在这里插入图片描述

分析：内容装满浏览器的一行，则会自动换一行。
行内元素的默认宽度和高度都是被内容撑开。

分析：将span的字体调大，span元素的高度和宽度随着内容变化。

2 盒模型（盒子模型、框模型(box model)）

CSS将页面中的所有元素都设置为一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。
每一个盒子都由以下部分组成：
内容区（content），元素中的所有的子元素和文本内容都在内容区中排列，内容区的大小由width和height两个属性来设置。
在这里插入图片描述

分析：内容区就是填写内容的区域，width设置内容区的宽度，height设置内容的高度。
内边距（padding）
边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部。
边框的大小会影响整个盒子的大小。
要设置边框，需要至少设置三个样式：
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
例如：
在这里插入图片描述

分析：边框的颜色为红色，边框的大小为10px，边框的样式是实线。
外边距（margin ）

3 边框

3.1 边框的宽度

border-width的可以不省略写，省略不写自动使用使用3px。
在这里插入图片描述

分析：border-width默认值为3px。
border-width可以用来指定四个方向的边框的宽度。
值的情况：
四个值：上右下左
三个值：上左右下
两个值：上下左右
一个值：上下左右

在这里插入图片描述

分析：上边框宽度为10px，右边框宽度为20px，下边框宽度为30px，下边框宽度为40px。

border-width: 10px 30px 40px;

在这里插入图片描述
分析：上边框宽度为10px，左右边框宽度为30px，下边框宽度为40px。

border-width: 10px 30px;

在这里插入图片描述
分析：上下边框宽度为10px，左右边框宽度为30px。

除了border-width 还有一组border-xx-width，xx可以是top right bottom left，用来单独指定某一个边的宽度。

            border-top-width:10px;
            border-right-width:15px;
            border-bottom-width:20px;
            border-left-width:30px;

在这里插入图片描述
分析：上边框的宽度为10px，右边框宽度为15px，下边框的宽度为20px，左边框的宽度为30px。

3.2 边框的颜色

border-color可以省略不写，省略不写自动使用黑色。
在这里插入图片描述

border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样。

            border-top-color: red;
            border-right-color: blue;
            border-bottom-color: green;
            border-left-color: yellow;

在这里插入图片描述
分析：上边框的颜色为红色，右边框的颜色为蓝色，下边框的颜色为绿色，左边框的颜色为黄色。

3.3 边框的样式

boder-style的默认值是none，表示没有边框。所以不写boder-style则不会显示任何样式。
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双实线

            border-top-style: solid;
            border-right-style: dotted;
            border-bottom-style: dashed;
            border-left-style: double;
        }

在这里插入图片描述
分析：上边框是实线，右边框是点虚线，下边框是虚线，左边框是双实线。

border简写属性，通过border属性可以同时设置边框所有的相关样式，并且没有顺序要求。
在这里插入图片描述

分析：一次性将边框设置为红色，宽度为10px，样式为实线。

一般采取的办法（写全部，剔除一部分）

            border:red 10px solid;
            border-top: none;

在这里插入图片描述
分析：一次性将边框设置为红色，宽度为10px，样式为实线，上边框没有颜色、宽度和样式。

4 内边距

内容区和边框之间的距离是内边距，一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上。
盒子的可见框的大小，有内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。
在这里插入图片描述

分析：内边距为蓝色框大小为10px，盒子的长为内容区200px加上边框20px(10px+10px)，高为内容区200px加上边框20px(10px+10px)加上内边距20px。

此时，要把内容区和内边距分清楚可以将内容当做一个盒子嵌入大盒子中。

在这里插入图片描述

分析：把内容区装进inner盒子里面，设置背景颜色为蓝色。内边距为10px，颜色为绿色。
padding内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样。
值的情况：
四个值：上右下左
三个值：上左右下
两个值：上下左右
一个值：上下左右

padding: 20px 30px 40px 50px;

在这里插入图片描述
分析：上内边距为20px，右内边距为30px，下内边距为40px，左内边距为50px。

 padding: 20px 30px 40px;

在这里插入图片描述

分析：上内边距为20px，左右内边距为30px，下内边距为40px。

padding: 20px 30px;

在这里插入图片描述
分析：上下内边距为20px，左右内边距为30px。

padding: 20px;

在这里插入图片描述
分析：上下左右内边距为20px。

5 外边距（margin）

外边距不会影响盒子可见框的大小，外边距会影响盒子的位置。
一共有四个方向的外边距：
margin-top 上外边距，设置一个正值，元素会向下移动。
在这里插入图片描述
分析：黄色线段表示外边距为100px。

margin-right 默认情况下设置margin-right不会产生任何效果。

margin-bottom 下外边距，设置一个正值，其下的元素会向下移动。
在这里插入图片描述

分析：蓝色线段为下外边距的距离100px。
margin-left 左外边距，设置一个正值，元素会向由移动。

margin-left: 50px;

在这里插入图片描述
margin也可以设置负值，如果是负值则元素会向相反的方向移动。
分析：蓝色线段为左外边距的距离50px。

元素在页面中是按照自左向右排序，所以默认情况下，设置左和上外边距则会移动元素自身。
margin的简写属性，margin可以同时设置四个方向的外边距，用法和padding一样。

6 盒子的水平布局

在这里插入图片描述
元素在其父元素中水平方向的位子由以下几个属性共同决定：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须满足以下的等式：
margin-left+border-left+padding-left +width+padding-right+border-right+margin-right=其父元素内容区的宽度（一定要满足）

width默认值为auto，其他6个值为0px。

情况1：
在没有设置auto值，浏览器自动调margin-right值使等式成立。
在这里插入图片描述

分析：
margin-left、border-left、padding-left、padding-right、border-right均为0，width为400px。等式为：0+0+0+400+0+0+margin-right=600。因为浏览器自动调margin-right值使等式成立，所以margin-right为200px。

情况2：
width、margin-left、margin-right可以设置为auto
当其中某个值为auto，则会自动调整auto值使等式成立
在这里插入图片描述

分析：
margin-left、margin-ringht、padding-left、padding-right、border-left、border-ringht不写默认为0，所以等式：0+0+0+auto+0+0+0=600，即auto=600，子元素的背景颜色铺满父元素的背景。

当width为200px，margin-left100px，margin-rightauto时，
在这里插入图片描述

分析：
margin-left100px，width200px，margin-right为auto，border-left、padding-left、paddong-right、border-right为0，等式为：100+0+0+200+0+0+auto=600，auto=300，margin-ringht为300。

情况2：
如果width和margin-left（margin-right）设置为auto，margin-right（margin-left）值固定，则width会调整到最大，margin-left（margin-right）为0。
在这里插入图片描述

分析：
子元素width为auto，margin-left为auto，margin-right为100px，父元素width为600px，所以margin-left为0，width会调整到最大，子元素width为400px，margin-right为100px。

情况3：
将三个值都设置为auto，则margin为0，宽度最大。
在这里插入图片描述

分析：
子元素width值和父元素值一样，margin值为0。

情况4：
将两个margin设置为auto，宽度固定，则两个margin值相同，利用这个特点使一个元素在其父元素中水平居中。
在这里插入图片描述

分析：
width、 margin-left、 margin-right设置为auto，父元素width为600px，结果为margin-left和margin-right为100px，达到居中的效果。

情况5：
子元素宽度大于父元素，margin-right为负数。
在这里插入图片描述

分析：子元素的width和父元素width相等，700+margin-right=600，所以margin-right=-100。

7 垂直方向的布局

默认情况下父元素的高度被内容撑开。
在这里插入图片描述

分析：
父元素（outer）没有设置高度，子元素（inner）设置高度为200px，因为默认情况下，父元素高度和子元素高度一致。

子元素是在父元素的内容区中排列的，如果子元素的大小超越了父元素，则子元素会从父元素中溢出。
在这里插入图片描述

分析：父元素（outer）高度为200px，宽度为200px，子元素（inner）高度为300px，宽度为100px，子元素高度高于父元素的高度，则子元素溢出。

使用overflow属性来设置父元素如何处理溢出的子元素。（overflow设置在父元素的样式中）
可选值：
visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示。
在这里插入图片描述

分析：
属性值为visible，在父元素外显示溢出内容。

hidden 溢出内容被裁剪不会显示。

overflow: hidden;

在这里插入图片描述
分析：
属性值为hidden，直接裁剪溢出的内容。

scroll 生成两个滚动条，通过滚动条来查看完整的内容。

overflow: scroll;

在这里插入图片描述
分析：
属性值为scroll，有两条滚动条，垂直滚动条可以查看溢出部分的内容，水平滚动条的宽度为父元素的宽度。

auto 根据需要生成滚动条。

overflow: auto;

在这里插入图片描述
分析：子元素宽度小于父元素的宽度，所以不需要水平滚动条，垂直滚动条可查看溢出内容。

8 垂直外边距的重叠

相邻的垂直方向外边距会发生重叠现象。

8.1 兄弟元素的垂直外边距的重叠

兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
在这里插入图片描述

分析：box1的样式margin-bottom:100px会使其下面的元素（box2）往下移动100px，box2的样式margin-top:100px会使box2往下移动100px，但是出现垂直外边框重叠现象，两个值（100px，100px）均为正值，最终box2只会往下移动200px。

特殊情况（很少出现）：
如果相邻的外边距一正一负，则取两者的和。
在这里插入图片描述

分析：
box1的外边距为-100px，box2的外边距为100px，相邻的外边距一正一负，则取两者的和，即0，所以box1和box2紧挨着。

如果相邻的外边距都是负值，则取两者中绝对值较大的。
在这里插入图片描述

分析：
box1的margin-bottom为-50px，box2的margin-top为-10px，|-50|>|-10|，box1的下外边距往上移动50px，即box2往上移动50px。
兄弟元素之间的外边距的重叠，对开发是有利的，所以不需要进行处理。

8.2 父子元素垂直外边距的重叠

父子元素相邻外边距，子元素的会传递给父元素（上外边距）
在这里插入图片描述

分析：只想box2移动到box1的左下角，box1不移动，在box2样式添加 margin-top:100px，box1也会随着box2下移100px。父子外边距的重叠会影响页面的布局，必须进行处理。

明确需求：将box2往下移动50px，就是在box1的左下角，同时box1不能移动。

不用外边距的方法：
在这里插入图片描述

分析：首先，增加box1的内边距为100px，此时box1的高度为300px（200px+100px内边距），

然后裁剪box1的高度，裁剪掉下面一部分，把box1的高度改为100px，

上图满足需求。

用外边距的方法：
在这里插入图片描述

分析：
首先，在box1的样式加入上边框，将box1和box2分开，

在这里插入图片描述

border-top: 5px black solid;

然后再box2的样式加入上外边距，
在这里插入图片描述
此外，将黑边颜色改为红色，黑边的大小算进盒子的大小，所以box1的高度改为195px，

	.box1{
            width: 200px;
            height: 195px;
            background-color: red;
            border-top: 5px red solid;  
			}

在这里插入图片描述
最后，box2突出一点，为5px，将box2的高度改为95px，

.box2{
	height: 95px;
	}

在这里插入图片描述
满足要求。

9 行内元素的盒模型

行内元素不支持设置宽度和高度。
在这里插入图片描述

分析：box1的高度为100px，宽度为100px，行内样式设置不了高度和宽度，所以行内元素没有变化。
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局。

分析：
左右内边距为50px，上下内边距不会影响布局，而是把下面的元素覆盖。

行内元素可以设置border，但是垂直方向border不会影响页面的布局。
在这里插入图片描述

分析：
左右边距为50px，上下内边距不会影响布局，而是把下面的元素覆盖。

行内元素可以设置margin，但是垂直方向margin不会影响页面的布局。

margin: 100px;

在这里插入图片描述
分析：
左右外边距为100px，上下外边距my设置成功。

display 用来设置元素显示的类型（很少用）
可选值：
inline 将元素设置为行内元素
block将元素设置为块元素
在这里插入图片描述

分析：
span元素成为块元素，独占一行。

inline-block 将元素设置为行内块元素，可以设置宽度和高度又不会独占一行。
在这里插入图片描述

分析：
span元素设置为行内块元素，因此，span可以设置高度和宽度，并且span元素不会独占一行。第一个span元素和第二个span中间有缝隙，因为两个span有换行，如果没有换行，如下

<span>我是span</span><span>我是span</span>

在这里插入图片描述
第一个span和第二个span之间my缝隙。

table 将元素设置为一个表格
none 元素不在页面中显示，不占位置。

display:none;

在这里插入图片描述
分析：完全看不到span元素，连span位置也被box1占据。

visibility 用来设置元素的显示状态
可选值：
visible 默认值，元素在页面中正常显示。

hidden 元素在页面中隐藏不显示，但是依然占据页面的位置。

visibility: hidden;

在这里插入图片描述
分析：
visibility属性设置属性值为hidden，span元素将被隐藏，但依旧保留了span位置。

10 默认样式

浏览器都会为元素设置一下默认样式，默认样式的存在会影响页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式。

10.1 单个去除样式

在这里插入图片描述

在这里插入图片描述
body元素有外边框，大小为8px，

p元素有外边框，大小为6px，

ul元素有外边框，大小为4px，有内边框，大小为40px，

        body{
            margin: 0;
        }
        p{
            margin: 0;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;/* 去除项目符号*/
        }

在这里插入图片描述
分析：
将body元素的外边框设置为0，将p元素的外边框设置为0，将ul元素的外边框和内边框设置为0，并且去除项目符号。这个办法针对一个一个的元素，容易漏其他元素样式，针对练习题使用。

10.2 通配选择器去除样式

        *{
            margin: 0;
            padding: 0;
        }

在这里插入图片描述
分析：使用一刀切的方法，将外边框和内边框样式去除，还有一些默认样式依旧存在。

10.3 重置样式表

专门用来针对浏览器的样式重置的
reset.css 直接去除了浏览器的默认样式。
reset.css如下：

/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

点击下载reset.css
在这里插入图片描述

在这里插入图片描述
分析：
注意link的位置，在style元素之上。reset.css适合大型项目。

normalize.css 对默认样式进行统一。
normalize.css如下：

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
    border-style: none;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Misc
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
    display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
    display: none;
  }

 <link rel="stylesheet" href="./css/normalize.css">

在这里插入图片描述
分析：
无序列表前的黑点和p元素的外边距还有，是对默认样式进行统一，没有reset.css彻底，一般采用reset.css。

十旬叶大叔

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端开发 CSS第三课 layout（布局）文档流 盒模型 边框 内边距 外边距 盒子的水平布局 垂直方向的布局 垂直外边距的重叠 行内元素的盒模型 默认样式

1 文档流

2 盒模型（盒子模型、框模型(box model)）

3 边框

3.1 边框的宽度

3.2 边框的颜色

3.3 边框的样式

4 内边距

5 外边距（margin）

6 盒子的水平布局

7 垂直方向的布局

8 垂直外边距的重叠

8.1 兄弟元素的垂直外边距的重叠

8.2 父子元素垂直外边距的重叠

9 行内元素的盒模型

10 默认样式

10.1 单个去除样式

10.2 通配选择器去除样式

10.3 重置样式表

前端开发 CSS第三课 layout（布局）文档流盒模型边框内边距外边距盒子的水平布局垂直方向的布局垂直外边距的重叠行内元素的盒模型默认样式