盒子模型
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;
}
常见的元素
- 行级元素:inline
feature:内容决定元素所占位置,不可以通过css改变宽高
例如: span strong em a del - 块级元素:block
feature:独占一行,可以通过css改变宽高
例如:div p ul li ol form address - 行级块元素: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
层模型
- 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来标记当前要定位的元素
- fixed:固定定位
知识和示例来源:渡一