• 2.1 CSS 简介特性

    1.CSS 简介
    • CSS的全称为:层叠样式表(Cascading Style sheets )。
    • CSS3是CSS2的升级版本，它在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。.
    • CSS3在未来会按照模块化的方式去发展: CSS current work & how to participate
    • CSS3的新特性如下:
      • 新增了更加实用的选择器，例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。
      • 新增了更好的视觉效果，例如:圆角、阴影、渐变等。
      • 新增了丰富的背景效果，例如:支持多个背景图片，同时新增了若干个背景相关的属性。
      • 新增了全新的布局方案――弹性盒子。
      • 新增了Web字体，可以显示用户电脑上没有安装的字体。
      • 增强了颜色，例如: HSL、HSLA、RGBA几种新的颜色模式，新增opacity属性来控制透明度
      • 增加了2D和3D变换，例如:旋转、扭曲、缩放、位移等。
      • 增加动画与过渡效果，让效果的变换更具流线性、平滑性。
    2.私有前缀
    • 什么是私有前缀：例如"-webkit-"
    1. div {
    2.     width: 400px;
    3.     height: 400px; 
    4.     -webkit-porder-radius: 20px;
    5. }
    • 为什么要有私有前缀
      • W3C标准所提出的某个CSS特性，在被浏览器正式支持之前浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了。
      • 查看CSS3兼容性的网站：www.caniuse.com
    • 常见浏览器私有前缀
      • Chrome浏览器: -webkit-
      • Safari浏览器: -webkit-
      • Firefox浏览器:moz-
      • Edge浏览器: -webkit-
    3.CSS 样式表
    • 行内样式：写在标签的style属性中
    • 内部样式：写在style标签中
    • 外部样式：
    • 样式表的优先级：行内 > (内部 = 外部)(后来者居上)
    4.长度单位
    • px：像素
    • em：相对元素font-size的倍数。
    • rem ：相对根字体大小(html)
    • %：相对父元素计算。
    • vw视口宽度的百分之多少10vw 就是视口宽度的10%。
    • vh视口高度的百分之多少10vh就是视口高度的10%。
    • vmax视口宽高中大的那个的百分之多少。(了解即可)
    • vmin视口宽高中小的那个的百分之多少。(了解即可)
    • CSS中设置长度,必须加单位，否则样式无效!
    5.CSS 三大特性
    • 层叠性
      • 如果发生了样式冲突，那就会根据一定的规则（选择器优先级)，进行样式的层叠（覆盖)。
    • 继承性
      • 概念:元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
      • 规则:优先继承离得近的。
      • 常见的可继承属性: text-?? 、font-?? 、line-?? 、color ......
    • 优先级
      • !important>行内样式>ID选择器>类选择器>元素选择器>通配选择器>继承的样式
      • 权重：(a,b,c)
        • a：ID选择器的个数
        • b：类、伪类、属性选择器的个数
        • c：元素、伪元素选择器的个数
      • 注意事项：
        • 计算权重时，并集选择器的每一个部分是分开算的!
    6.元素显示模式
    • 块元素(block)

    主体结构标签: .

    排版标签:

    ~

    、
    .

    . 

     . 
     

    列表标签: 
       . 
         . 
      1.  、 
         . 
         、 
         

        表格相关标签: 
         , <tbody> ,  ,  ,  . 
         

        < form >与
         

        •  
  
          • 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
          • 默认宽度:撑满父元素。
          • 默认高度:由内容撑开。
          • 可以通过CSS设置宽高。
         

        • 行内元素(inline)
         

        文本标签: < br >、< em >、 、 、、 、
         

        与
         

        •  
  
          • 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
          • 默认宽度:由内容撑开。
          • 默认高度:由内容撑开。
          • 无法通过CSS设置宽高。
         

        • 行内块元素(inline-block)
         

        图片: 
         

        单元格: 
         . 
         

        表单控件:  .