CSS基础(part5)--display

学习笔记，仅供参考，有错必纠

文章目录

CSS
- 标签的类型(显示模式)
- - 块元素
  - 行元素
  - 行内块元素
  - 三种模式的区别和联系
- display改变标签显示模式

CSS

标签的类型(显示模式)

HTML标记一般分为块标记和行内标记2种类型，它们也称块元素和行内元素。

块元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
块级元素容器可以容纳多个嵌套的块级标签或行内标签。
常见的块元素有 <h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li>等，其中 <div>标记是最典型的块元素。
块元素的宽度默认是容器（父级宽度）的100%
p标签内不能放div标签，段落里面不能放块级元素，同理，文字类块级标签(h1,h2,h3,h4,h5,h6,dt)内，不能放其他块级元素。

行元素

行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，默认宽度就是它本身内容的宽度，常用于控制页面中文本的样式。
行内元素不能嵌套块级标签，只能嵌套其他的行内标签。
常见的行内标签有 <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <a>, <span>等，其中 <span>标记是最典型的行内元素。

举个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Dispaly</title>
</head>
<body><!-- 行内元素 --><span>我是span</span><strong>我是strong标签</strong><s>我是一个s标签</s><!-- 块级标签 --><div>我是一个div</div></body>
</html>

页面：

行内块元素

行内块元素和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙，一行可以显示多个。
其默认宽度就是它本身内容的宽度。
行内块高度，行高、外边距以及内边距都可以控制。
常见的行内块标签有<img />, <input />, <td>

三种模式的区别和联系

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

display改变标签显示模式

display为inline或block

display可以控制标签的显示模式，比如，将块级元素(例如<div>)按照行级标签的形式显示，再比如，将行级标签(例如<strong>)按照块级标签的形式显示，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Dispaly</title><style>div {background-color: silver;display: inline; /*  可以让块元素变成行内显示模式*/}strong  {display: block; /*  可以让行内元素变成块显示模式*/background-color: yellow;}</style></head>
<body><!-- 行内元素 --><span>我是span</span><strong>我是strong标签</strong><s>我是一个s标签</s><!-- 块级标签 --><div>我是一个div</div></body>
</html>

页面：

display为none

若我们把display设置为none，那么这个标签就会被从页面中移除，不进行显示，也不影响页面布局：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Dispaly</title><style>div {background-color: silver;display: inline; /*  可以让元素编成行内模式的标签*/}strong  {/* display: block; */display: none;background-color: yellow;}</style></head>
<body><!-- 行内元素 --><span>我是span</span><strong>我是strong标签</strong><s>我是一个s标签</s><!-- 块级标签 --><div>我是一个div</div></body>
</html>

页面：

visibility为hidden

我们也可以设置visibility为hidden，将标签隐藏起来，但是它和display: none有点不同，它仅仅是不显示标签，但是依然占用我们的页面空间：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Dispaly</title><style>div {background-color: silver;display: inline; }strong  {visibility: hidden;background-color: yellow;}</style></head>
<body><!-- 行内元素 --><span>我是span</span><strong>我是strong标签</strong><s>我是一个s标签</s><!-- 块级标签 --><div>我是一个div</div></body>
</html>

页面：

display为inline-block

我们先来看下面一段代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Dispaly</title><style>div {background-color: silver;display: inline-block;height: 100px;}span {background-color: blue;height: 200px;}</style></head>
<body><!-- 行内元素 --><span>我是span</span><strong>我是strong标签</strong><s>我是一个s标签</s><!-- 块级标签 --><div>我是一个行内块div</div></body>
</html>

页面：

可以看到，行内块元素可以设置宽高，但是行内元素却不能。

行内元素,块级元素,行内块元素之间的对比

	是否可以设置宽高	边距	是否可以独占行
行内元素	×	左右	×
块级元素	√	上下左右	√
行内块元素	√	左右	×

CSS基础(part5)--display相关推荐

CSS基础_Day01
CSS基础一.CSS简介 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. CSS 的选择器区分大小写,因此要谨慎使用大写. 可以设置以下内容: ...
和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
两天学会css基础（一）
什么是css?css的作用是什么? CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式,搭建页面结构,比如设置元素的宽高大小,颜色,位置等等. 学 ...
前端html,css基础总结
0.1.css引入界面的方式: 内联式:通过标签的style属性,在标签上直接写样式. <div style="width:100px; height:100px; backgroun ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网这里是 html4 的内容大标题小节一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局...
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style>#user {width: 200px;}& ...