CSS元素类型
重点
CSS元素类型
基本的3种类型：
1 块【div]
1 可以设置宽度/高度
2 如果你不设置宽度的话 宽度==父元素
3 独占一行【父元素的一行】
4 margin【外边框】 auto[自动 将左右二边的空白区域平均分配给元素两端]
父元素的居中效果
空白区域 = 父元素宽度 - 本身元素宽度
5 padding【内边框】也可以设置
6 元素可以嵌套
7 样式
display:block 证明你这个元素是 块元素
2 行[span a]
1 样式
display:inline 证明你这个元素是 行元素
2 不可设置宽度与高度，这个高度与宽度由内容决定
3 不会独占一行
4 margin【外边框】 或 padding【内边框】可以设置，但只能设置水平[左右]方向
5 元素可以嵌套
6 可以嵌套内联元素
3 行内块
1 样式
display:inline-block 证明你这个元素是 行内块元素
2 行 或 行内块 都可以叫做内联元素
2 没有设置宽度与高度，内容决定它的宽度与高度
3 margin【外边框】 或 padding【内边框】可以设置,不会影响周边的元素
4 元素可以嵌套
注意：
如果一行里面存在行内块元素 以及行元素
如果行内块元素设置了上下margin【外边框】padding【内边框】 行元素跟着一起跑
原因：基线对齐
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示 -->
<head>
<!-- 编码格式-->
<meta charset="UTF-8">
<!-- 文档标题-->
<title>第五节课</title>
<!-- 内部样式-->
<style>
#x1
{
/*宽度*/
width: 800px;
/*高度*/
height: 200px;
/*背景颜色*/
background-color: red;
margin: 20px auto;
}
#x2
{
width: 100px;
height: 100px;
background-color: darkblue;
/*外边框*/
margin: 20px auto;
}
#x3
{
display:block;
width: 200px;
height: 200px;
background-color: black;
}
span
{
/*宽度*/
width: 200px;
/*高度*/
height: 200px;
/*背景颜色 */
background-color: red;
/*字体颜色*/
color: lawngreen;
margin: 100px;
padding:100px;
}
#x4
{
/*行内块样式*/
display:inline-block;
/*宽度 t*/
width: 200px;
/*高度*/
height: 200px;
/*背景颜色 */
background-color: pink;
/*字体颜色*/
color: blueviolet;
}
</style>
</head>
<!--在浏览器显示 -->
<body>
<div id="x1">
<div id="x2">
</div>
</div>
<a href="#" id="x3">超链接</a>
<span>123</span>
<div id="x4">
我是DIV
</div>
</body>
</html>