块级元素
-
显示特点
1 . 独占一行
2 . 宽度默认是父元素的宽度 高度默认由内容撑开
3 . 可以设置宽高 -
代表标签
div、p、h系列
行内标签
-
显示特点
1 . 一行显示多个
2 . 宽度和高度默认由内容撑开
3 . 不可以设置宽高 -
代表标签
a、span、b、strong、del…
行内块
-
显示特点
1 . 一行显示多个
2 . 可以设置宽高 -
代表标签
img、input、textarea、button、select.
元素显示模式转换
改变元素默认的显示特点 让元素符合布局要求
- 语法
属性 | 效果 |
---|---|
display:block | 转换成块级元素 |
display:inline- block | 转换成行内块元素 |
display:inline | 转换成行内元素 |
- 在style里
拓展
- 块级元素一般可以嵌套
但是p标签不能嵌套p、div、h等块级元素 - a标签内部可以嵌套任意元素
但a标签不能嵌套a标签
CSS特性
- 继承性
子元素默认继承父元素的样式特点
文字控制属性都可以继承
特殊情况
1.a标签的color会继承消失
2.h系列标签的font-size会继承失效
- 层叠性
给同一个标签设置不同的样式-此时样式会叠加
注意事项
当样式冲突时,只有当选择器优先级相同时,才通过层叠性判断结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
/* 去除下划线 */
width: 100px;
height: 50px;
background-color: red;
display: inline-block;
color: white;
text-align: center;
/* 居中 */
line-height :50px;
}
a:hover{
background-color: orange;
}
</style>
</head>
<body>
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>
</html>