css元素显示模式
【摘要】 <!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"> ...
<!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>
/* 什么是元素显示模式
作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素以什么样的方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型 */
/* 2.2.1块元素 */
/* 常见的块元素有h1~h6,p,div,ul,ol,li 其中div标签是最典型的块元素
块元素的特点1.比较霸道，独自占一行
2.高度，宽度，外边距以及内边距都可以控制
3，宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块元素 */
/* 注意点
1.文字类的元素不能使用块元素
2.p标签主要用于存放文字，因此p标签里面不能放块元素，特别是不能放div
3.h1~h6等都是文字类块级标签，里面不能放其他块级元素 */
div {
width: 200px;
height: 200px;
background-color: yellow;
}
/* 2.2.2行内元素 */
/* 常见的行内元素有a，strong，b，em，i，del，s，ins，u，span等
span标签是最典型的行内元素，有的地方也将行内元素称为内联元素。 */
/* 行内元素的特点1.相邻行内元素再一行上，一行可以显示多花个
2.高，宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素 */
/* 注意1.链接里面不能再放链接
2.特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全 */
span {
/* 改的宽度和高度是不是没有用运行一下试试看 */
width: 500px;
height: 500px;
background-color: red;
}
/* 行 内 块 元素*/
/* 再行内元素中有几个特殊的标签，img，input，td 它们同时具有块元素和行内元素的特点
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2.默认宽度就是它本身内容的宽度（这是上面讲的行内元素的特点）
3.高度，行高，外边距以及内边距都可以控制（这是上面讲的块级元素的特点吧） */
</style>
</head>
<body>
<div>呀呵，你整挺霸道啊</div>
<h5>我不服</h5>
<!-- 下面一个错误示例 -->
<p>
<div>呀呵，竟然错了</div>
</p>
<span>小王你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong>
<span>小王</span><strong>品如的衣服</strong><br>
<input type="text">
<input type="text">
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）