CSS核心样式
在学习了html和css的基础之后，接下来开始学习css的核心样式语法及其应用。
在学习中我们不仅要悉知css的样式语法，如何去使用css让页面达到我们想要的结果。也要知道在css一些属性在浏览器加载中，可能遇到的兼容性问题和遗留的问题。
css常用样式-字体属性
- 粗细 font-weight
- 字体风格 font-style
- 行高 line-height
- 字体综合属性 font
粗细 font-weight
作用：设置文字是否加粗显示。
属性名：font-weight,属于font属性的一个单一属性。
属性值：单词类型、数字类型。
单词类型
| 属性值 | 说明 |
|---|---|
| normal | 默认，标准字体 |
| bold | 粗体字体，b、strong标签的默认值 |
| bolder | 更粗体的字体 |
| lighter | 更细体的字体 |
数字类型
100~900 之间的整百数字。数字越大，文字越粗。
400等价于normal,700等价于bold。
字体风格 font-style
作用：设置字体是否倾斜显示。
属性名：font-style，属于font属性的一个单一属性。
属性值：单词。
| 属性值 | 说明 |
|---|---|
| normal | 设置正规字体，大多数标签的默认值 |
| italic | 设置斜体字体，主要针对英文，要求英文以字体的斜体样式显示 |
| oblique | 设置斜体字体，只是将文字倾斜显示，与字体无关 |
行高 line-height
作用：设置一行为实际占有的高度，文字字号在行高中垂直居中。
属性名：line-height，属于font属性的一个单一属性。
| 属性值 | 说明 |
|---|---|
| px像素值 | 设置行高的具体像素值 |
| 百分比数值 | 设置的本身字号像素的百分比 |
实际应用中，行高的数值通过设计图获取。
字体综合 font
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
单一属性可进行合写，值之间用空格进行分隔。
①写法一：
font进行综合书写时，必须有字号和字体参与，且字号在字体前，不可颠倒顺序。
p {
font: 14px "arial","宋体";
}
②写法二：
font属性经常对字体、字号和行高进行合写。书写顺序：字号、行高、字体，字号和行高之间必须用/进行分隔。
p {
font: 14px/28px "arial","宋体";
}
③写法三：
font若需要设置加粗和斜体，这两个属性值只能写在最前面，两个值之间可进行互换。后面单一属性不可更改位置。
p {
/* 两种书写方式效果一样 */
font: italic bold 14px/28px "arial","宋体";
font: bold italic 14px/28px "arial","宋体"
}
css常用样式-文本属性
- 水平对齐 text-align
- 文本修饰 text-decoration
- 缩进 text-indent
水平对齐 text-align
作用：设置文本水平方向对齐，无论单行或多行，都会对应方向对齐。
属性值：三个方向单词。
| 属性值 | 说明 |
|---|---|
| left | 居左对齐，大部分标签默认值 |
| center | 居中对齐 |
| right | 居右对齐 |
文本修饰 text-decoration
作用：设置文本整体是否有线条的修饰效果。
| 属性值 | 说明 |
|---|---|
| none | 没有修饰，大部分标签默认值 |
| overline | 上划线 |
| line-through | 中划线，删除线，<del>标签默认值 |
| underline | 下划线，<a>标签的默认值 |
缩进 text-indent
作用：设置段落首行是否进行缩进。
| 属性值 | 说明 |
|---|---|
| px单位 | 表示首行缩进多少像素 |
| em单位 | 首行缩进几个中文字符的位置 |
| 百分比 | 表示缩进文字所在标签的父级标签width属性的百分比 |
实际工作中，最常用是em为单位的属性值。
属性值区分正负，正数表示向右缩进，负数表示向左缩进。
css常用样式-盒模型属性
盒模型又称为框模型，包含五个用来描述盒子位置、尺寸的属性。
- 宽度 width
- 高度 height
- 内边距 padding
- 边框 border
- 外边距 margin
盒模型属性中，根据不同属性效果，可划分区域：
元素内容区域：width + height
盒子可实体化区域：width + height + padding + border
盒子实际占有的位置：width + height + padding + border + margin
宽度 width
作用：设置可添加元素内容区域的宽度。
| 属性值 | 说明 |
|---|---|
| auto | 默认值。浏览器可计算出实际的宽度 |
| px | 设置宽度具体的像素值 |
| % | 参考父元素宽度width的百分比宽度 |
特殊应用
① 若一个元素不添加width属性，默认为auto，不同浏览器会自动计算出实际宽度。例如<div>元素独占一行的，会自动撑满父元素的width区域，如果是<span>元素等不独占一行的，则由内部元素的内容自动撑开宽度。
② <body>元素比较特殊，不需要设置width属性，宽度会自适应浏览器窗口宽度。
<div style="width: 500px;height:200px;background-color: red;">
<div style="background-color: pink">
这里独占一行的元素，并且没有设置宽度。
</div>
<span style="background-color: blue;">
这里是不独占一行的元素，并且没有设置宽度。
</span>
</div>
效果：
高度 height
作用：设置可添加元素内容的区域的高度。
| 属性值 | 说明 |
|---|---|
| auto | 默认值。浏览器可计算出实际的宽度 |
| px | 设置宽度具体的像素值 |
| % | 参考父元素宽度height的百分比宽度 |
特殊应用
若一个元素不添加width属性，默认为auto，浏览器自动计算高度。元素的高度自适应内部内容的高度。
内边距 padding
作用：设置元素边框内部到宽高区域间的距离。
特点：可以加载背景，不能书写嵌套的内容。
属性值：常用px单位为数值。
padding是一个复合属性，可根据内边距方向分为四个方向的单一属性。
单一属性
一般按照顺时针规律书写：上、右、下、左。
p {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
简写
① 四值法：
设置四个属性值：上、右、下、左
p {
padding: 10px 20px 30px 40px;
}
② 三值法：
设置三个值：上、左右、下。
p {
padding: 10px 20px 30px;
}
③ 二值法：
设置两个值：上下、左右。
p {
padding: 10px 20px;
}
④ 单值法：
设置一个值：上右下左，四边值相同。
p {
padding: 10px;
}
若需要制作三边内边距相同，一边不同。
方法一：使用四值法、三值法，进行属性值设置。
方法二(推荐使用)：利用css的层叠性，先设置四边内边距相同，在后面使用单一属性写法。注意书写顺序，单一属性必须写在后面。
边距 border
作用：设置内边距外边的边界区域，作为盒子实体化的最外层。
属性值：三值组成，分为线宽度、线形状、线颜色。
boder属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分。
p {
border: 10px solid #f00;
}
按属性值类型划分
线宽 border-width
作用：设置边框宽度
属性值：常用px形式数值，四个方向均有边框，类似于padding。
p {
border-width: 10px 20px 30px 40px;
}
线形 border-style
作用：设置边框线形状。
属性值：形状单词，整体也类似padding的综合属性写法。
| 属性值 | 说明 |
|---|---|
| none | 定义无边框 |
| solid | 定义实线 |
| dashed | 定义虚线 |
常用属性值为以上三种，其他属性值可参考文档。
边框颜色 border-color
作用：设置边框颜色
属性值：颜色名或颜色值，整体也类似padding的综合属性写法。
p {
border-color: #f00 #f0f #0f0 #ff0;
}
根据边框方向划分
上边框：border-top
右边框：border-right
左边框：border-left
下边框：border-bottom
每个单一属性都必须与复合属性border一致，设置三个属性值。
p {
border-top: 10px solid #f00;
border-right: 10px solid #0f0;
}
根据方向和类型
单一属性写法：border-方向-类型
注意：细分时必须先方向后类型，否则会出错。
p {
border-right-color: #0f0;
}
外边距 margin
作用：设置盒子与盒子间的距离。
特点：不能渲染背景。
属性值：常用px为单位的数值。
外边距设置方式与内边距padding一摸一样。
盒模型属性的应用
清除默认样式
大部分标签都有一个在浏览器加载的默认样式，为了避免默认样式对整体布局造成的影响，一定要清除默认样式。
- 盒模型属性的内外边界：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么用通配符清除。
- <ul>和<ol>有默认列表前缀，可用list-style:none清除样式。
- <a>标签的默认样式，可设置color和text-decoration。
- 清除默认加粗效果：设置font-weight。
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,td,th {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
a {
color: #666;
text-decoration: none;
}
h1,h2,h3,h4,h5,h6,strong {
font-weight: normal;
}
由于文字样式可以被继承，所以在<body>标签中设置整体的文字样式：
body {
color: #666;
font-size: 14px;
font-family: "Arial","宋体";
}
注意：并集选择器或通配符均可清除样式，但通配符会选择所有的标签，效率较低。在实际应用中，推荐使用并集选择器。
高度height应用
根据不同需求，高度属性可设置也可不设置。
如果设置了高度，盒子占有的高度位置规定死，后面同级元素会紧挨着加载；如果不设置高度，会根据标签内容高度自动撑开。
必须设置高度
要求盒子高度位置占位是固定的，后面同级元素的高度在高度下面加载。
出现的问题：自身盒子内部内容过多会溢出盒子区域。
解决方法：使用overflow属性，对溢出部分内容的显示效果进行设置。
| 属性值 | 说明 |
|---|---|
| visible | 默认值，溢出部分显示的 |
| hidden | 溢出部分直接隐藏，隐藏超出边框范围的内容 |
| scroll | 溢出部分出现滚动条，可拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条 |
| auto | 自动的，如果没有溢出就正常显示，如果溢出，溢出的方向会自动出现滚动条 |
必须不设置高度
要求盒子高度必须自适应内部内容的高度。
设置height的属性值是自动的或者不设置高度。
div {
height: auto;
}
文字或元素居中
网页中经常有元素或者文字居中的效果。
- 文本水平居中
方法：文本水平居中，不论单行或是多行，使用text-align属性设置。 - 文本垂直居中
方法：单行文本垂直居中，让文字行高line-height等于盒子的高度height。
方法：多行文本垂直居中，让元素高度自适应或者正好等于多行文字的高度，再设置元素内边距上下值相同。 - 元素垂直居中
一个子元素在父元素中垂直居中。
方法：与多行文字类似，让父元素高度自适应，子元素自动撑开父元素的高度，再给父元素设置相同的上下边距。 - 元素水平居中
针对块元素样式上必须独占一行的盒子，若子盒子宽度低于父盒子宽度，可设置盒子的margin值，水平方向值都设置为auto。
注：auto只在水平方向有作用，水平方向的margin设置为auto，边距会自动无限增大，直到撑满除子元素外父元素剩余区域；因此，如果两个水平方向均为auto，为了达到平衡，两边边距相同，盒子居中显示。
.box {
width: 300px;
height: 200px;
margin: 0 auto;
}
父子盒模型应用
一般情况下，父元素内部可放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度要足够，需要遵循设置尺寸的规律：所有子元素的宽度加起来不能大于父元素的宽度width。
父元素width>=所有子元素width+padding+border+margin
否则，多余的子元素会掉下来或溢出父元素。
解决方法一：计算量取尺寸时要准确。
解决方法二（特殊情况）：盒模型自动内减。
父盒子中只有一个子元素，且是块元素标签必须占一行的。不设置子元素的width，此时子元素的width属性会自动加载父元素的width。即使设置了子元素的padding、border和margin，也不需要手动进行内减，子元素的width会自动收缩尺寸。
margin 塌陷现象
在垂直方向如果有两个元素的外边距有相遇的，浏览器加载的真正外边距不是两个间距的加和，而是两个边距中较大的，边距值小的塌陷到边距大的值内部。
同级元素塌陷
上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距是较大的值。
解决方法：
如果两个元素垂直方向有间距，只需要给一个元素设置边距即可。
父子元素塌陷
① 父元素和子元素都设置了同方向的margin-top值，两个元素之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。
.demo {
width: 300px;
height: 300px;
margin-top: 20px;
background-color: red;
}
.demo p {
width: 100px;
height: 100px;
margin-top: 30px;
background-color: blue;
}
② 本身父元素与上个元素距离是0，子元素设置了垂直方向的上边距，会带着父级一起掉下来。
解决方法：
让两个边距不要相遇，中间可使用父元素border或padding将边距分隔开；更常用方法，父子盒模型之间的距离就不要用子元素的margin去设置，而是用父级的padding挤出来。
注意：水平方向的margin没有塌陷现象。
