1. 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
等,其中<div>
标签是最典型的块元素。
- 比较霸道,自己独占一行。
- 高度,宽度、外边距以及内边距都可以控制:
比如:
div {
width: 200px;
height: 200px;
background: pink;
font-size: larger;
}
- 宽度默认是容器(父级宽度)的100%
比如不设置width时:
div {
/* width: 200px; */
height: 200px;
background: pink;
font-size: larger;
}
- 是一个容器及盒子,里面可以放行内或者块级元素。
2. 行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
等,其中 <span>
标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
- 相邻行内元素在一行上,一行可以显示多个。
- 高、宽直接设置是无效的:
span { /* width: 200px; */
height: 200px;
background: pink;
font-size: larger;
}
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意:
- 链接里面不能再放链接
- 特殊情况链接
<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全
3. 行内块元素
在行内元素中有几个特殊的标签 —— <img />、<input />、<td>
,它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素。
行内块元素的特点:
① 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
② 默认宽度就是它本身内容的宽度(行内元素特点)。
③ 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
4. 居中问题
块级元素居中
外边距可以让块级盒子水平居中,但是必须满足两个条件:
① 盒子必须指定了宽度(width)。
② 盒子左右的外边距都设置为 auto 。
常见的写法,以下三种都可以:
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
举例:
这段代码只能让块级元素div居中,内部的字无法居中,因为是行内元素。
</head>
<style>
.nav{
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
<body>
<div class="nav">
<span>你好</span>
</div>
</body>
行内元素居中
</head>
<style>
.nav{
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
text-align: center;
}
</style>
<body>
<div class="nav">
<span>你好</span>
</div>
</body>
行内元素或者行内块元素水平居中给其父元素添加 text-align:center
4. 总结
5. 元素显示模式转换
特殊情况下,我们需要元素模式的转换,简单理解: 一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>
的触发范围。
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display: inline-block;
比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
a {
text-decoration: none;
width: 200px;
height: 200px;
display:block; /*由于要设置长宽所以需要块级元素的特性*/
background-color: pink;
}
</style>
<body>
<a href="#">你好</a>
</body>
</html>
由于这里给予了链接a块级元素的属性,点击粉色区域的任何地方都可以跳转到指定链接。
6. 制作小米简洁版侧边栏
打开小米首页可以看到侧边栏就是个大块的链接,鼠标放置的位置会变成橙色:
思路:
先写出这10个链接,然后赋予块级元素属性,就会变成图示的一列。
设置背景,颜色,字体等等相关属性。
利用伪类选择器修改鼠标放置时背景变为橙色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
a {
display: block; /*使得链接变成竖着的形式*/
width: 230px;
height: 40px;
background-color: rgb(148, 145, 146);/*设置背景颜色*/
font-size: 20px;/*设置字体大小*/
text-decoration: none;/*去除链接默认含有的下划线*/
color: white;/*字体颜色*/
text-indent: 2em;/*缩进*/
line-height: 40px;/*行高=height时,可以使文字垂直居中 这是一个小技巧*/
}
a:hover {
color: white;
background-color: rgb(230, 121, 20);
}
</style>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 显示器</a>
<a href="#">家电 插线板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">电源 配件</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
<a href="#">生活 箱包</a>
</body>
</html>
最终效果(颜色选的都比较粗糙)