CSS自学笔记

一、什么是元素显示模式

二、CSS的元素显示模式

1.块元素

2.行内元素

3.行内块元素

前言

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。 HTML 元素一般分为块元素和行内元素两种类型。块级元素和行内元素都是元素显示模式，而本文讲的是这几种模式的区别以及使用规则。

一、什么是元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。HTML 元素一般分为块元素和行内元素两种类型。

二、CSS的元素显示模式

1.块元素

常见的块元素有：<h1>~<h6>，<p>，<div>，<ul>，<ol>，<li>等，其中div是最典型的块元素。

块级元素的特点：

① 比较霸道，自己独占一行。

② 高度，宽度、外边距以及内边距都可以控制。

③ 宽度默认是容器（父级宽度）的100%。

④ 是一个容器及盒子，里面可以放行内或者块级元素。

注意：1.文字类的元素内不能使用块元素。

2.标签主要用于存放文字，因此里面不能放块级元素，特别是不能放。

3.同理h1~h6等都是文字类块级标签，里面也不能放其他块级元素。

代码如下（错误示例）:

<body><div>比较霸道,自己独占一行</div> 瑟瑟发抖<p>独占一行</p><p><div>这里有问题</div></p>
</body>

网页显示效果：

此代码的21到23行中将div放在了文字类元素中，乍一看好像是没有什么问题的，但是我们在网页中查看代码便可以发现浏览器渲染的过程中div自动从p标签里跳出来了。

这里p标签生效，上下都有间隙，但是

在p里嵌套div之后这个p便不再生效

同理如果在p标签中嵌套p标签，或者在a标签中嵌套a标签，容易造成错误。

错误示例：

<body><a href="#">我是谁<a href="#">我是谁</a></a>
</body>

网页显示效果

嵌套在里面的a或者p均会跳出来。

2.行内元素

常见行内元素：<a><strong><b><em><del><i><s><ins><u><span>等，其中<span>是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

① 相邻行内元素在一行上，一行可以显示多个。

② 高、宽直接设置是无效的。

③ 默认宽度就是它本身内容的宽度。

④ 行内元素只能容纳文本或其他行内元素。

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>显示模式之行内元素</title><style>span {width: 100px;height: 100px;background-color: hotpink;}</style>
</head><body><span>我是行内元素span</span> <strong>我是行内元素strong</strong><span>我是行内元素span</span> <strong>我是行内元素strong</strong></body></html>

网页显示效果：

可以看出CSS中长宽设置对于行内元素是无效的。

3.行内块元素

在行行内元素中有几个特殊的标签，<img/><input/><td>它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

② 默认宽度就是它本身内容的宽度（行内元素特点）。

③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>显示模式之行内块元素(特殊情况)</title><style>input {width: 249px;height: 35px;}</style>
</head><body><input type="text"><input type="text">
</body></html>

网页显示效果：

可以看出既可以在同一行显示，又可以设置长宽。

CSS中块级元素，行内块元素，行内元素的特点相关推荐

CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
最基本的: 设置display属性为none,或者设置visibility属性为hidden 技巧性: 设置宽高为0,设置透明度为0,设置z-index位置在-1000em 转载于:https://w ...
css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
网页编程技术二（块级元素和行内标签）
1.块级元素顾明思义,块级标签在网页中显示为块:块级标签一般独占一行,新的块级标签将从新的一行开始排列,它可以容纳其他块级元素和内联元素. 常见的会计标签: 1.1标题标签:<h1>&l ...
文档流及其特性块级元素与行内元素的区别浮动的清除方法（解决浮动塌陷）
标准文档流 web页面的制作,是一个"流",必须从上到下,像是"织毛衣". 标准文档流的特性 1.空白折叠现象无论有多少个空格,换行,tab,都会折叠成一个空 ...
详解块级元素、行内元素、行内块级元素类型、区别及相互转化
1)块级元素特点: 1.总是从新的一行开始 2.高度.宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大 ...
HTML基础知识（一）：行内元素，块级元素，行内块元素
文章目录一.html元素分类二.块元素三.行内元素四.行内块元素五.替换元素和非替换元素六.元素转换七.总结一.html元素分类 html元素:行内元素.块元素.行内块元素二.块元素 ...
CSS 框的生成：块级元素和块框
在盒模型中,一切皆为框,即页面上的每个元素会生成一个矩形框.默认情况下,一个元素的类型,决定了该元素生成框的类型.块级元素生成块级框,行内级元素生成行内级框,没有被任何元素所包含的文本生成匿名框. 也 ...
块元素，行内元素，行内块元素及其元素转换
文章目录元素的显示方式 1.块元素(block element) 常见的块元素: 块级元素特点 2.行内元素(inline element) 常见的行内元素: 行内元素的特点: 3.行内块元素常见 ...

CSS中块级元素，行内块元素，行内元素的特点

一、什么是元素显示模式

二、CSS的元素显示模式

1.块元素

2.行内元素

3.行内块元素

CSS中块级元素，行内块元素，行内元素的特点相关推荐

最新文章

热门文章