css-day06内容

day06

复习布局
盒模型布局
width
height
padding 内间距，元素内容距离边框的空间
border 边框
margin 外边距，元素与其他元素之间的空间
box-sizing 盒子模型的类型 content-box w3c盒子，默认。
border-box IE盒子

padding和margin的取值
一个值 上下左右
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
浮动布局
将块级元素显示在一行。脱离文档流，原先位置不保留。浮动在上层。
float:left;
float:right;
float:none;
清除浮动产生的影响
兄弟元素上使用 clear:both; 来清除浮动
父元素上使用 overflow:hidden; 来清除子元素浮动对父元素产生的影响
定位布局
灵活的设置元素在页面中或者视口区的位置。
使用position属性。
静态定位 static 默认
相对定位 relative
相对于原先在文档流中的位置定位，不脱离文档流，原先位置保留
固定定位 fixed
相对于视口区进行定位，固定在某一个位置，页面滚动的时候它不动。脱离文档流，原先位置不保留
绝对定位 absolute
如果有定位祖先元素，相对于离它最近的定位祖先元素进行定位。
如果没有定位祖先元素，相对于视口区的左上角进行定位。
脱离文档流，原先位置不保留
定位元素：使用相对定位或者固定定位或者绝对定位的元素
定位元素有定位属性可以使用：left right top bottom
伸缩盒布局，弹性盒布局
display:flex;
display:inline-flex;

容器上使用的属性
display:flex;
justify-content:
align-items:
align-content:
flex-direction:
flex-wrap:
子元素，项目上使用的属性
flex