CSS基础三：盒子模型

盒子模型

border示例

div{
	border: 1px solid black;
	text-align: left;
	height: 200px;
	/*文本高度*/
	/*垂直居中，height=line-height*/
	line-height: 20px;

	/*缩进*/
	/*1em = 1 * font-size*/
	text-indent: 2em;
	/*颜色*/
	color: rgb(0, 0, 238);
	/*文本下划线 删除线*/
	/*text-decoration: underline;*/
	text-decoration: line-through;
	/*文本光标*/
	/*cursor: copy;*/
	cursor: pointer;
}

常见的元素

1. 行级元素:inline
   feature:内容决定元素所占位置,不可以通过css改变宽高
   例如: span strong em a del
2. 块级元素:block
   feature:独占一行,可以通过css改变宽高
   例如:div p ul li ol form address
3. 行级块元素:inline-block
   feature:内容决定大小，可以改宽高
   例如:img

凡是带有inline的元素都有文字特性，例如img元素，可以通过去除代码的元素间空格的方式来解决文字特性的空格问题

开发经验:先定义功能

== 通配符选择器：初始化所有标签==

盒子模型

盒子模型包含四部分：外边距（margin），边框（border），内边距（padding），元素（element），如下图所示：
盒模型的可视区域计算问题：不包含外边距（margin）

<div class="wrapper">
    <div class="content"></div>
</div>

.wrapper{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: red;

	border: 10px solid green;
	/*4: 上右下左 3: 上（左右）下 2: （上下）（左右）*/
	padding: 100px;
}
.content{
	width: 100px;
	height: 100px;
	background-color: black;
}

结果如图：

body元素默认margin为8px

层模型

1. absolute
   表示该元素可以被定位，绝对定位，脱离原来的位置进行定位，该元素原位置被释放
   相对于最近的有定位的父级元素进行定位，如果没有，那么相对于文档进行定位

<!-- absolute：绝对定位，脱离原来的位置进行定位 -->
<div class="demo"></div>
<div class="box"></div>

.demo{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: red;
	opacity: 0.5;
}

.box{
	width: 150px;
	height: 150px;
	background-color: green;
}

上面示例的效果如下：

2. relative
relative：相对定位，保留原来的位置进行定位
相对于原来自己的位置定位

.demo{
   position: relative;
   width: 100px;
   height: 100px;
   background-color: red;
   opacity: 0.5;
}

.box{
   width: 150px;
   height: 150px;
   background-color: green;
}

上述示例的结果如下：
ps:用relative来标记参照物，用absolute来标记当前要定位的元素

3. fixed：固定定位

知识和示例来源：渡一