006包含块

最新推荐文章于 2024-08-20 22:18:52 发布

Manta__

最新推荐文章于 2024-08-20 22:18:52 发布

阅读量121

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Manta__/article/details/104840282

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1.定位参照于谁块来定位
　　　　没有定位:包含块
　　　　相对:元素本来的位置
　　　　绝对:包含块
　　　　　　　如果最近的祖先元素中存在定位元素，则这个定位元素就是包含块
　　　　　　　如果没有，包含块为初始包含块
　　　　固定:视口
2.什么是初始包含块
　　　　是一个视窗大小的矩形，不等于视窗
　　　　滚动系统滚动条会影响初始包含块的位置
包含块

对于浮动元素，其包含块定义为最近的块级祖先元素。
对于定位，情况则没有这么简单。CSS2.1定义了以下行为:
●“根元素”的包含块(也称为初始包含块)由用户代理建立。在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元素。在大多浏览器中，初始包含块是一个视窗大小的矩形。
●对于一个非根元素，如果其position值是relative或static(相对定位，不脱),包含块则由最近的块级框，表单元格或行内块祖先框的内容边界构成。
●对于一个非根元素，如果其position值是absolute（绝对定位）,包含块设置为最近的position值不是static的祖先元素(可以是任何类型)。这个过程如下:
-如果这个祖先是块级元素，包含块则设置为该元素的内边距边界，换句话说，就是由边框界定的区域。
-如果这个祖先是行内元素，包含块则设置为该祖先元素的内容边界。在从左向右读的语言中，包含块的上边界和左边界是该祖先元素中第一个框内容区的上边界和左边界,包含块的下边界和右边界是最后一个框内容区的下边界和右边界。在从右向左读的语言中，包含块的右边界对应于第一个框的右内容边界，包含块的左边界则取自最后一个框的左内容边界。上下边界也是一样。
-如果没有祖先，元素的包含块定义为初始包含块。

默认值
　　left top right bottom width height——默认值为auto
　　margin padding——默认值0
　　boder-width——如果不存在border-style
4.百分比参照于谁
　　width margin pdding包含块的width
　　height包含块的height
　　left包含块的width
　　top包含块的height
5.浮动
　　浮动提升半层
6.三列布局
　　①两边固定。当中自适应
　　②中间列要完整的显示
　　③中间列要优先加载
　　　　－定位、浮动、圣杯、双飞翼
7.margin为负值( njargin不影响元素的位置)
　　负值:将元素的边界往里收
　　正值:将元素的边界往外扩

圣杯布局
浮动:搭建完整的布局框架
margin为赋值:调整旁边两列的位置(使三列布局到-行上)
使用相对定位调整旁边两列的位置(使两列位置调整到两头)一 >
Pctula tune- tovticecls 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   body{
    min-width: 600px;
   }
   #header,#footer{
    background-color: #BC8F8F;
    height: 50px;
    text-align: center;
    line-height: 50px;
   }
   #middle{
    background-color:antiquewhite;    
    padding: 0 200px;
   }
   .clearfix{
    *zoom: 1;
   }
   .clearfix::after{
    content: "";
    display: inline-block;
    clear: both;
   }
   .connter{
    width: 100%;
    background-color: #55aa00;
    float: left;
    
   }
   .left{
    width: 200px;
    background-color: #FFFF00;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -200px;
    
   }
   .right{
    width: 200px;
    background-color: #FFFF00;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
   }
  </style>
 </head>
 <body>
  <div id="header">header</div>
  <div id="middle" class="clearfix">
   <div class="connter">connter</div>
   <div class="left">left</div>
   <div class="right">right</div>
  </div>
  <div id="footer">footer</div>
 </body>
</html>

双飞翼布局
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   body{
    min-width: 600px;
    
   }
   #header,#footer{
    background-color: #BC8F8F;
    height: 50px;
    text-align: center;
    line-height: 50px;
   }
   .colum{
    width: 100%;
    background-color: #55AA00;
    float: left;
   }
   .left{
    width: 200px;
    background-color: #00FF00;
    float: left;
    margin-left: -100%;
   }
   .right{
    width: 200px;
    background-color: #00FF00;
    float: left;
    margin-left: -200px;
   }
   .connter{
    margin: 0 200px;
   }
  </style>
 </head>
 <body>
  <div id="header">header</div>
 
   <div class="colum">
    <div class="connter">connter</div>
   </div>
   <div class="left">left</div>
   <div class="right">right</div>
 
  <div id="footer">footer</div>
 </body>
</html>

两组实现的对比:
1.俩种布局方式都是把主列放在文档流最前面,使主列优先加载。
2.两种布局方式在实现上也有相同之处，都是让三列浮动,然后通过负外边距形成三列布局。
3.两种布局方式的不同之处在于如何处理中间主列的位置:
圣杯布局是利用父容器的左、右内边距+两个从列相对定位;
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

8.伪等高布局

<!DOCTYPE html>
<html>
 <head>
	  <meta charset="UTF-8">
	  <title></title>
	  <style type="text/css">
	   *{
	    margin: 0;
	    padding: 0;
	   }
	   #content{
	    width: 700px;
	    border: 1px solid;
	    margin: 0 auto;
	    overflow: hidden;
	   }
	   #content .left{
	    float: left;
	    width: 300px;
	    background: pink;
	    padding-bottom: 1000px;
	    margin-bottom: -1000px;
	   }
	   #content .right{
	    float: right;
	    width: 400px;
	    background: red;
	    padding-bottom: 1000px;
	    margin-bottom: -1000px;
	   }
	   
	   .clearfix{
	    *zoom: 1;
	   }
	   .clearfix:after{
	    content: "";
	    display: block;
	    clear: both;
	   }
	  </style> 
  </head>
  <body>
	  <div id="content" class="clearfix">
  		 <div class="left">
    			丁香一样的颜色
  		 </div>
   		<div class="right">
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		    丁香一样的芬芳<br />
		</div>
	  </div>
 </body>
</html>

9.fixed
怎么使用绝对定位来模拟固定定位
1.禁止系统滚动条
2.将滚动条作用在最外层的包裹器上或者在body上
3.因为移动包裹器或者body身上的滚动条并不会影响初始包含块的位置
所以一个按照初始包含块定位的元素就不会产生移动

<style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   //禁止系统滚动条
   html,body{
    height: 100%;
    overflow: hidden;
   }
   
   #wrap{
    height: 100%; 
    overflow:auto;
    border: 1px solid;
   }
   #test{
    position: absolute;
    left: 90px;
    top: 90px;
    width: 90px;
    height: 90px;
    background-color: pink;
   }
  </style>		
<body>
  <div id="wrap">
   <div id="test"></div>
   <div style="height:1000px"></div>
  </div>
 </body>