html入门基础（六）

2019.09.17

入门基础

content宽度和高度

• 使用宽度属性width和高度属性height可以对盒子的大小进行控制，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

 /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：
1.width，height仅使用块级元素，对行内元素无效

2.计算盒子总高度时，还应考虑上下两个盒子的外边距合并情况

3.如果一个盒子没有给定宽度和高度时，padding不会影响盒子大小

盒子模型布局稳定性

width > padding > margin

1.margin外边距合并问题，ie6 margin加倍的bug，所以最后使用

2.padding会影响内盒的大小，经常使用加减法

3.width 宽度剩余法，高度剩余法

CSS3盒模型

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

1.默认设置，优先保证内部的内容所占区域不变
2.boder-box  优先保证自己盒子的所占区域不变，对内容进行压缩

盒子阴影

• 前两个属性一定要有，其他的可以省略
• 外阴影(outset默认值，内阴影inset

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

浮动

• 浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

注意：
1.子盒子浮动不会压住padding
2.浮动的元素会找最近的父级元素对齐，不会超出内边距的范围

浮动的目的是，让多个块级元素同一行显示

清除浮动

清除浮动的方法

语法：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

额外标签法

优点:通俗易懂，书写方便
缺点：添加了许多无意义的标签，结构化更差。

父级添加overflow属性方法

可以给父级添加overflow：hidden auto scroll
优点:代码简介
缺点：内容增多的时候，不会自动换行，无法显示溢出元素

使用after伪元素清除浮动

		p:after {
			content: "456";
		}
	/*	伪元素产生出的是  行内元素
		在整个父元素后面内容   转成块元素  
		高度为0   隐藏掉点  清除浮动*/

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

:after 的升级版

优点：符合闭合浮动的思想，结构语义化正确

缺点: ie6不支持after，

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

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

清除浮动：clear:both 块级元素下移，直到两边没有浮动元素
闭合浮动：使浮动元素闭合，使父元素能够包含浮动元素，从而减少浮动影响，代码更简洁