宁波中软实习记录006

2019 09 17

盒子模型布局稳定性

width > padding > margin

CSS3盒模型

1. content-box ：盒子模型 width + padding + boder
2. border-box：/*盒子模型即为宽度 padding 和boder 都包含再width

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

浮动

选择器{float:属性值;}
left：向左浮动
right：向右浮动
none：不浮动

清除浮动

选择器{clear:属性值;}
left：不允许左浮动
right：不允许右浮动
both：同时清除左右浮动

• 父级添加overflow属性方法
  overflow：hidden
• 使用after伪元素清除浮动

.clearfix:after {
		content: ".";  /* 内容为小点， 尽量加不要空， 否则旧版本浏览器有空隙 */
			display: block;  /* 转换为块级元素 */
			height: 0; /* 高度为0 */
			visibility: hidden;  /* 隐藏盒子 */
			clear: both; /* 清除浮动 */
		}
		.clearfix {  /* ie6.7浏览器的处理方式 */
			*zoom: 1; 
			/*  * 代表ie6.7能识别的特殊符号  带有这个*的属性 只有ie6.7才执行  
			 zoom 就是ie6.7 清除浮动的方法 */
		}

• 使用before和after双伪元素清除浮动

.clearfix:before, .clearfix:after {
			content: "";
			display: table;  /* 触发bfc 防止外边距合并 */
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}