learn-css

a css note

Emmet语法（html部分）

1.生成标签直接输入标签名按tab键即可 比如 div 然后按tab键，就可以直接生成<div></div>   
2.如果想要生成多个相同的标签 加上*就可以了 比如 div*3    
3.如果有父子级关系的标签，可以用ul>li就可以了   
4.如果有兄弟级的标签，用+就可以了 比如div+p   
5.要生成带有类名或者id的,直接.demo或者#demo(id) 默认生成<div class="demo"></div>   
6.如果要生成的div类名是有顺序的，可以使用自增符号$     
7.如果想要再生成的标签内写内容可以使用 div{内容}   

css的元素显示模式

1.块级元素（h1,p,div,ul,ol,li等）：   
   1）比较霸道，自己独占一行    
   2）高度，宽度，外边距以及内边距都可以控制   
   3）宽度默认是容器（父级宽度）的100%    
   4）是一个容器及盒子，里面可以放行内或者块级元素    
   5）文字类的元素内不能使用块级元素，即不能<p><div></div></p>,h标签等也不行   
2.行内元素（a,strong,b,em,i,del,s,ins,u,span等）：   
   1）相邻行内元素在一行上，一行可以显示多个   
   2）高，宽直接设置是无效的   
   3）默认宽度就是他本身内容的宽度   
   4）行内元素只能容纳文本或其他行内元素   
   5）链接里不能在放链接   
   6）特殊情况链接a里面可以放块级元素    
3.行内块元素（img,input,td等）：他们同时具有块级元素和行内元素的特点         

css选择器的权重

选择器                  选择器权重       
继承或者*                0,0,0,0        
元素选择器               0,0,0,1       
类选择器，伪类选择器，属性选择器     0,0,1,0     
ID选择器                 0,1,0,0     
行内样式style=""         1,0,0,0      
!important 重要的        无穷大     

网页布局的第一准则

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动    

浮动元素经常和标准流父级搭配使用

先用标准流的父元素构造出一行大盒子，之后内部使用子元素浮动排列出一个又一个
的小盒子