1. 块元素,内联元素,内联块元素
- 元素就是标签
- 布局中常用的有三种标签
- 块元素
- 内联元素
- 内联块元素
1.1 块元素
- 也称为行元素
- 布局中常用的标签,如
- div、p、ul、li、h1~h6、dl、dt、dd 等等
- 在布局中
- 支持全部的样式
- 如果没有设置宽度,默认的宽度为父级宽度的 100%
- 盒子占据一行
- 即使设置了宽度,也一样独占一行
1.2 内联元素
- 也称为行内元素
- 布局中常用的标签,如
- a、span、em、b、strong、i 等等
- 在布局中
- 支持部分样式,如 margin 的左右值
- 不支持宽(width)高(heigh)属性
- 宽高由内容决定(撑开)
- 不独占一行
- 盒子并在一行
- 代码换行(指回车)会产生间距(1 个空格)
- 子元素是内联元素
- 父元素可以
- 用 text-align 属性设置子元素水平对齐方式
- 用 line-height 属性值设置垂直对齐方式
1.3 内联块元素
- 也称内块元素
- 是新增的元素类型
- 现有元素没有归于此类别的
- img 和 input 元素的行为类似这种元素,但是也归类于内联元素
- 在布局中
- 支持全部样式
- 如果没有设置宽高,宽高由内容决定
- 盒子并在一行
- 代码换行,盒子会产生间距
- 子元素是内联块元素
- 父元素可以
- 用 text-align 属性设置子元素水平对齐方式
- 用 line-height 属性值设置子元素垂直对齐方式
2. 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box">box</div>
内联元素<span>不不不</span>独占一行
input <input type="text" name=""> input
</body>
</html>
*{
width: 600px;
height: 100px;
}
.box{
/* 块级元素 */
background: orange;
margin: 20px;
padding: 20px;
text-align: center; /* 文字水平居中 */
line-height: 100px; /* 设置行高 */
}
span{
/* 内联元素:
1. 不支持宽(width)高(heigh)属性
2. 宽高由内容撑开
3. 不独占一行
4. 盒子并在一行
5. 代码换行(指回车)会产生间距(1 个空格)
6. 只支持部分样式
7. 支持 margin 的左右值 */
background-color: red;
margin: 20px;
padding: 20px;
background: yellow;
}
input{
/* 行内快元素
1. 支持所有的样式
2. 宽高属性默认由内容决定(撑开)
3. 不独占一行
4. 盒子并在一行
5. 代码换行(指回车)是会产生间距(1 个空格)
*/
width: 100px;
margin: 20px;
padding: 10px;
}
- 效果截图
参考:北京图灵学院的 Web 前端公开课