CSS基础知识

CSS基础知识

一 常见的样式声明

1 color 设置文字颜色
  1.1 设置预设值:定义好的单词
  1.2 三原色,色值 rgb()
  1.3 常见颜色值:淘宝红(#ff4400),黑色(#000000),白色(#ffffff)
2 background-clor 元素背景颜色
3 font-size 元素内部文字大小
  3.1 px:像素
  3.2 em:相对单位,相对于父元素的字体大小,每个元素必须有字体大小如果没有声明直接使用父元素的字体大小,如果都没有则使用基准字号(浏览器提供)
  3.3 font-weight:normal(不加粗)/bolder(加粗) 文字粗细程度,可以处取值数字,可以为预设值
  3.4 font-family:必须用户计算机中存在的字体,使用多个字体匹配不同环境 字体1,字体二,字体3,... 通用字体:sans-serf 非称线字体
  3.5 font-style:italic(字体倾斜) 设置字体样式,iuy元素的默认样式是倾斜字体
  3.6 透明
      3.6.1 每个颜色都具有透明通道,0(完全透明)-1(不透明)
      3.6.2 rgba(红,绿,蓝,alpha)

二 选择器

1 通配符选择器
     1.1 * 选择所有元素
   2 属性选择器
     1 用法:[attr="value"] 选中属性为attr的属性,同时可以选中属性值为value的元素
     2 其他方法:
       2.1 [attr~=value] attr属性中包含value的中间有空格例如 class="a b c" [class~="b"]->选择b
       2.2 [attr*=value] attr属性中包含该值
       2.3 [attr$=value] attr属性中以value结束
   3 伪类选择器
     3.1 用法:选中某些选择器的某种状态,如果一下元素都要使用按照 3.4,3.5,3.2,3.3
     3.2 :hover 鼠标悬停状态
     3.3 :active 激活状态
     3.4 :link 超链接未访问的状态
     3.5 :visited 超链接访问后的状态
     3.6 :first-child 选中第一个子元素,计算时其他元素会被计算
     3.6 :first-of-type 选中设置的第一个子元素,计算时其他元素不会被计算
     3.7 :last-child 选中最后一个子元素
     3.8 :last-of-type 选中设置的最后一个子元素
     3.9 nth-child 选中指定位置的子元素和lirst-child一样
     3.10 nth-of-type 选中指定位置的元素必须是设置的元素 ood选中奇数等同于2n+1 even选中偶数等同于2n 这里的n从0开始每次自增1
   4 伪元素选择器
     4.1 定义:必须添加content:"";
     4.2 ::before 选中元素内容前并添加一个元素 <span></span>->span::before -> <span>::before</span>
     4.3 ::after
     4.4 ::first-letter 选中元素中的第一个字母,中文选中第一个文字
     4.5 ::first-line 选中文字中第一行文字,跟随行的宽度发生改变
     4.6 ::selection 选中被用户框选的文字,就是用户用鼠标选中的文字,可以改变样式
   5 选择器的组合
     5.1 并且 . elem.class/id
     5.2 后代元素 elem elem 选择elem的后代元素(包括孙子元素)
     5.3 子元素选择器 elem>elem 选择elem的子元素不包括孙子元素
     5.4 相邻兄弟元素 + class+elem{value:value} 获取属性值为class的下一个为elem的兄弟元素
     5.4 兄弟元素 ~ 获取后边出现的所有兄弟元素
   6 选择器的并列 多个选择器使用,分隔  

三 层叠

 1 声明冲突:同一个样式,多次应用到同一个元素
   2 层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
     2.1 比较重要性
         2.1.1 重要性从高到低 作者样式表(开发者)中的!important样式(color:value !important)设置该样式为最高样式 --> 作者样式表中的普通样式 --> 浏览器默认样式表
     2.2 比较特殊性
         2.2.1 如果重要性比较没有解决则使用特殊性比较
         2.2.2 总体规则:选择器选中的范围越窄,越特殊
         2.2.3 具体规则:通过选择器,计算出一个4位数(xxxx)
               2.2.3.1 千位:如果是内联样式,记1 否则记0
               2.2.3.2 百位:等于选择器中所有ID选择器的数量
               2.2.3.3 十位:等于选择器中所有类选择器,属性选择器,伪类选择器(:)的数量
               2.2.3.4 个位:等于选择器中所有元素选择器,伪元素选择器(::)的数量
     2.3 比较源次序
         2.3.1 代码书写靠后的胜出
    3 重置样式表
      3.1 书写一些作者样式,覆盖浏览器的默认样式,重置样式表->浏览器默认样式  
      3.2 爱恨法则 link>visited>hover>active

四 继承

1 子元素会继承父元素的某些CSS属性
   1.1 通常个文字内容相关的属性都会被继承 

五 属性值的计算过程

1 一个元素一次渲染,顺序按照页面文档的树形目录进行渲染
   2 渲染每个元素的前提条件:该元素的所有CSS属性值必须有值,一个元素从所有属性都没有值,到所有属性都有值这几计算过程就是属性值计算过程
   3 计算过程:
     3.1 确定声明值(用于添加的属性值,浏览器自带的属性值) 参考样式表中没有冲突的声明,直接作为CSS属性值
     3.2 层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值
     3.3 使用继承:对仍然没有值得属性,若可以继承,则继承父元素的值(inherit关键字强制使用继承 color:inherit)
     3.4 使用默认值:对仍然没有值得属性,使用默认值
   4 特殊的两个CSS取值
     4.1 inherit:手动(强制)继承将父元素的值取出应用到该元素
     4.2 initial:设置元素样式为默认样式(浏览器提供的)

六 盒模型

1 box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
   2 盒子类型:
     2.1 行盒:CSS中display等于inline的元素
     2.2 块盒:CSS中display等于block的元素
   3 行盒在页面中不换行,块盒独占一行  
     3.1 display 默认inline
     3.2 浏览器默认样式表设置的块盒:容器元素,h1-h6,p
     3.3 浏览器常见的行盒:span,a,img,video,audio
   4 盒子的组成部分,无论是行盒还是块盒都由下面几部分组成由内到外分别是:
     4.1 内容 content
         4.1.1 width,height,设置的是盒子内容的宽高,内容部分通常叫做整个盒子的内容盒(content-box)
     4.2 填充 padding(填充区+内容器=填充盒padding-box)
         4.2.1 盒子边框到盒子内容的距离
         4.2.2 padding-left(左),padding-right(右),padding-top,padding-right,属性简写:padding:top right bottom right,padding:top/bottom right/left
     4.3 边框 border(边框+填充区+内容区=边框盒 border-box)
         4.3.1 边框样式,边框宽度,边框颜色
         4.3.2 边框样式:border-style:none/solid(实线)
         4.3.3 边框宽度:border-width
         4.3.4 边框颜色:border-color 颜色默认是字体颜色
         
     4.4 外边距 margin
         4.4.1 边框到其他盒子的距离
         4.4.2 margin-top,margin-bottom,margin-right,margin-left

七 盒模型应用

 1 改变宽高范围
      1.1 默认情况下,width和height设置的是内容盒宽高,衡量设计稿尺寸的时候使用的是边框盒,但是设置的是内容盒(解决:精确计算,CSS3:box-sizing:border-box 改变宽高的影响范围)      
    2 改变背景覆盖范围
      2.1 默认情况下,背景覆盖边框盒(解决:可以通过background-clip进行修改)
    3 溢出处理
      3.1 overflow,控制内容溢出边框盒外面的处理方式
    4 断词规则
      4.1 word-break,会影响文字在什么位置被截断
          4.1.1 normal:普通 CJK字符(文字位置截断),非CJK字符(单词位置截断)
          4.1.2 break-all 截断所有字符
          4.1.3 keep-all 保持所有,所有文字都在单词间截断
    5 空白处理
      5.1 white-space: nowrap; 设置不换行 
      5.2 text-overflow: ellipsis; 设置文字溢出时使用...替换隐藏的单词

八 行盒盒模型

1 常见的行盒:包含具体内容的元素(span,strong,em,i,img)
   2 显著特点:
     2.1 盒子沿着内容延伸
     2.2 行盒不能设置宽高,行盒高度宽度取决于内容的大小,调整行盒的宽高应该使用字体大小,line-height 设置
     2.3 内边距(填充区) 水平方向上有效,垂直方向上只会影响背景不会占据实际空间
     2.4 边框 水平方向上有效,垂直方向上只会影响背景不会占据实际空间
     2.5 外边距 水平有效,垂直方向不会实际占据空间
   3 行块盒
     3.1 display:inline-block 的盒子
         3.1.1 不独占一行,盒模型中所有尺寸都有效
     3.2 空白折叠发生在行盒内部或行盒之间    
   4 可替换元素和非可替换元素
     4.1 大部分元素页面上显示的结果取决于内容元素称为非可替换
     4.2 少部分元素,页面上显示的结果取决于属性称为可替换元素(img,video,audio)
     4.3 可替换元素类似于行块盒
     4.3 object-fit:contain(不变)/cover()/fill(跟随容器大小) 设置img,video 跟随容器显示方式

九 常规流

 1 视觉格式化模型(布局规则):页面中多个盒子排列规则
     1.1 视觉格式化模型大体上将页面中盒子的排列分为三种方式:
         1.1.1 常规流
         1.1.2 浮动  
         1.1.3 定位
   2 常规流布局
     2.1 所有元素默认情况下都属于常规流布局,总体规则:块盒独占一行,行盒水平一次排列
     2.2 包含块(containing block):每个盒子都有它的包含块,包含块(如果子元素有父元素那么包含块就是父元素的content-box的大小)决定了盒子的活动范围,排列区域,每个盒子绝大部分情况下:盒子的包含块,为其父元素的内容盒  
     2.3 块盒 每个块盒的总宽度必须刚好等于包含块的宽度,宽度的默认值是auto(将剩余空间吸收掉),margin的取值也可以是auto默认值为0,width吸收能力强于margin(如果width和margin同时设置的是auto那么剩下的空间将会归width)
         2.3.1 如果宽度,边框,内边距,外边距计算后(假设width被固定),仍然有剩余空间,剩下的空间都由margin-right吸收
         2.3.2 在常规流中,块盒在其包含块中居中,可以定宽然后左右margin设置auto(让margin去吸收
     2.4 块盒 每个块盒垂直方向上的auto值
         2.4.1 height:auto 适应内容高度
         2.4.2 margin:auto 表示0 
     2.5 百分比取值
         2.5.1 padding,width,margin 可以取值为百分比,所有百分比相对于包含块(父元素的content-box)的宽度
         2.5.2 高度的百分比:包含块的高度是否取决于子元素的高度(如果父元素的高度设置为auto(父元素的高度依靠子元素撑开)而子元素的高度值设置为50%导致冲突),设置百分比无效
         2.5.3 包含块的高度不取决于子元素的高度(父元素的高度设置为固定值),百分比相对于父元素高度
     2.6 上下外边距的合并
         2.6.1 两个常规流块盒,上下边距相邻会进行合并,两个外边距取最大值,父子元素也会合并,只要将父元素和子元素之间不相邻设置border,padding   

十 浮动

 1 应用场景
     1.1 文字环绕
     1.2 横向排列
   2 浮动的基本特点
     2.1 修改float属性值为:
         2.1.1 left:左浮动元素靠左靠上
         2.1.2 right:右浮动元素靠上靠右  
     2.2 当一个元素浮动后元素必定是块盒(更改display属性为block)
     2.3 浮动元素的包含块,和常规流一样为父元素的内容盒
   3 盒子尺寸
     3.1 宽度为auto时,适应内容宽度(适应浮动元素的内容宽度)
     3.2 高度为auto时,与常规流一致,使用内容高度(适应浮动元素的内容宽度)
     3.3 margin为auto时,为0(不会像常规流一样吸收剩余空间)
     3.4 边框,内边距,百分比设置和常规流一样
   4 盒子排列
     4.1 左浮动的盒子靠上靠右列
     4.2 有浮动的盒子靠上靠右排列
     4.3 浮动盒子在包含块中排列时,会避开常规流盒子 
     4.4 常规流块盒在排列时,无视浮动盒子
     4.5 行盒在排列是会避开浮动盒子
     4.6 如果文字没有在行盒中浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒
     4.7 外边距合并不会发生
   5 高度坍塌
     5.1 高度坍塌根源:常规流盒子自动高度(根据内容高度计算),在计算时不会考虑浮动盒子
     5.2 解决方法:清除浮动,涉及CSS属性:clear:none(默认值)/left(清除左浮动,该元素必须出现早前面所有左浮动盒子得到下方)排列十参考浮动盒子的位置/right(清除右浮动,该元素必须出现早前面所有右浮动盒子得到下方)/both(清除左右浮动),使用其他元素撑开父元素的高度并将浮动元素放置在该元素的上方
   6 浮动元素产生了浮动流
     6.1 所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和文本类属性的元素以及文本都能看到  

十一 定位

   1 手动控制元素在包含块中的精准位置
     2 possition属性值(一个元素只要positiond的取值不是static,认为该元素是一个定位元素)
       2.1 默认值:static,静态定位
       2.2 relative:相对定位
           2.2.1 不会导致元素脱离文档流 只是让元素在原来位置上进行偏移
           2.2.2 可以通过四个CSS属性设置其位置,设置的值是距离原来位置的距离,盒子的偏移不会对其他盒子造成任何影响(视觉效果上的改变)
                  2.2.2.1 left
                  2.2.2.2 right
                  2.2.2.3 top
                  2.2.2.4 bottom
       2.3 absolute:绝对定位
           2.3.1 盒模型宽高为auto,盒子尺寸适应内容
           2.3.2 包含块变化:找祖先元素中第一个定位元素,该元素的填充盒为其包含块,若找不到其包含块为整个网页
       2.4 fixed:固定定位
           2.4.1 其他情况和绝对定位完全一样,但包含块不同,固定定位其包含块固定为视口(浏览器的可视窗口)
       2.5 定位元素会脱离文档流(相对定位除外)
       2.6 一个脱离了文档流的元素
           2.6.1 文档流中的元素摆放时,会忽略脱离了文档流的元素
           2.6.2 文档流中元素自动计算高度时,会忽略脱离了文档流的元素
       2.7 绝对定位和固定定位中,margin为auto时会自动吸收剩余空间
       2.8 绝地定位和固定定位一定是块盒
       2.9 绝对定位,固定定位元素一定不是浮动(如果一个元素同时设置了float和absulte 那么浏览器会强制设置float为none没有浮动)
       2.10 没有外边距合并

     3 定位下的居中
       3.1 某个方向居中:
           3.1.1 定宽(高)
           3.1.2 将左右(上下)距离设置为0
           3.2.3 将左右(上下)距离设置为auto 
     4 多个定位元素重叠时
       4.1 
     5 堆叠上下文
       5.1 设置z-index的值越大元素越靠前,只有定位元素设置z-index有效,z-index可以是负数,如果数负数则遇到常规流元素会覆盖(常规元素会覆盖设置z-index为负数的元素)

十二 更多的样式

 1 透明度
   1.1 opacity:0-1 设置整个元素的透明度(border,background,font)
   1.2 在颜色位置设置alpha通道(rgba)
 2 鼠标样式
   2.1 使用cursor设置,设置图片 cursor:url(imgs/target.icon),auto 要设置为auto如果图片有问题使用浏览器默认的鼠标样式
 3 盒子的隐藏
   3.1 display:none 表示不生成盒子
   3.2 visibility:hidden 生成盒子,只是从视觉上移除盒子,盒子依然占据空间
 4 背景图
   4.1 通常img元素是属于HTML概念,背景图属于CSS的概念,当图片属于网页内容时,必须使用img元素,当图片属于网页美化时必须使用背景图,取决于使用的含义
   4.2 涉及的CSS属性
       4.2.1 background-image:url()  设置背景图 url中的路径相对于当前的.css文件
       4.2.2 background-repeat:no-repeat/x(x轴重复)/y(y轴重复)/repeat(x,y轴重复) 背景图默认情况下,背景图会在横坐标和纵坐标中重复
       4.2.3 background-size:contain/cover/(x,y)横向变化,纵向变化/ 设置大小
       4.2.4 background-position:横向(水平) 纵向(y轴) 设置位置,当参数同时设置为center为横向,纵向居中 参数:center,top,right,bottom,left,数值(相对位置)或者百分比,雪碧图(精灵图 spirit)
       4.2.5 background-attachment:fixed(设置背景图相对于视口等同于定位中的fixed) 通常用于控制背景图是否固定
       4.2.6 背景图和背景颜色混用
       4.2.7 速写属性:background:url() no-repeat 位置(50% 50%)/尺寸() fixed color;

十三 @规则

  1 at-rule,@规则,@语句,CSS语句,CSS指令
     2 规则
       2.1 @import "路径"; 导入另外一个CSS文件,加载引入的CSS文件
       2.2 @charset "utf-8" 告诉浏览器该CSS文件使用的字符编码集是UTF-8,必须添加到第一行

十四 web字体和图标

  1 web字体
       1.1 解决用户计算中没有安装相应字体,强制用户下载字体
       1.2 使用@font-face制作新字体
     2 字体图标

十五 块级格式化上下文

1 他是一块独立的渲染区域,他规定了在该区域中,常规流块盒的布局 简称BFC
   1.1 BFC渲染区域:这个区域由某个HTML元素创建,一下元素会在其内部创建BFC区域
       1.1.1 根元素 --> HTML元素
       1.1.2 浮动和绝对定位元素
       1.1.3 overflow不等于visible的块盒 --> 修改overflow 参数
       1.1.4 独立的:不同的BFC区域,他们进行渲染地互不干扰,创建的BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部
   1.2 BFC具体规则
       1.2.1 创建BFC元素,它的自动高度需要计算浮动元素
       1.2.2 创建BFC元素,它的边框盒不会与浮动元素重叠,如果不创建BFC元素在渲染时会忽略浮动元素,如果创建了BFC元素,该元素会自动设置margin避开浮动元素,设置BFC后该元素会自适应宽度,高度
       1.2.3 创建BFC元素,不会和他的子元素进行外边距合并

十六 布局

 1 两栏布局

十七 浮动的细节规则

 1 盒子位置
   1.1 左浮动向上向左排列,右浮动向上向右排列
   1.2 浮动何止的顶边不得高于上一个盒子的顶边
   1.3 如果剩余空间无法放下浮动盒子,则个盒子向下移动,知道具备足够的空间能够容纳盒子,然后在向左或者向右移动  

十八 行高的取值

 1 px:像素值(先计算像素值,在继承)
 2 直接书写数字,无单位的数字(先继承,在计算)
 3 em 是当前元素的字体大小(先计算像素值,在继承)
 4 百分比 是当前元素的字体大小(先计算像素值,在继承)

十九 body的背景

 1 画布 canvas
   1.1 特点:
       1.1.1 最小宽度为视口宽度,最小高度为视口高度
 2 body元素设置背景
   2.1 如果HTML有背景,body元素正常显示(背景边框盒)  ,如果HTML元素没有背景那么body元素的背景覆盖画布
   2.2 背景图 背景图的横向宽度百分比,相对于视口,高度百分比相对于HTML元素高度,背景图的值百分比,预设值横向上的位置相对于视口,背景图的纵向位置百分比预设值相对于网页高度

二十 行盒的垂直对齐

 1 行盒的垂直对齐
   1.1 给诶呦对齐的元素设置CSS属性vertical-align:预设值/百分比
 2 多个行盒垂直方向上的对齐
 3 图片的底部白边
   3.1 图片的父元素是一个块个,块盒高度自动图片底部和父元素底边之间往往会出现空白
   3.2 设置父元素的字体为font-size=0,将图片设置为块盒

二十一 参考线-深入理解字体

  1 文字
    1.1 文字是通过一些文字制作软件制作的,fontforge
    1.2 制作文字时会有几根参考线,不同的文字类型参考线不同,同一种文字类型参考线一致
    1.3 font-size 字体大小 设置的是文字的相对大小,从文字顶线到底线的距离是文字的实际大小(content-area,内容区),行盒的背景覆盖content-area
  2 行高
    2.1 顶线向上延伸的空间,和底线向下延伸的空间,两个空间相等该空间叫做gap(空隙),gap默认情况下是字体设计者决定的,top到bottom叫做virtual-area(虚拟区域),行高就是virtual-area
    2.2 line-height:normal(使用文字默认的gap)/2.3 content-area一定出现在virtual-area的中间
  3 vertical-align 一个元素如果子元素出现行盒,该元素内部也会产生参考线,默认情况下元素以基线对齐
     3.1 vertical-align:baseline(基线对齐)/middle(该元素的中线,于父元素的X字母高度一半位置对齐)/super(表示该元素的基线于父元素的上基线对齐)/sub(表示该元素的基线于父元素的下基线对齐)/text-top(该元素的最顶边vertical-area的定边对齐父元素的text-top)/text-bottom(该元素的最底边vertical-area的定边对齐父元素的text-bottom)/top(该元素的vrtical-area的顶边对齐父元素的顶边(改行中的最高定边))/bottom(元素的vrtical-area的底边对齐父元素的底边(改行中的最高底边)),行盒组合起来可以形成多行,每一行的区域叫做line-box(行框)line-box的顶边是改行内所有行盒最高顶边,底边是改行行盒的最低底边,实际一个元素实际占用高度(高度自动),高度计算通过line-box计算,数值:相对于基线的偏移量,百分比:相对于基线的偏移量,百分比是相对于自身virtual-area的高度
     3.2 line-box 是承载文字内容的必要条件,一下情况不生成行框:
         3.2.1 某元素内部没有任何行盒
         3.2.2 某元素字体大小为0  
   4 可替换元素和行块盒
     4.1 图片:基线位置位于图片的下外边距
     4.2 表单元素:基线位置在内容位置,内容底边
     4.3 行块盒
         4.3.1 行块盒最后一行有line-box,用最后一行的基线作为整合行块盒的基线,如果行块盒内部最后一行没有行盒则使用下外边距作为基线 

二十二 堆叠上下文

   1 堆叠上下文(stack context),他是一块区域这个区域由某个元素创建,他规定了该区域中的内容在z轴上的排列顺序
     1.1 创建堆叠上下文的元素
         1.1.1 html元素(根元素)
         1.1.2 设置了z-index数值的定位元素(非auto值) 
   2 同一个堆叠上下文元素在z轴上的排列(从后到前的排列顺序)
     2.1 创建堆叠上下文的元素的背景和边框
     2.2 堆叠级别(z-index)为负值的堆叠上下文
     2.3 常规流非定位的块盒
     2.4 非定位的浮动盒子
     2.5 常规流非定位行盒
     2.6 任何z-index是auto的定位子元素,以及x-index是0的堆叠上下文
     2.7 堆叠级别为正值的堆叠上下文 
   3 每个堆叠上下文,独立于其他堆叠上下文,他们之间不能相互穿插

二十三 svg

   1 如何使用
   2 书写SVG
     2.1 矩形 rect
     2.2 圆形 circle
     2.3 椭圆 ellipse  
     2.4 线条 line
     2.5 折线 poly

二十四 数据链接(data url)

   1 数据连接:将目标文件的数据直接书写到路径位置
   2 语法:data:MIME,数据
   3 意义:
     3.1 减少了浏览器中的请求
     3.2 减少了请求中浪费的时间
     3.3 有利于动态生成数据
     3.4 增加了资源的体积
     3.5 导致了传输内容增加,从而增加了单个资源的传输时间
     3.6不利于浏览器的缓存,浏览器通常会缓存css文件,js文件
   4 应用场景
     4.1 当请求单个图片体积较小,并且该图片应为各种原因不适合制作雪碧图,可以使用数据链接
     4.2 图片由其他代码动态生成,并且图片较小
   5 base64 编码方式
     5.1 通常用于将一些二进制数据,用一个可书写的字符串表示

二十五 浏览器兼容性问题

   1 问题产生原因
   2 厂商前缀
     2.1 IE:-ms-
     2.2 Chrome,safari:-webkit-
     2.3 opera:-0-
     2.4 firefox:-moz-
   3 浏览器在处理样式或者元素时,使用如下方式,直接略过
   4 谷歌浏览器的滚动条样式
   5 多个背景图中选一个作为背景
   6 css hack (根据不同的浏览器(主要针对IE)设置不同的样式和元素)
     6.1 IE中css的特殊样式
         6.1.1 *属性兼容IE5,6,7
         6.1.2 _属性兼容IE5-IE6
         6.1.3 属性值\9,兼容-E5-IE9;
         6.1.4 属性值\0,兼容IE8-IE10
         6.1.5 属性值\9\0,兼容IE9-IE10
         6.1.6 IE6的外边距,浮动元素的左外边距翻倍
   7 渐进增强和优雅降级(解决浏览器兼容性问题的思路)
     7.1 渐进增强:相适应大部分浏览器,然后针对新版本浏览器加入新的样式,书写代码时先尽量避免书写有兼容性的代码书写完在逐步加入新标准
     7.2 优雅降级:先制作完整的功能,然后针对低版本浏览器进行特殊处理

二十六 居中总结(盒子在其包含块中居中)

   1 行盒(行块盒)水平居中
     1.1 直接设置行盒(行块盒)父元素text-align:center
   2 常规流块盒水平居中
     2.1 定宽 设置左右margin:auto
   3 绝对定位的水平居中
     3.1 宽度,设置左右的坐标为0(left:0,right:0),将margin设置为auto
     3.2 实际上固定定位是绝对定位的特殊情况
   4 单行文本的垂直居中
     4.1 设置文本所在元素的行高为整个区域的高度
   5 行块盒或块盒类多行文本的垂直居中
     5.1 没有完美方案设置盒子上下内边距相同,达到类似的效果
   6 绝对定位的垂直居中
     6.1 高度固定,设置上下的坐标为0(top:0,bottom:0) margin:auto

二十七 样式补充

   1 display:list-item 设置为该属性盒的盒子本质上仍是一个块盒,但是同时该盒子会附带另一个盒子,元素本身生成的盒子叫做主盒子,附带的盒子称为次盒子,次盒子和主盒子水平排列
     1.1 涉及的CSS
         1.1.1 list-style-type:disc 设置次盒子中内容的类型(可以速写)
         1.1.2 list-style-position: 设置次盒子相对于主盒子的位置(可以速写)
     1.2 清空次盒子 list-style:none;
   2 图片失效时的宽高问题
     2.1 如果img元素的图片链接无效,img元素的特性和普通行盒一样无法设置宽高,可以设置为块盒解决
   3 行盒中包含行块盒或可替换元素(表示CSS不能完全控制)
     3.1 行盒的高度与他内部的行块盒或者可替换元素的高度无关(高度只与字体大小有关系),可以将父元素设置为块盒或者行块盒
   4 text-align:justify 表示除最后一行外分散对齐,平均分布空格
   5 制作一个三角形
   6 direction和writing-mode
     6.1 direction 设置的是开始的方向
     6.2 writing-mode 设置文字书写方向
   7 utf-8字符  

二十八 文字溢出处理

   1 溢出容器打点显示
     1.1 单行文本
          (1) 让文本失去换行功能  white-space: nowrap;
          (2) 让容器溢出部分隐藏 overflow: hidden;
          (3) 让溢出部分以...显示 text-overflow: ellipsis;
     1.2 多行文本                       

​

​

​

​
​