CSS常用样式

字体属性

粗细 font-weight
- 属性值：英文单词
  
  属性值说明
  normal 默认值，定义标准的字体 bold 定义粗体字符，b、strong标签的默认值 bolder 定义更粗的字体 lighter 定义更细的字体
- 属性值：数字类型
  - 100~900之间的整百数字。数字越大，文字显示的越粗。
  - 其中400等价于normal，700等价于bold.
字体风格 font-style
- 作用：设置文字是否斜体显示。
- 属性值：单词
  属性值说明
  normal 设置正规的字体，大多数标签的默认值 italic 设置斜体的文字，只要针对英文 oblique 设置倾斜的文字，只是将文字倾斜显示，与字体无关
行高 line-height
- 含义：
  1. 行高是文字真正占有的高度。
  2. 行高内部的文字是垂直居中于行高显示的。
- 属性值
  
  属性值说明
  px像素值设置的行高的具体像素值百分比数值设置的本身字号像素值的百分比
- 实际应用中，行高的数值通过设计图获取，量取数值时需要使用一些辅助软件工具。
  - Fireworks软件第一步：确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，这就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。
    
    第二步：根据已知的字号和字体，在书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是行高值。
字体综合 font
- font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。
- 写法
  1. 必须有字号和字体参与。字号在前，字体在后。
```
  font: 14px "宋体";
```
  1. 字号、行高、字体，字号和行高之间必须用/进行分隔。
```
  font: 14px/28px "宋体";
```
  1. 设置加粗和斜体，两个属性只能写在最前面，两个值之间可以互换位置，后面的字号、行高、字体不能更改位置。
```
  font: bold italic 14px/28px "宋体";
```

属性值	说明
normal	默认值，定义标准的字体	bold	定义粗体字符，b、strong标签的默认值	bolder	定义更粗的字体	lighter	定义更细的字体

属性值	说明
normal	设置正规的字体，大多数标签的默认值	italic	设置斜体的文字，只要针对英文	oblique	设置倾斜的文字，只是将文字倾斜显示，与字体无关

属性值	说明
px像素值	设置的行高的具体像素值	百分比数值	设置的本身字号像素值的百分比

文本属性

颜色 color
水平对齐 text-align
1. 作用：设置文本水平方向的对齐。在盒子中，不论文本是单行还是多行，每一行都会对应方向对齐。
2. 属性值：三个方向的单词
  属性值作用
  left 居左对齐，大部分标签的默认值 right 居右对齐 center 居中对齐
文本修饰 text-decoration
- 作用：设置文本整体是否有线条的修饰效果
- 属性值
  属性值说明
  none 没有修饰，大部分标签的默认值 overline 上划线 line-through 中划线，删除线，<del>标签的默认值 underline 下划线，<a>标签的默认值

属性值	作用
left	居左对齐，大部分标签的默认值	right	居右对齐	center	居中对齐

属性值	说明
none	没有修饰，大部分标签的默认值	overline	上划线	line-through	中划线，删除线，<del>标签的默认值	underline	下划线，<a>标签的默认值

缩进 text-indent

作用：设置段落首行是否缩进。

属性值

属性值	说明
px单位	表示首行缩进多少像素	em单位	首行缩进几个中文字符的位置(会根据字体大小自动变换)	百分比	表示缩进文字所在标签的父级标签的width属性值的百分比

实际工作中，最常使用em为单位的属性值
属性值区分正负，正数表示向右或下缩进，负数表示向左或上缩进。

盒模型属性

含义：盒模型又叫框模型。

CSS常用样式

属性：包含了五个用来描述盒子位置、尺寸的属性。
1. 宽度width
  - 作用：添加元素内容区域的宽度。
  - 属性值
    
    属性值说明
    auto 默认值。浏览器可计算出实际的宽度 px 像素值定义的宽度 % 定义参考父元素宽度width的百分比宽度
  - 特殊应用
    1. 元素不添加width属性，默认auto，不同的元素浏览器会根据元素的特点自动计算出实际宽度。例如<div>元素等独占一行的，其width属性的值会自动撑满父元素的width区域；如果是<span>元素等不需要独占一行的，其width属性的值是内部元素内容自动撑开的宽度。
    2. <body>元素比较特殊，不需要设置width属性，宽度会自动适应浏览器窗口的宽度。
2. 高度height
  - 作用：添加元素内容区域的高度。
  - 属性值
    
    属性值说明
    auto 默认。浏览器会计算出实际的高度 px 像素值定义的高度 % 参考父元素高度height的百分比高度
  - 特殊应用如果元素不添加height属性，属性值默认为auto，浏览器会自动计算出实际高度，也就是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。
3. 内边距padding
  - 作用：设置元素的边框内部到宽高区域之间的距离。
  - 特点：可以加载背景，不能书写嵌套内容
  - 属性值：常用px为单位的数值。
  - padding是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。
  - 简写(四种表示法)
    1. 四值法 ?、?、?、?
    2. 三值法 ?、左右、?
    3. 二值法上下、左右
    4. 一值法上下左右
  - 案例
    - 制作三边内边距相同，一边不同
      1. 使用四值法、三值法，进行属性值设置
      2. 利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同。
```
  div{
    
    padding: 12px;
    padding-bottom: 20px;
  }
```
4. 边框border
  - 作用：设置内边距外面的边界区域，作为盒子的实体化的最外层。
  - 属性值：由三个值组成 -> 线的宽度、线的形状、线的颜色
    1. 线宽：border-width
      - 属性值：px形式的数值。类似于padding,也有四种值的写法。
    2. 线型: border-style
      - 属性值：形状的单词，总体也是类似padding的综合属性写法。
        属性值说明
        none 无边框 solid 实线 dashed 虚线 dotted 点状边框 double 双线 groove 3D凹槽边框 ridge 3D垄状边框 inset 3D凹陷效果 outset 3D突出效果
    3. 颜色: border-color
      - 属性值: 整体类似padding综合属性写法。
```
  p {
    border-color: #f00 #f00 #f00 #f00;
  }
```
  - border属性是一个复合属性，有两种单一属性的划分方式。
  - 根据边框的方向划分 1. 上边框 border-top 2. 右边框 border-right 3. 下边框 border-bottom 4. 左边框 border-left
```
  p {
    border-top: 10px solid #f00;
    border-right: 20px dashed #0f0;
  }
```
  - 根据方向和类型，进一步细分
    - 单一属性写法：border-方向-类型
```
  p {
    border-right-color: #0f0;
  }
```
5. 外边距margin
  - 作用：设置盒子与盒子之间的距离。
  - 特点：不能渲染背景
  - 属性值：常用px为单位的数值。(注：外边距的设置与内边距padding一模一样)
    1. 单一属性
    2. 复合属性的四种值写法
书写元素的内容区域：width+height
盒子可以实体化的区域：width+height+padding+border
盒子实际占位的位置：width+height+padding+border+margin
盒模型图

属性值	说明
auto	默认值。浏览器可计算出实际的宽度	px	像素值定义的宽度	%	定义参考父元素宽度width的百分比宽度

属性值	说明
auto	默认。浏览器会计算出实际的高度	px	像素值定义的高度	%	参考父元素高度height的百分比高度

属性值	说明
none	无边框	solid	实线	dashed	虚线	dotted	点状边框	double	双线	groove	3D凹槽边框	ridge	3D垄状边框	inset	3D凹陷效果	outset	3D突出效果

盒模型扩展应用

清除默认样式
- 大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
- 盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式(适合大项目，效率高)，要么通配符清除(适合小项目)。
- <ul>和<ol>两种列表有默认的列表前缀：清除list-style: none;
- <a>标签的默认样式，设置页面中常用的公共样式: color和text-decoration: none;
- 清除默认加粗样式：font-weight: normal;
```
  body,div,p,h1,h2,h3,ul,ol,li,dl,dt,dd,td,th {
    margin: 0;
    padding: 0;
  }
  ul,ol {
    list-style: none;
  }
  a {
    color: #0f0;
    text-decoration: none;
  }
  h1,h2,b,strong {
    font-weight: normal;
  }
```
- 给<body>标签设置整体文字样式，让大部分后代标签全部去继承。
```
  body {
    color: #666;
    font-size: 16px;
    font-family: "consolas","宋体";
  }
```

height应用

如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。
如果不设置高度：会根据标签内部内容高度自动撑开。

以<div>标签为例，根据不同情况选择是否设置高度：

必须设置高度

自身盒子内部内容过多会溢出盒子区域。

overflow属性如果内部元素的加载高度超过父级，会出现溢出效果。可以通过溢出的属性解决。

属性值	说明
visible	默认值，溢出部分显示的	hidden	溢出部分直接隐藏，隐藏超过边框范围的内容	scroll	不论有没有溢出，水平和垂直方向都会出现滚动条，没溢出时，没有滑块，但是还有滚动条。	auto	自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条。

注：scroll是同时出现水平和垂直两个方向的，而auto则是哪里溢出哪里出现。textarea是只在垂直方向出现滚动条。

必须不设置高度
- 要求盒子高度必须自适应内部内容的高度，或者设置height的属性是自动的。

居中
- 文本水平居中 text-align
  - 不论单行或多行都可以设置。
```
  div {
    text-align: center;
  }
```
- 文本垂直居中
  - 单行文本垂直居中让文字行高line-height等于盒子高度height.
  - 多行文本垂直居中让元素高度自适应或者正好等于多行文字的高度，设置元素的内边距上下相同。
- 元素垂直居中
  - 含义：一个元素内部嵌套的子元素，在父元素中居中。
  - 垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
```
  .box {
    width: 300px;
    padding: 20px 10px;
    border: 1px solid red;
  }
```
- 元素水平居中
  - 针对类似<div>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的margin值，水平方向的值都设置为auto.
  - 原因：
    1. auto只在水平方向有作用
    2. 水平方向的margin如果设置为auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域。
    3. 如果两个水平方向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。
```
  .box {
    width: 300px;
    height: 300px;
    margin: auto 0;
  }
```
- 为什么会独占一行？多余的空白会自动设置外边距(margin)
父子盒模型
- 情况：一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况）。
  - 遵循尺寸：父元素的width >= 所有子元素width+padding+border+margin
  - 如果不满足条件：要么多余的子元素掉下来不能在一排（多个子元素），要么溢出父元素（单个子元素）。
  - 错误效果1
  - 错误效果2
- 解决方法
  - 计算或量取尺寸时一定要计算准确，一像素都不能偏差。
  - 特殊情况：盒模型自动内减
    - 父子盒模型中，只有一个子元素，且子元素是类似<div>标签必须占一行的。
    - 不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width。如果同时设置了子元素水平方向的paddind、border、margin，不需要手动去进行内减，子元素的width会自动收缩尺寸。
    - 子元素所有的水平方向的位置所有属性加和等于父元素的width.
margin塌陷现象
- 含义：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
- 分类
  - 同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。
  - 父子元素塌陷
    1. 父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他的内容（border、padding）进行隔离，导致两个属性相遇，发生margin塌陷。
    1. 本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。
- 解决margin塌陷问题的方法
  1. 同级元素：一次设置到位。即如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
  2. 父子元素：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的margin去踹出来，而是父级的padding挤出来。
- 注：水平方向的margin没有塌陷现象。