CSS 学习笔记

0. CSS 基础入门
一门标记语言，不难，靠记、靠练习
三种引入方式(外部样式表、内部样式表(style标签)、行内样式(style属性))，禁用@import.
结构(html)、表现(CSS)、行为(JS)分离。
分离是为了更好地维护性,所以推荐外部样式表。
End CSS 基础入门


1.CSS选择器
1.1.选择器种类：
单一选择器：通用选择器、标签选择器、类选择器、ID选择器、属性选择器(属性是可以随便写的，如[dd=dd1])、伪类选择器。
复合选择器：后代选择器(空格)、子选择器(>)、选择器分组(,)、兄弟选择器(+)、组合选择器(div.nav)。
原来[]是属性选择器,div.nav表示所有class包含(不是等于)nav的div的元素(即首先它要是div元素，并且它要包含class="nav"的属性)，#logo+p表示前一个相邻同级元素id=logo的p.
1.2.选择器优先级：
单一选择器：                 ID >类=伪类=属性 > 标签(div)>*

复合选择器： 

 

范例	style	ID	类/伪类/属性	标签	*
div.nav		0	1	1	0
#head .nav .logo		1	2	0	0
#a p .info li a:hover		1	2	3	0

(style最高，也就是当选择后样式不起作用时，可增加一个类提高优先级，如
    .inner p span {
      color:chocolate 
    }
    .outer .inner p span {
      color:green
    })
当选择器优先级相同时：后面>前面(原理就在于，当优先级相同时，后面就会把前面相同的属性做一次重写覆盖)

知道但不要用!important
优先级的错误说法：内联式>嵌入式>外联式;离得越近，优先级越高。 


3.最佳实践：
最小影响原则：利用命名空间防止影响别人；别用单一的标签选择器
最短组合原则：<5
最大重用原则
其他：不要出现两个id选择器的组合；命名语义化
End CSS选择器


2.CSS属性(布局)
属性-布局：
属性简述：
 1.分类(定位(在哪显示,position,z-index,float,clear,display,visibility)，盒模型(占多大空间)，字体/文本(内容样式),其他(杂项))
 2.最佳书写顺序
 3.简写(margin是四个的简写，font则是6个的简写，font-style/variant/weight是粗细/size/height/family)
布局：
 1.普通文档流
 2.盒模型
 3.定位
    显示模型(display)
    绝对定位&相对定位&固定定位(position)
    浮动布局(float)
普通文档流：
 块元素:每个元素占据一整行，自上而下
 行元素:从左到右，排满换行。
 行元素的边框效果：上下边框与容器重叠(行元素在垂直方向属性失效的一个表现);
 
盒模型：
 所有元素都可以看成一个盒子
 注意：
 1.块元素的margin垂直方向的重叠：相邻margin重叠(以最大为准)，父子同向(垂直方向)margin重叠(没有border才会重叠，而不显式设置border的话，就是没有border的情况，这就是那的解释)。
 2.行元素的垂直方向属性失效(padding上下有效啊？)，width失效(宽度取决于内容)。 


显示模式：display
 block:
  占满父容器(不是整个文档)一整行，不会和任何相邻元素共享一行
  宽度取决于父级容器，或width设置,高度？
  具备完整的盒模型(任何一个属性都是有效的，总共就5个盒模型属性)(@)
 inline(width/height都无效,margin-top/margin-bottom也无效):
  和其他相邻的行级元素共享一行，一行排满就换行(*)
  宽度取决于内容，所以设置width无效
  盒模型的垂直方向属性无效(height无效,margin-top无效，而padding-top有效)
 inline-block:
  和其他相邻的行级元素共享一行，一行排满就换行(*)
  宽度取决于内容，或width设置(hybrid)
  具备完整的盒模型(@)
 none:
  不可见
 注意：
  块元素和行元素特点
  块元素和行元素属性可以通过设置来改变
  inline-block的意义，横向布局
  元素的嵌套规则(记住一点:行元素里不能有块元素)
  display:none和visibility:hidden区别


位置定位position(配合left,right,top,bottom,z-index定位)：一旦加position就要考虑z-index的值
 static(静态定位，*(即所有元素)默认值)：
  特点：设置left,right,top,bottom,z-index无效
 relative(相对定位,display属性不失效)：
  相对自己原本位置偏移，偏移量通过left/right/top/bottom定位
  未脱离原先文档流，占居的空间保留，后面的元素不补位
 absolute(绝对定位,一旦加absolute，display属性失效,有完整盒模型)：
  相对外层第一个非static属性(即默认值)的祖先元素的边框内测(不是padding内侧)，偏移量同上
  脱离原先文档流，占居的空间释放，后面的元素会补位
 fixed(固定定位,一旦加fixed，display属性失效,有完整盒模型):
  相对浏览器窗口定位，偏移量同上
  脱离原先文档流，占居的空间释放，后面的元素会补位。
 注意：
  relative/absolute/fixed的特点和意义
  absolute+magin实现relative效果(一个脱离一个不脱离且absolute后不设置left/top/right/bottom,它的左上角位置不会改变，像加了float:left一样(因为脱离文档流了嘛)，有时候蛮有用的)
  z-index的使用(总是对比同级元素的层高(即z-index值),值相同时后面的覆盖前面的)


浮动定位:float(一旦加float后，display属性失效)
属性值：
 none(默认值)
  无
 left(向左浮动):
  浮动在父容器padding以内左上角(区别于absolute)
  自身宽度由内容决定，或width设置(类似inline-block)
  半脱离文档流，会影响同一个父容器内其他行元素的位置 
 right:
  同上，只是向右浮动
 配合使用：clear,清除浮动
 注意：
  float属性对自身的影响(宽度由内容定或width设置，有完整的盒模型(其实就是了inline-block了，除了没有4px的间隔))
  float对相邻元素的影响 (半脱离文档流，位置脱离出来了，但相邻元素显示的文本却受到影响，
            position:absolute是完全脱离，不影响后面的元素中文本的显示)
  float对父容器的影响(里面的元素都是float时，父容器高度会塌陷)
  通过伪元素来清除浮动clear(div:after{content:"";display:block;clear:both}在父元素里面的最后的位置加了个内容为空)
  float的意义:给行元素设置float，则具备完整的盒模型，连4px间距也没有了。
  横向布局有两种实现方式：inline-block、float;
End CSS属性(布局)


3.CSS属性(内容)
字体文本：
font：
    font-weight:normal(400),bold(700),bolder(900),lighter(100),这些大小有些字体支持，有些不支持
    font-size:12px,单位:px,em(当前容器字体大小),rem(body容器的字体大小)
    line-height:1.5em,单位:px,%,em
    font-family:支持第一种显示第一种，直到支持的为止
    px,%,em,rem,cm,... 
    line-height通常用于垂直方向上的居中,值为容器高度，水平方向上的居中用text-align:center.
color:
    #ff0000(==#f00,简写形式)/red(预定义颜色值)/rgb(255,0,0)(rgba是加了透明度)/hsl(hsla也一样)
    还有一种颜色，叫transparent,border-top-color:transparent;与border-top:transparent;不同。
    假设：#ffffff是不是与#RRGGBB对应的？
text:
    text-align:left/center/right;
    text-decoration:normal/underline/line-through
    text-indent:2em
    vertical-align:baseline/top/middle/bottom
    行级元素在垂直方向的对齐问题，都可以用vertical-align实现,这个行级元素是多个情况，不是你想的单个垂直居中。
    原来vertical-align的对齐和line-height的对齐还是有区别的，详见vertical-align.html
    white-space:nowrap/pre/normal...主要是用来处理空格，当包含源代码的时候比较实用。
    word-break:normal/break-all/keep-all
    word-wrap:normal/break-word


背景
background:是background-color/image/repeat/postion的简写，position为百分比，是图片的50%的位置与容器的50%的位置对齐


列表
list-style:是list-style-type(none/disc/circle)/postion(inside/outside)/image(url(''))的简写,原来通过设置ul的margin:0;就可以去掉前面的空隙。


表格
    border-collapse:collapse;就是边框合并的意思，不出现边框与边框的空隙。
其他
cursor:pointer
overflow:hidden/scroll
outline:10px solid #f00 只是光晕
End CSS属性(内容)


4.CSS进阶
兼容性：
    理解：一致性(感性)>>渐进增强&优雅降级(理性)
    方法：Doctype,Hack,浏览器私有属性,响应式
        一定要写Doctype，否则，IE启动怪异模式
        CSS Hack通过对CSS声明中添加特殊字符来实现对不同浏览器做单独声明，慎用，除非是某个浏览器的可用性问题
        IE条件注释与hack不同
        浏览器私有属性：-moz-(firefox),-webkit-(chrome,safari)，-o-(opera),-ms-(IE),即提前实现未被REC的属性
        加上自己的私有属性，两手准备，万一不被REC，则再实现一个和REC一模一样的，不加前缀，被REC则去掉前缀，另外也可以实现
        自己认为不错的属性，也加上自己的前缀。
    响应式：
        背景：智能手机及平板电脑的爆发，屏幕分辨率的泛滥。
        争论：响应vs定制
        思路：布局响应式+组件适应性
        实现：media query
        @media screen and (min-width: 400px) {
            .topic {
                width:400px;
            }
        }
性能
    样式文件：
        位置尽量放在<head>里
        至少放在要定义的结构前面(这样不会出现一开始无样式、闪动的状态，就像js文件要放到最后一样)
        合并，压缩(减少体积，提升性能)
    选择器：
        查询解析顺序(一定要记住这个顺序)：从右向左，如#header div{}
        所以少用标签选择器结尾，如:#main li{}
        少用后代选择器，多用子选择器(.list>li(只查询一层)优于.list li(会查询li的所有祖先))
        减少层级
        避免冗余(.main p #title{}(id本身就是惟一的，在查询祖先中的p和#main完全没有意义))


    属性：
        多用简写
        多利用属性继承(如果一个大容器里面每个元素字体都是红色，就是在大容器里定义颜色，这样会继承到每一个子元素)
        背景图片合并(css sprite)
        少用CSS expression
维护性
    less,sass
    规划：reset,base(基础样式),layout(布局),mods(模块),components(组件),theme
        避免就一个main.css
        按页面分文件，公用的部分提取出来，@import(less)进来,html只引入一个入口文件
    库(Bootstrap,BUI,xmixins(google))，使用库的好处是样式可以直接使用，坏处是当样式不满足要求时在原有的样式修改会很麻烦
CSS3
    圆角：border-radius
    投影：box-shadow
    变换：transform
    过度：transition
    动画：animation
    透明度：opacity
End CSS进阶