1、color：元素内部的文字颜色
预设值：red；
rgb表示法：rgb（）；
hex表示法（16进制）：#ff4400；
2、background-color：背景颜色，可以填写的属性与上面一样。
3、font-size：元素内部文字尺寸的大小。有以下单位：
1）px：像素，绝对单位(1920*1080含义是水平方向有1920个像素点，垂直方向有1080个像素点)，可以简单地理解为文字高度占用了多少个像素。
2）em：相对单位，相对于父元素大小的n倍（如果父元素没有设置大小，就会一直向上继承，如果都没有设置大小，就使用基准字号）；em会被换算为真实的大小。
4、font-weight：文字的粗细程度。可以使用数字，也可以使用预设值：normal（400）；bold（700）；
5、font-family：文字类型（例如可以使用微软雅黑等）；使用的前提是用户计算机中已经存在的字体，如果用户没有这个字体属性就被忽略（sans-serif：非衬线字体，当所有字体都失效的时候使用这个类型的字体，据说好看，我没发现）。
6、font-style：可以设置字体为斜体，将属性值设置为italic（i元素的默认属性是将字体设置为斜体，但是由于与icon这个单词很匹配，在实际开发中让其代表图标）。
7、text-decoration：文本修饰，给文本加一个线。属性值可以设置为underline:下划线；line-through：中间加一条线；overline：上面加一条线。a标签上一般设置为none，用于去掉下划线。
8、text-indent：首行缩进（一般使用的值为2em）。
9、line-height：每行文本的高度，该值越大，每行文本的距离越大。设置行高为容器的高度，可以让单行文本垂直居中。多行文字一般不用绝对单位，行高可以设置为纯数字，表示相对于元素字体的大小（例如1.5，就是行高是字体大小的1.5倍）。
10、height：容器的高度。
11、width：设置元素的宽度。
12、letter-spacing：设置文字间隙的大小。
13、text-align：元素内部文字的水平排列方式。属性值为left、center、right。
14、list-style：li标签上的圆点，设置为display：none即可去掉圆点
15、curse:pointer ：鼠标放上去会有小手的样子
16、box-sizing：规定我们书写的尺寸作用在什么元素上。默认值是conntent-box，意味着该数值是内容盒的大小；border-box，意味着该数值是边框盒大小，以后书写的padding和border数值会向内扩展
17、calc（）：calculator（计算器的简称），用来计算css中数字的大小。格式：calc(100% - 10px);，为了与连接符区分开，计算符号左右要有一个空格
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
1.比较重要性
重要性从高到低（作者样式表：开发者书写的样式）：
1）作者样式表中的！important（尽量不要书写这个属性，权重太高了）
2）作者样式表中的普通样式
3）浏览器中默认的样式
2.比较特殊性
总体规则：选择器选中的范围越窄，越特殊（其实就是计算属性，权重最高的被应用）。
3.比较源次序：同样权重的属性，后面的属性值覆盖前面的属性值
继承
对于某些没有设置过的属性，子元素会继承父元素的某些属性，例如字体的颜色等等。例如给父级设置颜色和字体的大小等等，子元素就会得到这些属性。
通常跟文字内容相关的属性都能继承(背景颜色不能继承，宽高也不能被继承）。复合属性可以使用一个单词，设置多个属性。详细值可以再MDN中进行查询。
属性值的计算过程
渲染每个元素的前提条件：该元素的所有css属性必须有值。
一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做属性值计算过程。
元素获得css属性的四个步骤
1.确定声明值：参考样式表中没有冲突的声明，作为css属性值。
2.层叠冲突：对样式表中有冲突的声明使用层叠规则（例如进行属性计算等），确定css属性值。
3.使用继承：对仍然没有确定值的属性（若前面两部已经确定的值，就不再继承了），若该值是可以被继承的值，就继承父元素的值。
4.使用默认值：对仍然没有值得属性，使用默认值。
例子：a标签没有继承父元素的颜色，这是因为在第二步的时候系统会预先为a标签设置颜色，因此在第三步的时候就不会进行颜色继承。为了让a标签继承父级的颜色，可以使用强制继承属性（color：inherit）。
inherit：使用继承值
initial：使用默认值
盒模型
box：盒子，每个元素在页面中都会生成一盒矩形区域（盒子）。
盒子类型：
1.行盒（行级元素）：display等于inline的元素（属性值为display：inline）。行盒在页面中不换行是因为其具有inline属性。因为浏览器没有为其预设block属性，因此使用默认属性display：inline。这个默认属性是可以更改的，若将其改为display：block，该元素就具有了块盒的属性，可以独占一行。
2.块盒（块级元素）：display等于block的元素（display：block）。块盒独占一行是因为浏览器将其预设为display：block，在具有了block属性之后就可以独占一行。这个属性同样是可以更改的，若将其设置为display：inline，该元素就将变为行盒，不再独占一行。
两个元素中，若其中有一个是块盒也不能排列在同一行。
浏览器默认的块盒：容器元素（div、section等）、h1~h6、p
浏览器默认的行盒：span、a、img、video、audio
块盒的组成部分：
无论是行盒还是块盒，都由一下几个部分组成，由内到外依次是：
1.内容 content
内容部分叫做盒子的内容盒
width height，设置盒子内容的宽高
2.填充(内边距) padding
盒子边框到盒子内容的距离
padding-left padding-right padding-top padding-bottom
简写属性：padding（上、右、下、左）
填充区+内容区 = 填充盒（padding-box）
3.边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color
边框+填充区 + 内容区 = 边框盒
4外边距 margin
盒子边框到其他盒子或者到浏览器边缘的距离
（常规流块盒居中一般使用margin：0 auto；）
盒模型的应用
1.改变宽高范围
默认情况下，我们书写的width和height设置的是内容盒的宽高
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height的值是内容盒。为了符合设计稿，一般设置width和height的时候使用两种方式
1）精确计算，通过计算得到具体的内容盒尺寸
2）使用css3:box-sizing，自动计算出内容盒的尺寸
2.改变背景覆盖范围
默认情况下，背景覆盖边框盒例如颜色或者图片等。
可以通过background-clip进行更改，使得背景图片覆盖到内容盒、填充盒。
3.溢出处理
如果不为元素设置宽高，元素中填充的内容会默认撑开元素，当我们为元素设置了宽高之后，如果元素内部无法容纳下这些内容，就会溢出。可以使用oerflow属性进行设置。
overflow：hidden；溢出部分隐藏
overflow：scroll； 生成滚动条。这是一个复合属性，可以通过overflow-x和overflow-y，分别设置水平方向或竖直方向的滚动条。
overflow：auto； 内容少，不需要滚动条的时候就不生成滚动条，需要的时候就生成滚动条。
4.断词规则
word-break，会影响文字在什么位置被截断。默认值为normal，一般不用自己设置。
word-break：normal：普通（CJK字符：文字位置阶段；非CJK字符：单词位置截断）
word-break：break-all：截断所有，所有字符都在文字处截断（对于英文没有影响，但是对于中文来说，没有空格就被系统认为都是一个单词，不会被换行）。
空白处理
white-space：nowrap；内容较多时，溢出部分不换行
overflow-hidden；溢出部分隐藏
text-overflow：ellipsis；文字溢出部分使用圆点表示
行盒盒模型
常见的行盒：span、em、strong、img
1.显著特点：盒子沿着内容延伸，由内容的大小决定盒子的高度和宽度。
2.行盒不能设置宽高（可替换元素除外，如img等），它们的高度和长度是根据内容的大小来调整的。调整行盒的宽高只能通过对字体大小、行高、字体类型进行调整。
3.内边距（填充区）
水平方向有效，垂直方向只能调整背景，不会实际占据空间
4.边框
水平方向有效，垂直方向只能调整背景，不会占据实际空间
5.margin
水平方向有效，垂直方向不会占据实际空间
行块盒
设置属性为display：inline-block；
1.不独占一行，可以与行盒排在同一排
2.盒模型中所有尺寸都有效
可替换元素和非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为“非可替换元素”。例如：div、p、span等，写什么显示什么。
少部分元素，页面上显示的结果，取决于元素属性，称为“可替换元素”。例如：img、video、audio等，引用其他值进行进行显示。
绝大部分可替换元素均为行盒，不会独占一行。在行盒中，可替换元素是一个特例，可以设置宽高。
例如
在img中，有object-fit属性（默认值为fill）
object-fit：contain；保持图片的比例，同时不能将某些部分隐藏；因此可能会导致某些区域显示空白。
object-fit：cover；保持图片比例，必须将图片填充满区域；因此可能会导致图片的某些部分被隐藏。
object-fit：fill;不需要保持图片比例，全部填充满。
常规流
盒模型的作用：规定单个盒子的规则
视觉格式化模型（布局规则）的作用：规定页面中的多个盒子排列规则
1.视觉格式化模型，大体上将页面中盒子的排列规则分为三种模式：
1.常规流
2.浮动流
3.定位
2.常规流布局（有时也被称为常规流、文档流、普通文档流、常规流文档）
所有元素，默认情况下都属于常规流布局
总体布局：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有包含块，包含块决定了盒子的排列区域。绝大部分情况下，盒子的包含块，为其父元素的内容盒。由于子元素只能在父元素的内容区域进行移动，当父元素进行移动时，相当于包含块在进行移动，因此子元素也会跟着移动（浏览器body元素默认有8个像素的margin）。
块盒
1.每个块盒的总宽度，必须刚好等于包含块的宽度（content + padding + border + margin等于父元素的content宽度）
内容盒宽度的默认值是auto（width：auto；auto的作用是将剩余的空间吸收掉，使得content+padding+border+margin的值为父元素的宽度）。
margin的默认取值为0，也可以为auto（设置值为auto的作用也是将剩余的空间吸收掉）
1）当设置width：auto；margin：auto；时，
由于width吸收能力强于margin，空间全部被width吸收，此时width值等于父元素的content，margin的真实值为0px。
2）当设置width：xxx（定宽）；，margin不进行设置时，
父元素剩余的空间（包含块）将被margin-right吸收（浏览器从右向左进行排列）。
3）当设置width：xxx（定宽）；margin：0 auto；时，元素将居中排列。
在常规流中，块盒在包含块中居中，可以定宽，然后左右margin设为auto，此时margin-left和margin-right平分左右的空间，元素居中。
2.每个块盒垂直方向上的auto值
1）height：auto；适应内容的高度。只要没有设置高度，那么高度就会被自动撑开（元素内容撑开子元素的高度，子元素的高度撑开父元素的高度）。常规流盒子只能被常规流元素撑开，如果子元素为浮动流元素，那么常规流父元素不会被撑开。
<style>
.parent {
width: 200px;
/* height: 200px; */
background: #008c8c;
margin: auto;
}
.children {
width: 100px;
height: 100px;
background: #ff4400;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
</div>
</div>
</body>
2）margin：auto；表示值为0。
3）百分比取值
①padding、宽、margin可以取值为百分比，以上所有的百分比取值（全部的四个方向上）都是相对于包含块的宽度，与高度没有任何关系！
<style>
.parent {
width: 200px;
height: 100px;
background: #008c8c;
margin: auto;
}
.children {
width: 50%; //宽度为100
margin-top: 50%; //上外边距为100px
margin-left: 50%; //做外边距为100px
padding: 50%; //内边距均为100px
height: 100px;
background: #ff4400;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
</div>
</div>
</body>即：设置margin-left：50%；所得值为宽度的50%。即使设置margin-top：50%；该值依然为包含块（父元素内容盒）宽度的50%。
②高
1.包含块的高度是否取决于子元素的高度（这种情况就是父元素的高度没有设置，依赖于子元素撑开；而子元素也没有高度，其高度为父元素的XX%，这种逻辑有冲突，永远没有固定的高度），这种情况百分比无效，视为auto。
2.包含块的高度不取决于子元素的高度，自己设有高度，这时百分比是相对于父元素的高度。
<style>
.parent {
width: 200px;
height: 100px;
background: #008c8c;
margin: auto;
}
.children {
width: 50%; //值为100px
height: 50%; //值为50px
background: #ff4400;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
</div>
</div>
</body>
4）上下外边距的合并（margin塌陷）
两个常规流块盒，上下外边距相邻会进行合并。最终的取值为两个值中的最大值。不但兄弟元素之间会进行外边距合并，父子元素之间也会进行合并。
<style>
.parent {
width: 200px;
height: 100px;
background: #008c8c;
margin-top: 50px;
}
.children {
width: 50%;
height: 50%;
background: #ff4400;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">
</div>
</div>
</body>
竖直方向上父元素的外边距与子元素的外边距进行了合并，又被称为margin塌陷。
浮动
一个元素只要使用了浮动，就脱离了文档流
应用场景
1.文字环绕
2.横向排列
修改float的属性为：
left：左浮动，元素靠左靠上
right：右浮动，元素靠上靠右
1.当一个元素浮动后，该元素一定为块盒，浏览器会更改display属性值为block。
2.浮动元素的包含块，和常规流一样，为父元素的内容盒（content）。
盒子尺寸
1.宽度设置为width：auto时（或没有设置宽度时），适应内容的宽度，如果没有内容，尺寸为0；如果这一行剩余的宽度放不开，那么自动换到下一行。而常规流设置为auto时会占满父元素的内容盒（包含块）。
2.高度为height：auto时，适应内容的高度，与常规流一致。
3.margin设置为auto时，大小为0（四个方向上都是一样）；常规流设置margin为auto时会吸收剩余空间（导致内容盒居中）。
4.边框、内边框、百分比设置与常规流一致。
盒子排列
1.左浮动的盒子靠上、靠左排列
2右浮动的盒子靠上、靠右排列
3.浮动盒子在包含块中排列时，会避开常规流块盒
4.常规流块盒在排列时，无视浮动盒子，常规流块盒被浮动盒子覆盖
5.行盒在排列时，会避开浮动盒子
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，这个行盒叫做匿名行盒。
正常情况下，文字和图片的关系是这样的
这是由于块盒独占一行造成的。如果将块盒的属性改为行盒呢？如果设置display:inline是这样的
为图片设置float：left之后就变成了这样
在图片设置float属性之后，即使后面的文字在块盒中，但由于生成了匿名行盒，该匿名行盒内的文字元素就自动避让了图片。如果要修改图片与文字之间的距离，可以增加图片的margin：right的属性值。
6.浮动和定位都不会发生外边距合并，只有在常规流上才会发生外边距合并。
高度坍塌
高度坍塌的原因：常规流盒子的自动高度，在计算式不会考虑浮动盒子。
解决办法
1.加入一个空的dom节点(div)clearfix，为其设置属性
.clearfix {
clear: both;
}结果如下：
2.利用伪元素属性，可以不用加一个空的dom节点（推荐此种方式）。为了确保页面正常显示，哪个页面使用了浮动，就在其父页面中使清除浮动。
浮动元素将父元素撑开
定位
手动控制元素在包含块中的精确位置。
涉及的css属性：position
position属性
static：静态定位（不定位，默认值）
relative：相对定位
absolute：绝对定位
fixed：固定定位
一个元素只要position取值不是static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
1.文档流中的元素摆放时，会忽略脱离了文档流的元素
2.文档流中的元素计算高度时，会忽略脱离了文档流的元素（高度坍塌）。
相对定位
不会导致元素脱离文档流，只是让元素在原来的位置上进行偏离。
可以通过四个css属性设置其位置
left
right
top
bottom
相对定位下盒子的便宜不会对其他盒子造成任何影响。
避免同时设置有冲突的值（不要既向上偏移，又向下偏移），当左右发生冲突的时候，以左边为准；上下发生冲突的时候，以上边为准。
绝对定位
1.在盒模型上：宽高为auto，适应内容。
2.包含块变化：依次向上找，找到离自己最近的具有定位属性的祖先元素（具有absolute、relative、fix属性），该元素的填充盒（padding + content）为其包含块；若其祖先元素都没有定位属性，则它的包含块为整个网页（初始化包含块）。
具有重叠效果的地方都可以使用决定定位属性，否则使用浮动和常规流很难做出来。
例子：猫眼电影上的3Dmax小图标定位时，父元素设置为相对定位，为小图标提供包含块，然后将小图标设置为绝对定位，使用四个方向上的偏移来控制图标的定位。
固定定位
1.固定定位与绝对定位的区别：其他情况和绝对定位完全一样。
2.包含块不一样，包含块为视口（浏览器的可视化窗口）
定位下的居中
某个方向居中：
1.定宽（定高）
2.将左右（上下）的距离设置为0；
3.将左右（上下）的外边距设为auto；
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间。
多个定位元素重叠时
设置z-index：通常情况下，该值越大，越靠近用户。
1.只有定位元素设置z-index有效（常规流和浮动流无效）
2.z-index可以是负数，如果是负数，会被常规流和浮动流覆盖
3.常规流遇到浮动元素虽然会无视浮动元素，但还是会避开浮动元素；常规流遇到定位元素会无视定位元素，直接被其覆盖。
补充：
1.绝对定位、固定定位元素一定是块盒。
2.绝对定位、固定定位一定不是浮动元素。如果既有浮动，又有绝对定位，那么会强制性的将其改为float：none；
3.没有外边距合并
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
