pink老师HTML5+CSS3学习笔记 | DAY8

最新推荐文章于 2023-09-19 12:43:50 发布

头毛很炸

最新推荐文章于 2023-09-19 12:43:50 发布

阅读量82

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_53454320/article/details/129601071

版权

1、元素显示模式

①什么是元素的显示模式？

元素显示模式就是元素以什么方式显示，比如 <div>自己占一行，比如一行可以放多个<span>；

②html元素分两类

块元素和行元素

③块元素

常见块元素：<h1><p><div><ul><ol><li>,<div>时最典型的块元素；
特点：
- 自己独占一行；
- 高度、宽度、内外边距都可以设置，但后面空出来的距离依旧不能使用，块元素外的内容仍然另起一行；
- 宽度默认=容器（父级标签宽度）的宽度；
- 快元素是一个容器级的盒子，可以放行元素和块元素；
注意：
- 文字类的元素内不能使用块级元素；
- <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>;
- 同理，<h1>~<h6>等都是文字类块级标签，里面不能放其他块元素；

④行内元素

常见行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，<span>最典型的行内元素；
特点：
- 一行可放多个行内元素，一行显示多个；
- 宽、高设置无效；
- 默认宽度就是本身内容的宽度（如，有多少字就多宽）；
- 行内元素只能容纳文本和其他行内元素；

⑤行内块元素

行内元素中有几个特殊标签<img />、<input />、<td>，他们同时具有块元素和行内元素的特点，通常称其为行内块元素；
特点：
- 和相邻行内块元素再同一行，但中间会有空白缝隙，一行可以显示多个；
- 默认宽度就是本身内容宽度；
- 高、宽、内外边距都可以控制；

⑥元素显示模式转换

当一个模式元素需要另一个模式的特性时，进行一个转换，如当<a>需要增加高度宽度时；
语法：

/*转换成块级元素：*/
display: block;

/*转换成行内元素：*/
display: inline;

/*转换成行内块元素：*/
display: inline-block;

应用：

/*css*/
a {
	width: 300px;
	height: 100px;
	background-color: pink;
	display: block;
}
div {
	width: 300px;
	height: 100px;
	background-color: purple;
	display: inline;
}
span {
	width: 300px;
	height: 100px;
	background-color: skyblue;
	display: inline-block;
}
<!--html-->
<body>
    <a href="#">我是行内元素转换为块级元素</a>
    <a href="#">我是行内元素转换为块级元素</a>
    <div>我是块级元素转换为行内元素</div>
    <div>我是块级元素转换为行内元素</div>
    <span>我是行内元素转换为行内块元素</span>
    <span>我是行内元素转换为行内块元素</span>
</body>

2、单行文字垂直居中

css并没有提供相关代码；

①解决方案

文字行高=盒子高度

②原理

行高由上空隙、文字高度、下空隙组成，当行高<盒子高度，文字偏上：

当行高>盒子高度，文字偏下：

所以当行高=盒子高度时，上下空隙又相同，则达到一个垂直居中的效果：

3、课堂案例——简洁版小米侧边栏

/*css*/
a {
	width: 230px;
	height: 40px;
	background-color: #55585a;
	display: block;
	text-indent: 2em;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	line-height: 40px;
}
a:hover {
	background-color: #ff6700;
}
<!--html-->
<body>
    <a href="#">电话 手机卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音频</a>
</body>