深度解析HTML+CSS

HTML标签分类

根据在页面中呈现的样式分类为：块元素，行内元素，行内块元素。

块元素 (block)

例如：div、p、h1-h6、html、无序列表ul，li、有序列表ol、li、项目列表dl、dt、dd

特点：独占一行，可以设置宽高

行内元素 (inline)

例如：a、b、i、em、span

特点：在一行内显示，不可以设置宽高

行内块元素 (inline-block)

例如：img、input

特点：在一行内显示，可以设置宽高

元素之间可以通过display：(名称)互相转换

css选择器优先级

!important > 行内样式>ID选择器(100)> 类选择器(10)> 标签(1)

盒子模型

盒子模型包含：

内容(content)、内填充(padding)、边框(border)、外边距(margin)

盒子模型的问题：

1. 默认情况下大部分元素的margin/padding都为0;但是有一些元素的margin/padding不为0，例如：h1-h6标签\p\body\ul,li\dl,dt,dd\ol,li\input。
2. 相邻俩个块元素的margin值会重合，值会取最大
3. 行内元素的margin只是左右没有上下。line-hight调高度
4. margin可以为负数，但是padding不可以
5. 当两个元素发生嵌套关系，如果父元素没有上边框，上padding，父子元素之间没有其他呢绒时，此时子元素的margin-top值会作用到父元素身上。
   解决办法：
   ·给父元素添加padding-top代替margin-top
   ·给父元素添加overflow：hidden

页面层级

文档层，浮动层(float)，定位层(position)

浮动引发的问题：浮动的子元素撑不开父元素

//解决办法
//超出部分影藏
.{
overflow: hidden;
}

//伪类元素
.clearfix:after { 
	content:"."; 
	clear: both; 
	height: 0; 
	overflow: hidden; 
	visibility: hidden; 
	display: block; 
}
.clearfix { 
	zoom: 1;
}

定位的层级关系

• 相对定位
  语法：position: relative;
  特点：相对自身去定位;保留自身原来的位置(文档层中的位置);脱离文档流
• 绝对定位
  语法：position: absolute;
  特点：相对于拥有定位属性的父级元素去定位。如果父元素没有定位属性，会一直向着上一级寻找，知道找到拥有定位属性的元素停止。如果一直找不到，则会相对于html去定位。完全脱离文档流
• 固定定位
  语法：position: fixed;
  特点：相对于浏览器的四个边去定位，完全脱离文档流。
• 定位属性的五个样式：top，right，bottom，left，z-index(层级)。

flex布局