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;
}
分析：
注意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。
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
