CSS学习总结

1，元素分类

    传统分类： 行内元素、块级元素、inline-block元素（inline元素可以跨行，inline-block不能）
    位置分类： 
            head区元素： meta link style script title base(指定基础路径)； 

            body区元素： table、div、section、article、aside、header、footer；span em strong ul ol li dl dt dd  a form input select  textarea button

   html5分类：flow元素（占据文档流的元素）和非flow元素（如meta元素）

   html元素的嵌套关系：块级元素可以包含行内元素；
                     块级元素不一定能包含块级元素（如p元素不能包含div）；
                     行内元素一般不能包含块级元素（a是例外，a可以包含div）；

   Question: 为什么a可以包含div元素？要从html规范来解释，html5中可以，html4不可以。html5重新划分了html元素的类别，行内元素是透明元素时，其能否包含块级元素，要看行内元素的父元素是否能够包含块级元素，如P只能包含 phrasing conent 类别的元素，所以 p->a->div，这种是不合法的；但是 div->a->div是合法的

    html5新的分类：https://www.w3.org/TR/html5/dom.html#phrasing-content

2，html5相对于html4的变化
2.1 如何理解html：整个html是一个文档，类似word文档；标签用来描述文档的结构；文档是有大纲的

    2.2 更加强调语义化
          新增语义化的标签：
              section ：能表达一块独立内容的区块（更细化）
              article：结构完整的区块（可由多个section构成）
              aside
              nav
          强化原有元素的语义：strong、i

    2.3 表单增强：
          新增 input 类型 ： color/email/number/tel/url/search/range/date/time/datetime-local
         表单验证
         required/pattern

    2.4 新的API(离线、音视频、图形、实时通信、本地存储、设备能力) 分类和嵌套变更（如a元素的变化）

3，关于 form 表单

   3.1 不写js就可以直接提交表单
   3.2  使用submit/reset按钮 
   3.3  便于浏览器保存表单（如密码保存，提示用户体验） 
   3.4  第三方可以整体提取值（ jquery 可以针对 form 元素整体提取值） 
   3.5  第三方库进行表单验证

4，form 表单的 enctype

   4.1 form enctype 属性区别：[参考文献][1]

   4.2 后台如何获取application/x-www-form-urlencoded的值:https://blog.csdn.net/soonfly/article/details/52082547

5，字体

   5.1 字体族：衬线字体（serif）、非衬线字体（scans-serif）、等宽字体（monospace）、cursive（手写体）、 fantasy（花体）
   5.2 多字体fallback
   5.3 自定义字体
         原理：网页上看到的字本质是一个一个的图片，用户输入的其实是一个
              编码，计算机根据编码在字体库中找到对应的字体图片，显示在屏幕上，

             通常所说的字体就是一个一个的字体库，比如黑体，它其实代表着
             一个字体图片库。我们指定字体是黑体，浏览器就会根据用户输入的编码
             到这个字体库中查找对应的字体图片，然后渲染

             基于这个原理，我们可以创建一个字体图片库，告诉浏览器这是一个
             字体库，并给他起个名字，比如：棕体。 使用时通过
                   font-family ： 棕体
             告诉浏览器，去 棕体 这个库里面查找字体图片。

             @font-face {
                    font-family: 'FontAwesome';// 指定一个字体库的名字
                    src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); 
                    font-weight: normal;
                    font-style: normal;
            }
   5.4 图标字体
             图标字体的原理和自定义字体的原理是一样一样的，只不过，字体库里面
             存的不再是文字或者字母了，而是我们精心设计的图标

6，雪碧图 Demo1-Jsbin Demo2-Runjs

   原理：雪碧图，性能优化，把多个图集中到一张图片上，减少http请求，

   通过background、background-position 属性使用图片的不同部分起到多张图的效果

7，行高 Demo1

   概念：行内框、行框、行高、底线、顶线、基线、中线

8，viewport:移动设备的分辨率高

  viewport ：手机屏幕代表的页面尺寸，如果viewport设为width=980px，就是说在当前设备上屏幕的宽度等于页面上980px的宽度

  通常移动设备的屏幕比PC小，比如说PC的屏幕宽度是980px，网页是按照
  980px设计的，在PC端显示正常。

   移动设备显示这个网页时，只能显示一部分。为了能全部显示整个网页，
   各移动端浏览器厂商将浏览器视口宽度设置为980px，这是网页能完整的
   显示了。但会出现下面的问题：

   在pc上，网页设计是根据PC的真实宽度来设计的，css中的1个px对应于
   屏幕的1个px（不一定）。而到了移动端，由于屏幕变小，但仍然要显示
   css中980个像素的宽度，于是多个css像素绘制到一个屏幕像素上，内容
   变小，而且模糊。

   这种策略出现在移动设备出现初期，网页设计通常只有针对pc的设计，
  没有移动端的设计。

   当网站有了针对移动端的设计之后，这种浏览器的行为就会导致浏览器
   不能按照我们的意图正常显示。

   通过设置 viewport 属性，让浏览器以屏幕真正的宽度渲染网页。  

9，base64优化图片

    base64将图片转为文本编码格式
    base64和性能优化 base64会增加约1/3的体积 base64减少网络请求 base64适用于小图标

10，背景 Demo-多背景叠加,网格背景

   背景图片、渐变色背景

11，边框 三角形

   图片边框
   边框特效（三角形）

12，常见布局 阮一峰Flex Demo浮动布局

   table 布局：
         display: table,table-row,table-cell
   inline-block 布局
         利用 inline-block 元素在同一行，并且可以设置 width 的特性
         像排文本一样排元素
         不需要考虑清除浮动
         要考虑清除间隙
   flex 布局
         最新的布局方式，存在兼容性问题
   浮动布局
          利用浮动元素脱离文档流的特性

13，css 属性分类 伪元素清除浮动Demo BFC清除浮动 绝对定位-破坏性

  非布局属性：行高、背景、字体、字重、颜色、大小、行高 、边框、滚动、换行 粗体、斜体、下划线 其他

  布局属性：padding、border、margin、width、height、display、position、float

  absolute绝对定位：包裹性、破坏性、位置跟随---来自张鑫旭
  要注意一个点：把一个元素设置为absolute后，如果不为其设置top、left，其位置
  保持在原地不动，即它的定位会考虑它前面的元素的位置，但是其后面的元素并
  不会考虑浮动元素的位置，会与浮动元素重叠--位置跟随特性。

  此外，如果绝对定位元素位于父容器的最后位置，并且父元素有高度，由于父元
  素的高度不会考虑到绝对定位元素，因此，绝对定位元素有可能因为超出父元素
  的盒模型而不可见。

  清除浮动：因为浮动会导致高度塌陷，所有有些情况需要清除浮动，让浮动元素
  撑起父容器的高度。

  原理：高度塌陷的原因是父容器在布局时不考虑浮动元素的尺寸
  思路一： 让父元素变成BFC，则其需要负责内部所有元素的布局，包括
  宽高计算
  思路二：在父容器的最后添加一个伪元素，并清除浮动，display：block使其
  成为块级元素

14，产生BFC的情况

     根元素或其它包含它的元素
     浮动 (元素的 float 不为 none)
     绝对定位元素 (元素的 position 为 absolute 或 fixed)
     行内块 inline-blocks (元素的 display: inline-block)
     表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
     表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
     overflow 的值不为 visible的元素
     弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

15，响应式布局

      目标：
           在不同设备上正常展示
           主要处理对不同屏幕大小的适配
      主要方法：
           隐藏、折行、自适应空间
           rem、viewport、midea query

16，能做特效的 css 属性

      background、box-shadow、border-radius、box-shadow

17，box-shadow Demo 特效猫

      box-shadow: 0px 0px 0px 10px  inset;
      第四个参数可以是负值，可以放大缩小阴影

18，clip-path 使用 svg 裁剪

19,3d、2d变换

     transform; translate/translatex/translateY/rotate/scale

20，默认样式

      默认样式的意义；
      默认样式举例：body的margin；ul>li的padding
      默认样式带来的问题：默认样式的效果不是我们想要的效果
      解决默认样式的问题：css reset

21，doctype的作用

      浏览器以标准模式渲染
      浏览器知道元素的合法性

22，em和i

     em是语义化的标签，起强调作用；
     i表示斜体，是纯样式标签

23，语义化的意义：

     开发者容易理解，便于维护
     机器容易理解结构
     有助于seo

24，自闭合元素

    表单元素input
    图片img
    br hr
    meta link

25，html和dom的关系

  html是死的，是静态的
  dom由html解析而来，是活的
  js可以维护dom

26，property 和 attribute的区别

 attribute是似的的，是html中标签的属性
 property是html解析成dom之后的结点的属性，比如在input输入框中输入一个值，改变的是property而不是attribute

27，你必须知道的css

选择器：用于匹配html元素，分类和权重，解析方式和性能（body div .nav，从右往左解析），值得关注的选择器
分类：伪类/类，元素/伪元素，属性选择器，id选择器，组合选择器，通用选择器，否定选择器

1，非布局样式
字体（font、font-family、font-weight）
行高（line-height影响整行的高度，不影响文字大小，影响行间距）：line-height、text-align
背景（背景颜色：hsl，hsla，rgb，rgba，background：linear-gradient,background-repeat,雪碧图，background-position,background-size(用于多分辨率的适配)，base64（使用方式：background:url(base64)））
border(border-image:url(./bc.jpg) 30 repea/round)
换行（overflow-wrap(是否保留单词)，word-break 针对多字节文字，white-space空白处是否断行,white-space:no-wrap，不换行）
装饰性属性：text-decoration、font-weigth、font-style