WEB笔记-3、盒子模型+定位

时间：2015-11-26 21:17:22 阅读：285 评论：0 收藏：0 [点我收藏+]

3.1 盒子模型

边距控制

margin/padding:上右下左；

padding:内容和边距之间的空间

margin：”盒子“外撑开的空间，两个相邻标签外边距会出现重叠和累加的现象，呈现出来的效果将是：对于垂直相邻的标签而言90+10=90，水平相邻的标签而言：90+10=100

四个值缺少某一个，使用对边的值

每个盒子的属性也分三种粒度，到底选哪个粒度的属性，要看你想要选择的边，以及到那条边的哪个属性

border\border-left-width\border-right;

盒子边框

边框（border）有三个相关属性：

border-width:

border-style: 有none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等文本值

border-color:

一、没有width的元素始终会将宽度扩展填满其父元素为止。添加水平边框、内外边距，会导致内容宽度减少，减少量等于边框+边距

二、设定了宽度的盒子添加边框、边距，会导致盒子扩展得更宽，实际上盒子的width属性只是设置了盒子内容区的宽度，而非盒子要占据的水平宽度

box-sizing:（新特性）可以将盒子的行为设置成默认auto宽度的状态

浮动与清除

float：

clear：

为父元素应用 overflow:hidden

浮动父元素

在父元素的末尾添加非浮动元素，可以直接在标记中加，亦可以通过给父元素加clearfix类来加（需要一个clearfix的样式规则）

.class:after{

clear:both;

}

//避免添加多余的文档结构

定位：

css中position包含3个值：static 、relative、absolute、fixed 默认值是static。

相对定位

position:relative

之后可以使用top、left来改变其位置

这里的相对定位是指DOM节点相对于正常的定位而言的，即原始位置为该节点在文档流里面应该正常渲染所在的位置

绝对定位

绝对定位会将文档彻底从文档流中拿出来。

使用 absolute 来作为绝对定位的标识，top，left都指定的是相对页面左上角的位置偏移量，而不是在文档流中偏移。定位的导航

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<style type="text/css">
		*{ margin:0; padding:0;}
		div{background:#ccc;}
		.absolute-test{position:absolute; top:100px; left:100px;}
		.absolute-test h1{background:#333; color:orange;}
		body{margin-top: 30px  !important;}
	</style>
</head>
<body>
	<div>this is static position</div>
	<div class="absolute-test"><h1>I‘m absulote</h1></div>
	<div>this is static position</div>
</body>
</html>

技术分享 >>bottom=0就是页脚了 ^。^

固定定位

从完全移除文档刘的角度说，固定定位和绝对定位类似。

但是 fixed 不同的地方在于，固定定位是定位元素相对视口（浏览器窗口或手持设备的屏幕），因此他不会随一面滚动而移动随视窗滚动的导航、插件、搜索等

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{ margin:0; padding:0;}
		div{background:#ccc;}
		.absolute-test{position:fixed; top:0px; left:100px;}
		.absolute-test h1{background:#333; color:orange;}
		body{margin-top: 30px  !important;}
	</style>
</head>
<body>
	<div>this is static position</div>
	<div class="absolute-test"><h1>I‘m absulote</h1></div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
	<div>this is static position</div>
</body>
</html>

　　技术分享 >>对了，这个东西拿来做导航很不错^。^...