字体

字体粗细 font-weight

字体风格 font-style

行高 line-height

字体综合 font

字体、字号、行高、加粗、斜体都是 font 综合属性的单一属性。

• font 属性五个单一属性的值可以进行合写，属性值可以有 2 到多个，值之间用空格进行分隔。
• font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序。
• font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔。

• 如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互 换位置。后面的字号、行高、字体不能更改位置。
  

  文本

  水平对齐 text-align

• left

• right

• center

  文本修饰 text-decoration

  设置文本整体是否有线条的修饰效果

• none，默认

• overline，上划线
• line-through，中划线、删除线

• underline，下划线

  缩进 text-indent

  设置段落首行是否进行缩进

• 属性值可以为像素、单位或百分比， 属性值区分正负，正数表示向右缩进，负数表示向左缩进

  • 像素，缩进像素
  • 单位，缩进中文字符的数量
  • 百分比，缩进文字所在标签的父级标签的宽度的百分比

    盒模型

• 书写元素内容区域：width+height

• 盒子可以实体化的区域：width+height+padding+border

• 盒子实际占位的位置：width+height+padding+border+margin

  宽度 width

• auto

• px

• %

  高度 height

• auto

• px

• %

  内边距 padding

  元素的边框内部到宽高区域之间的距离

• padding-top

• padding-right
• padding-bottom

• padding-left

  四值法

  上、右、下、左

  三值法

  上、左右、下

  二值法

  上下、左右

  单值法

  四边相同

  边框 border

• 线宽：border-width，类似于padding

• 线型：border-style | none | 无边框 | | —- | —- | | solid | 实线 | | dashed | 虚线 | | dotted | 点状虚线 | | double | 双线 | | groove | 3D凹槽边框 | | ridge | 3D垄状边框 | | inset | 3D凹陷 | | outset | 3D突出 |

• 颜色：border-color
  

  外边距 margin

  盒子与盒子之间的距离，同padding

• margin‐top

• margin‐right
• margin‐left
• margin‐bottom

清除默认样式

还可以给 标签设置整体文字样式，让大部分后代标签全部去继承。

高度 height 应用

• 如果设置了高度，盒子的高度就确定了，后面的同级元素会紧挨着加载，内容过多会溢出盒子区域

• 如果不设置高度，会根据标签内部内容高度自动撑开

  overflow 属性

  设置了高度的盒子，如果内部元素的加载高度超过父级元素，会出现溢出效果。可以设置一个溢出的属性 overflow ，对溢出部分内容的显示效果进行设置。
  overflow 属性取值如下：

• visible，默认值，溢出部分可见

• hidden，溢出部分隐藏
• scroll，溢出部分出现滚动条

• auto，自动的，哪个方向溢出就会自动出现滚动条

  居中显示

  文本水平居中

  text-align: center，单行或多行都可以

  文本垂直居中

• 单行文本垂直居中，line-height=盒子高度height

• 多行文本垂直居中，让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同

  元素水平居中

  margin: 0 auto;

  元素垂直居中

  让父元素高度自适应，子元素高度自动撑开父元素的高度，再给父元素设置相同的上下边距

margin 塌陷现象

margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是 较大的那个值。

父子元素塌陷

父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。

解决 margin 塌陷问题的方法

• 同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
• 父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来， 而是父级的 padding 挤出来。

  显示模式 display

  标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过 display 属性更改一个标签的显示模式。
  属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。

浮动属性 float

• 浮动是一种非常重要的布局属性。
• 属性值： left 左浮动，right 右浮动
• 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。
• 浮动的元素没有margin塌陷

浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。

字围现象

同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。这种效果称为字围现象。

浮动的问题

1. 标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。 如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

2. 父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

   清除浮动的方法

3. 给标准流的父元素强制给一个合适的高度，父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。 问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现

4. 给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。解决：浮动元素影响后面元素标准流位置和贴边。 问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确。
5. 外墙法：在两个大的父盒子之间，添加一个空的
   标签，标签上带有 clear： both 属性。问题是父元素没有高度自适应。
6. 内墙法：在父元素内部，所有的浮动子元素后面添加一个空的
   元素，标签高度为 0，添加 clear 属性。缺点是冗余
7. 伪类：通过选中的标签添加伪类，去选中标签的某个状态或位置。:after：这个伪类表示选中的是某个标签内部的最后的位置。 书写方法：前面必须加普通的选择器，后面连续书写伪类名称。 将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一 个clearfix的类名。
8. 溢出隐藏：给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题

   伪类选择器

   普通的类必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
   伪类不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上， 只有用户触发了对应的行为，伪类的样式才会立即加载。
   伪类选择器的权重与普通的类选择器相同。
   伪类选择器写法：前面是普通的选择器，后面紧跟:伪类名。

   标签的伪类

   标签可以根据用户行为不同，划分为四种状态，通过 标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。

   a:link{ 
   /*访问前状态*/
   }
   a:visited{
   /* 访问后状态 */
   }
   a:hover{
   /* 鼠标悬浮状态 */
   }
   a:active{
   /* 鼠标点击状态 */
   }

• 标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进行加载，相同的 属性之间会发生层叠。
• 伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。
• 要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、 鼠标移上hover、鼠标点击active。

• 为了方便记忆，利用爱恨准则：love hate。

  背景属性

  背景颜色 background-color

  背景图片 background-image

• background-image: url(images/meng.jpg);

• 默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始

  背景重复 background-repeat

• repeat，重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域

• no-repeat，不重复，不论背景图是否大于盒子范围，都只加载一次图片
• repeat-x，水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复

• repeat-y，垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复

  背景定位 background-position

• 主要用于设置不重复的图片在背景区域的加载开始位置

• 分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法， 属性值都有两个，值之间用空格分隔。
• 第一个属性值：表示背景图片在水平方向的位置；第二个属性值：表示背景图片在垂直方向的位置

单词表示法
属性值都是使用代表方向的单词进行书写。
水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐。
像素表示法
使用像素值作为背景定位的属性值。
像素值区分正负，正负代表位移方向不同： 正数：表示图片针对盒子的原点向右、向下移动；负数：表示图片针对盒子的原点向左、向上移动。
第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离

背景附着 background-attachment

设置的是背景图片是否要随着页面或者盒子的滚动而滚动

• scroll，滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走

• fixed，固定的，背景图的定位的参考点从盒子 border 以内的左上顶点变为了浏览器窗口的左 上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口 的某个位置，不会随着页面滚动而滚走。

  综合写法 background

  background 属性可以将五个单一属性的值进行合写。
  属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作 一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。

• 如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。

• 如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写 法进行层叠。

  背景缩放 background-size

  

  多背景

  CSS3 中规定，一个盒子上，可以添加多个背景图片。
  background-image 的属性值书写时，以逗号分隔多背景的 URL路径地址。
  注意：背景加载时，先写的背景压盖后写的背景图片。

  定位属性 position

  relative 相对定位

• 相对于标签加载的原始位置，相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。

• 元素显示效果上，原位留坑，形影分离
• 偏移量属性的值是区分正负的。 正数：表示偏移方向与属性名方向相反。 负数：表示偏移方向与属性名方向相同。
• 同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。 建议：书写时从水平方向和垂直方向各挑一个属性进行组合。

• 由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的 正值等价于 bottom 的负值。

  absolute 绝对定位

• 参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考 。

• 性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
• 绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合， 会导致绝对定位元素的参考点不同，具体位移效果不同。

• 在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。

  fixed 固定定位

• 参考的是浏览器窗口

• 固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口 上