CSS元素类型（二）
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>