CSS笔记(4)
学习内容:
CSS的元素显示模式:
块元素/行内元素/行内块元素
元素显示模式转换
简洁版小米侧边栏案例
CSS的元素显示模式
1.什么是元素显示模式
作用: 网页的标签非常多,在不同的地方会使用不同类型的标签,了解他们的特点可以更好的布局我们的网页.
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个span.html元素一般分为块元素和行内元素两种类型.
块元素
常见的块元素有<h1>~<h6>/<p>/<div>/<ul>/<ol>/<li>/<br>,其中<div>是最典型的块元素.
块元素的特点:
①比较霸道,自己独占一行.
②高度,宽度,行边距以及内边距都可以控制.
③宽度默认是容器(父级宽度)的100%
④是一个容器及盒子,里面可以放行内或者块级元素.
注意:
文字类的元素内不能使用块级元素
<p>标签主要用于存放文字,因此<p>标签连不能放块级元素,特别是不能放<div>.
同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素.
行内元素
常见的行内元素有<a>/<strong>/<b>/<em>/<i>/<del>/<s>/
<ins>/<u>/<span>等,其中<span>是最典型的行内标签.有的地方也将行内元素称为内联元素
行内元素的特点:
①相邻行内元素在一行上,一行可以显示多个.
②高,宽直接设置是无效的.
③默认宽度就是它本身内容的宽度.
④行内元素只能容纳文本或其他行内元素.
注意:
链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式更安全.
行内块元素
在行内元素中有几个特殊的标签--</img>、</input>、<td>，他们同时具有块元素和行内元素的特点.有些资料称他们为行内块元素.
行内块元素的特点:
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点).
②默认宽度就是它本身内容的宽度(行内元素特点).
③高度,行高,外边距以及内边距都可以控制(块级元素特点).
总结:
2.元素显示模式转换
特殊情况下,我们需要元素模式的转换,简单理解为一个模式的元素需要另外一个模式的特性.比如想要增加链接<a>的触发范围,我们可以将行内元素转换成块级元素.
<style>
a {
width: 200px;
height: 100px;
background-color: rgba(48, 241, 64, 0.418);
display: block;
}
</style>
</head>
<body>
<a href="#">点击链接</a>
</body>
现在一整块绿色的都是可触发范围.
还有一些其他的元素转换的方法:
- 转换成块元素:display:block
- 转换成行元素:display:inline
- 转换成行内块元素:display:block-inline
课堂案例:
制作一个简洁版的小米侧边栏
<!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>侧边栏案例</title>
<style>
a {
display:block;
width: 230px;
height: 40px;
font-size: 14px;
text-decoration: none;
color:#f7fffa;
text-indent: 2em;
background-color: #535758
}
a:hover {
background-color: #ff6f00;
}
</style>
</head>
<body>
<a href="">手机 电话卡</a>
<a href="">电视 盒子</a>
<a href="">笔记本 平板</a>
<a href="">出行 穿戴</a>
<a href="">智能 路由器</a>
<a href="">健康 儿童</a>
<a href="">耳机 音响</a>
</body>
</html>这部分学的有点乱了,把视频看了两遍...
腾讯云开发者
