盒模型

1
2

/* content-box */
box-sizing:border-box;

故名思议就是我们在页面定义width以及height的时候如何计算。
默认的模型content-box,即定义的就是content里的width、height.
IE里的诡异模型即border-box，即定义的width = content+padding+border
height同理。

flex布局

vertical-align会失效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

display:flex;
/*flex:flex-grow,flex-shrink,flex-basis*/
flex: 2 2 10%;
/* 属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
*/
/*作用于item
order
flex-grow
flex-shrink
flex-basis
flex
align-self
*/

定位

1
2

/*relative|fixed|static*/
position:absolute;

relative相对于自身，但是自己的位置依旧霸占着
fixed相对于浏览器窗口
absolute相对于离他最近的有定位的父元素
z-index很关键

float布局

1
2

/*right|none*/
float:left;

BFC

闭合浮动

圣杯布局、双飞翼布局

三栏布局，左右两边固定，中间自适应
浮动+负margin

响应式布局

• Css3 Media Queries
  max-width,min-width,max-device-width

  1 2 3 4 5 6

  /* 大于1200px的屏幕则这样子显示 */ @media screen and (min-width:1200px){ .style { background:#ccc; } }

• link里的media来指定使用条件

  1	<link rel= "stylesheet" media= "only screen and (-webkit-min-device-pixel-ratio: 2)" type= "text/css" href= "style.css" />

• viewport

  1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 使用百分比定义宽度、em定义字体大小

元素居中

参考

flex布局属性介绍