现在的位置: 首页 > 综合 > 正文

web前端开发修炼之道读书笔记

2017年11月27日 ⁄ 综合 ⁄ 共 5689字 ⁄ 字号 评论关闭

1.hasLayout问题简析

hasLayout是IE浏览器专有的一个属性,用于CSS的解析引擎。有时在IE下一些复杂的CSS设置解析起来会出现一些bug,其原因可能与hasLayout没有被自动触发有关,解决方法可以通过一些技巧,手动触发hasLayout属性可以解决一些bug.

hasLayout的触发方法有很多种,例如设置width,height值,设置position为relative等,但是设置上面属性都会在触发hasLayout的同时带来一些副作用。现在常用的方法,使用CSS属性zoom来触发hasLayout---"zoom:1"

hasLayout的设计初衷是用于辅助块级元素的盒模型解析,是用于块级元素,如果用于行内元素,会引发一些特殊的效果。

2.块级元素和行内元素

常见的块级元素:div、p、form、ul、ol、li等

常见的行内元素:span、strong、em等

区别:

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度;可以设置width,height属性(设置了width属性,仍然是独占一行);可以设置margin和padding属性;display:block;

行内元素不会独占一行,相邻行内元素会排列在同一行,直到一行排不下,才会换行,其宽度随元素的内容而变化;设置width,height属笥无效;水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果;display:inline;

3.display属性:

display的值除了block和inline,还有其他值例如:list-item,table-cell等,但因为IE6和IE7支持的display类型很少,为了兼容IE仅使用block,inline,none三种。

display:inline-block(IE6 IE7通过触发行内元素的hasLayout来实现)--它是行内的块级元素,拥有块级元素的特点,可以设置长度,可以设置margin和padding,但它却不是独占一行,它的宽度并不占满父元素,而是和行内元素一样的,可以和其他行丙元素排在同一行。它集块级元素和行内元素特点于一身

示例:

块级元素:

<style type="text/css">
p{color:red;width:100px;background:#cccc;height:30px;display:inline-block;}
</style>
<body>
abcdefg<p>12356789</p>
</body>

ie6:

ie8.firefxo:

块级元素IE6,IE7不支持,考虑兼容性问题必须舍弃这种做法

行内元素:

<style type="text/css">
 span{color:red;width:100px;background:#ccc;height:30px;display:inline-block;*vertical-align:-10px;}
</style>
<body>
abcdefg<span>12314556</span>
</body>

IE6,IE7

IE8,Firefox


利用hasLayout,可以在不支持display:inline-block的IE6和IE7模拟出display:inline-block的效果

缺点:只对行内元素实现display:inline-block,如果是块级元素则不行,其中用到了hack也是不太合理的

4.relative,absolute,float区别:

position:relative和position:absolute都可以改变元素在文档流中的位置,可以让元素激活left,right,top,bottom,z-index属性(默认情况下,这些属性未激活,设置了也无效)

文档流:网页虽然看起来是平面的二维结构,但它其实是有z轴的,z轴的大小由z-index控制,默认情况下,所有元素都在z-index:0这一层。元素根据自己的display类型、长度、内外边距等属性顺序排列在z-index:0这一层里,这就是文档流。

position:relative:会保留自己在z-index:0层的占位,left,top,right,bottom值是相对于自己在z-index:0的位置,虽然它的实际位置可能因为设置了left,top,right,bottom值而偏离原来在文档流中的位置,但对其他仍然在z-index:0层的元素位置不会造成影响。

position:absolute:完全脱离了文档流,不再在z-index:0层保留占位符,其left ,top,bottom,right值是相对于自己最近的一个设置了postion:relative或position:absolute的祖先元素,如果祖先元素全部都没有设置position:relative或position:absolute,那么就相对于body元素。

float:也能改变文档流,与上面不同的是float属性不会让元素上浮到另一个z-index层,它仍然让元素在z-index:0层排列,它不能通过left,top,bottom,right属性精确地控制元素的坐标,它只能通过float:left和float:right来控制元素在同层里的左浮和右浮。float会改变正常的文档流排列,影响到周围元素

备注:

postion:absolute和float会隐式地改变display类型,不论之前什么类型的元素,只要设置了position:absolute,float:left或float:right中任意一个,都会让元素以display:inline-block的方式显示;可以设置长宽默认宽度并不占满父元素。显式地设置display:inline或display:block也不起作用。而position:relative却不会隐式改变display的类型。

5.居中

1)文本、图片等行内元素的水平居中---给父元素设置text-align:center属性可以实现文本,图片等行内元素的水平居中

    示例   

<style type="text/css">
	.wrap{background:#000;width:500px;height:100px;margin-bottom:10px;color:#fff;text-align:center}
  </style>
<body>
	<div class="wrap">hello world</div>	 
 </body>

2)确定宽度的块级元素水平居中----通过设置margin-left:auto和margin-right:auto实现的

示例

 <style type="text/css">
	.wrap{background:#000;width:500px;height:100px;margin-bottom:10px;color:#fff;text-align:center}
	.test{background:red;width:200px;height:50px;margin-left:auto;margin-right:auto}
  </style>
<body>
	<div class="wrap"><div class="test"></div></div>	 
 </body>

3)不确定宽度的块级元素水平居中

3_1:table实现不确定宽度块级元素的水平居中,table如果不设宽度,它的宽度由内部元素的宽度“撑起”,但是即使不设定宽度,仅设置margin-left:auto和margin-right:auto也可以实现水平居中,将ul包含在table标签内,对table设置margin-left:auto和margin-right:auto可以使table水平居中,间接使ul实现了水平居中。

缺点:增加了无语义的标签,加深了标签的嵌套层数。

示例

<style type="text/css">
	.wrap{background:#000;width:500px;height:100px}
	ul{list-style:none;margin:0;padding:0;}
	table{margin-left:auto;margin-right:auto;}
	.test li{float:left;display:inline;margin-right:5px;}
	.test a{float:left;width:20px;height:20px;text-align:cenger;line-height:20px;background:#316c25;color:#fff;border:1px solid #316AC5;text-decoration:none;}
	.test a:hover{background:#fff;color:#31AC65;}
  </style>
<body>
	<div class="wrap">
		<table><tbody><tr><td>
						<ul class="test">
							<li><a href="#">1</a></li>
						</ul>
		</td></tr></tbody></table>
		<table><tbody><tr><td>
						<ul class="test">
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
						</ul>
		</td></tr></tbody></table>
		<table><tbody><tr><td>
						<ul class="test">
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
						</ul>
		</td></tr></tbody></table>
	</div>
 </body>

3_2:改变块级元素的 display为inline类型,然后使用text-align:center来实现居中,不用增加无语义的标签,简化标签的嵌套深度

  缺点:将块级元素的display类型改为inline,变成行内元素,行内元素比块级元素缺少一些功能,比如设定宽度值等

示例

<style type="text/css">
	ul{list-style:none;margin:0;padding:0}
	.wrap{background:#000;width:500px;height:100px}
	.test{text-align:center;padding:5px}
	.test li{display:inline}
	.test a{padding:2px 6px;background:#316AC5;color:#fff;border:1px solid #316AC5;text-decoration:none;}
	.test a:hover{background:#fff;color:#316AC5;}
  </style>
<body>
	<div class="wrap">
		<ul class="test">
			<li><a href="#">1</li>
		</ul>
		<ul class="test">
			<li><a href="#">1</li>
			<li><a href="#">2</li>
			<li><a href="#">3</li>
		</ul>
		<ul class="test">
			<li><a href="#">1</li>
			<li><a href="#">2</li>
			<li><a href="#">3</li>
			<li><a href="#">4</li>
			<li><a href="#">5</li>
		</ul>
	</div>	
 </body>

3_3:
示例

  <style type="text/css">
	ul{list-style:none;margin:0;padding:0;}
	.wrap{background:#000;width:500px;height:100px;}
	.test{clear:both;padding-top:5px;float:left;position:relative;left:50%;}
	.test li{float:left;margin-right:5px;position:relative;left:-50%;}
	.test a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316AC5;color:#fff;border:1px solid #316AC5;text-decoration:none;}
	.test a:hover{background:#fff;color:#316AC5;}
  </style>
<body>
  <div class="wrap">
		<ul class="test">
			<li><a href="#">1</li>
		</ul>
		<ul class="test">
			<li><a href="#">1</li>
			<li><a href="#">2</li>
			<li><a href="#">3</li>
		</ul>
		<ul class="test">
			<li><a href="#">1</li>
			<li><a href="#">2</li>
			<li><a href="#">3</li>
			<li><a href="#">4</li>
			<li><a href="#">5</li>
		</ul>
	</div>	
 </body>

抱歉!评论已关闭.