HTML——CSS(display)+网格布局（流式，浮动，绝对定位）

目录

1. CSS(display)
2. 网格布局（流式，浮动，绝对定位）

---

 

1. CSS(display)

   ---

   CSS  
   	1. 标签的显示状态 display
   		标签的显示模式的分类： 块级标签(block)  行内标签(inline) 行内-块级标签(inline-block)
   		
   		块级标签block
   			标签独占一行  宽度默认与父标签等宽 高度随着内容自适应  设置宽高时有效
   				例如 div  p  li  tr  body
   		行内标签inline
   			不会独占一行的 直到父标签宽度不够 内容才会换行  宽高是随着内容自适应的
   			设置宽高无效
   				例如 span b i a font
   		行内-块级标签inline-block 
   			不会独占一行 直到父标签宽度不够 内容才会换行 宽高是随着内容自适应的
   			设置宽高有效
   					例如 img
   		
   		可以通过display的样式修改标签的状态
   			需求： 就像设置span 宽高有效 但是不会独占一行
   					p标签 设置宽高无效 宽高随着内容自适应
   					
   					修改行内标签的特点比较多一下
   		display还有一个值 为none  隐藏标签 隐藏标签之后 被隐藏的标签的位置是不会保留的

    

2. 网格布局（流式，浮动，绝对定位）

   ---

   网页布局
   	布局分类：流式布局(标准文档流)   浮动布局(float)  绝对定位布局(position属性)
   			
   			流式布局
   				从上到下 从左到右输出文档内容
   				是有块级元素 或者 行内元素 或者 行内块级元素组成的
   			浮动布局float
   				这种布局会脱离流式布局(脱离了标准文档流)
   						以坐标系为例 讲解
   							流式布局  在xy平面上布局的标签 （z=0）
   				浮动布局 会脱离流式布局
   					浮动布局就是  在xy平面上布局的标签 z大于0的
   						浮动布局的元素就有可能会遮盖住流式布局的元素
   							例如 流式布局  （10， 20， 0）
   								浮动布局   (10, 20 , 1)
   					在浮动布局的基础上 ， 标签就没有块级和行内之分了
   						浮动布局的标签的大小都是有内容自适应 而且设置宽高有效
   						
   				因为浮动布局的维度比流式布局维度高 会出现遮盖流式布局的情况出现。 这个问题怎么解决？？？
   					 给被遮挡的元素添加 clear：both
   					 
   				问题：
   					在一个容器中有流式布局的元素 还有浮动布局的元素
   					因为浮动布局 导致容器的高度 并没有把浮动布局的标签包含在内， 这个问题怎么解决：
   						在浮动布局的下方 添加一个标签 这个标签也要在容器中
   						布局的时候这个标签不能被浮动布局的标签遮挡， 所以要给这个标签添加clear清除浮动 在浮动布局的下方开始布局。那么就可以通过这个标签的设计将容器的高度拉伸 将浮动布局的元素包含在内
   					
   					
   	
   	隐藏标签
   		display: none 
   		visibility:hidden
   		opacity:0
   	
   定位布局
   	position这个属性
   		有四个值：	
   			static  --- 标签默认的就是static 就是流式布局
   			relative -- 相对定位
   				参照物：标签原本的位置
   					在标签原本位置的基础上进行移动
   					不会脱离流式布局
   			absolute -- 绝对定位  脱离流失布局
   				参照物：首先先看该标签的先辈标签中是否有设置有效的定位属性值(除了static都是有效的)， 如果有的话 就以该先辈标签为参照物进行定位。 否则就以body为参照物进行定位
   			fixed --- 固定定位 脱离流失布局
   				参照物：以窗口为参照物的
   				 ---- 页面找那个广告的设置
   				 不管文档怎么上下移动 就相当于窗口定位在固定位置
   		
   			当设置有效的定位属性后 标签相对于参照物如何进行定位：
   				当设置有效的定位属性后 会启动top  left right bottom这几个属性。 
   				top: 正数：相对于参照物向下移动的位移
   					负数：相对于参照物向上移动的位移
   				left: 正数：相对于参照物向右移动的位移
   					负数：相对于参照物向左移动的位移
   				right:正数：相对于参照物向左移动的位移
   					负数：相对于参照物向右移动的位移
   				bottom:正数：相对于参照物向上移动的位移
   					负数：相对于参照物向下移动的位移
   				z-index  设置z轴层次的位移值。 值越大 标签相对于咱们的视角就越靠前