wrapper包装
替换元素和非替换元素的介绍：
一、块级元素和行内元素和内联块概念的认识
- 块元素：他本身是可以具有宽高，而且他必须独占一行例如：div、ul、ol、dl、dd、dt
- 行内元素（内联元素）不可设置宽高，如果要设置其宽高可以display:inline-block;再设置宽高列如a、i、em、span等等。
- 内联块：他可以设置宽高，同时可以允许其他元素跟在后面，例如：img input
补：1、父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式。
2、img是确实是个行内元素，但是他是个特殊的行内元素，可以说他是个可以设置宽高的行内元素吧，他叫替换行内元素（内联块）。
二、块级元素和行内元素和内联块之间的转换
- display：inline；块变成行
- display：block；行变成块
- display：inline-block变成内联块
三、css属性：
border: 4px solid #0f0; 边框：大小 实线 颜色
text-intent:40px;首行缩进
text-decoration:none 去掉a标签的下划线
text-align: center、left、right、justify;文本居中、左、右、两端对齐
heigt:50px;
line-heigt:50px;当行高与高相等时，文本就会垂直居中，行高是包括文本的。（针对单行有效，如果有边框、padding、margin要把每个乘以2再减去高度就是现在的行高，这样就达到垂直居中）
list-style:none、square、circle、dist; ul标签去掉前面的符号 \ square 方形 \circle空心圆 \ 默认就是实心圆dist
补： text-align:
对父级使用text-align:center; 会对行级块以及行内元素有居中的效果。
四、盒子模型：
盒子模型的具体介绍
1、位置认识
content内容
padding：内边距
border：边框 solid实线
margin：外边距
2.关于css盒子模型的属性
* {
margin:0;
padding:0; 默认所有的盒子外边距，内边距为0
box-sizing:border-size [box-sizing详细介绍](https://baijiahao.baidu.com/s?id=1622555241803724441&wfr=spider&for=pc)
}
margin-left: 80px; 左外边距
margin-right：80px;右外边距
margin-top:100px; 上外边距
margin:100px 0 0 80px;
上 右下 左（顺时针）
margin:100px 200px 80px;
上 左右 下
margin:100px 200px;
上下 左右
margin:100px;上下左右都是100px
padding:100px 0 0 80px; （同理）
外边距 上 右 下 左
五、外边距margin
1、margin上下重合（取最大的边距），左右叠加
（1）上下：
margin:10px 0px;
发现每个盒子中间空隙为10px
（2）左右：
通过这个css属性display: inline-block; 把div块元素变成内联块；在设置水平外边距margin:0px 10px;
会发现第一个间距是10，其他二个盒子中间的间距是左右叠加。
2、margin:0 auto;
外边距上下为0，左右自动居中
补充：
更好的了解盒子模型，打开网页f12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px
}
.div1{
width: 500px;
height: 500px;
background: #f00;
border:10px solid #ccc;
padding: 50px;
margin: 25px 40px;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
