20200219前端学习笔记

最新推荐文章于 2024-08-03 00:35:09 发布

--believe

最新推荐文章于 2024-08-03 00:35:09 发布

阅读量86

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_44850917/article/details/104403346

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.块级元素（block-level）

例：
常见的块级元素有h,p,div,ul,ol,li等，其中div是最典型的块元素
块元素的特点：
（1）独占一行
(2)高度，宽度，外边距以及内边距都可以控制
(3)宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素
注意：
只有文字才能组成段落，因此p里面不能放块级元素，特别是p不能放div
同理还有这些标签h，dt他们都是文字类块级标签，里面不能放其他块级元素
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		background-color: pink;
		width: 400px;
		height: 50px;
		}
	</style>
</head>
<body>
	<div>啦啦啦啦我是卖报的小行家</div>
	<div>啦啦啦啦我是卖报的小行家</div>
	<div>啦啦啦啦我是卖报的小行家</div>
</body>
</html>

2.行内元素(inline-level)

例：
常见的行内元素有，，,，,,,,,等，其中标签是最典型的行内元素。有的地方也成内联元素
行内元素的特点：
(1)相邻行内元素在一行上，一行可以显示多个
(2)高，宽直接设置是无效的
(3)默认宽度就是它本身内容的宽度
行内元素只能容纳文本或者其他行内元素
注意：
链接里面不能再放链接
特殊情况a里面可以放块级元素，但是给a装换一下块级模式最安全
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	span{
		background-color: pink;

	}
	</style>
</head>
<body>
	<span>啦啦啦嘻嘻嘻嘻</span>
	<span>啦啦啦</span>
	<span>啦啦啦</span>
</body>
</html>

3.行内块元素（inline-block）

例：
在行内元素有几个特殊的标签--,,，可以对他们设置宽度和对齐属性，有些资料称他们为行内快元素
行内块元素的特点：
（1）和相邻元素在一行上，但是中间会有空白缝隙，一行可以显示多个（2）默认宽度就是它本身的宽度(3)高度，行高，外边距，以及内边距都可以控制.
```
</ul>
<h3>4.三种模式的区别</h3>
```

在这里插入图片描述

5.标签显示模式转换display
块转行内：display:inline
行内转块：display:block
块，行内元素转换为行内块：display:inline-block
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*转换为块显示*/
	span{
		display: block;
		background-color: pink;
		width: 100px;


	}
	/*转换为行内显示*/
	div{
		display: inline;
		background-color: pink;
		height: 100px;
		width: 100px;

	}
	/*转换为行内块显示*/
	a{
		display: inline-block;
		background-color: yellow;
		width: 100px;

	}
	</style>
</head>
<body>
	<span>行内元素</span>
	<span>行内元素</span>
	<div>块元素</div>
	<div>块元素</div>
	<a href="#">百度</a>
	<a href="#">阿里</a>

</body>
</html>

6.简单导航栏实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	a{
		display: inline-block;
		width: 100px;
		background-color: pink;
		text-align: center;

	}
	a:hover{
		background-color: red;
	}
	</style>
</head>
<body>
	<a href="#">体育</a>
	<a href="#">娱乐</a>
	<a href="#">汽车</a>
</body>
</html>

效果：

在这里插入图片描述

--believe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20200219前端学习笔记

1.块级元素（block-level）例：常见的块级元素有h,p,div,ul,ol,li等，其中div是最典型的块元素块元素的特点：（1）独占一行(2)高度，宽度，外边距以及内边距都可以控制(3)宽度默认是容器（父级宽度）的100%（4）是一个容器及盒子，里面可以放行内或者块级元素注意：只有文字才能组成段落，因此p里面不能放块级元素，特别是p不能放div同理还有...
复制链接

扫一扫