CSS+HTML基础复习

五十题

高度塌陷

• 现象
  
• 原因：子元素设置float：left脱离文档流，，子元素不撑开父元素，页面混乱
• 解决办法
  1overflow:hidden;添加给父元素。
  影响整体页面布局，若父元素也有父元素呢？总不能一直浮动到body吧？触发BFC，不会被浮动元素遮盖也会被子元素撑开，BFC的区域不会与float box重叠
  BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
  满足下列条件之一就可触发BFC块级格式化上下文 (Block Fromatting Context)

1. 根元素，即html
2. float的值不为none（默认）
3. overflow的值不为visible（默认）
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed

2

添加一个清除浮动的子元素，添加无意义标签，不易于后期维护，违背了结构和表现分离的标准
3 使用伪类在后面加一个空白元素,再对其清除浮动,原理与添加div一样

.box1:after{
				content: "";/*添加内容*/
				display: block;
				clear: both;
			}

H5新增

点击此处

CSS3新增特性

点击此处

css3子元素选择器

点击此处

样式权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1

!important > 内联样式>ID选择器(#id)>类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]>元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)>通用选择器(*)>继承的样式

居中

点击此处

行内元素及块元素

点击此处

浏览器渲染原理

三栏布局