文章目录
基础学习第三篇 ,这里是我的html+css专栏
元素的显示方式
网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
1、块元素(block element)
常见的块元素:
div p h1-h6 table ul ol li dl
双标签 |
---|
p – 段落 |
h1~h6 – 标题 |
div – 容器 |
table – 表格 |
ul – 无序列表 |
ol – 有序表单 |
li – 单元格 |
form – 交互表单 |
menu – 菜单列表 |
address – 地址 |
dir – 目录列表 |
dl – 定义列表 |
blockquote – 块引用 |
center – 举中对齐块 |
fieldset – form控制组 |
noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容 |
noscript – 可选脚本内容(对于不支持script的浏览器显示此内容) |
pre – 格式化文本 |
单标签 |
---|
hr – 水平分隔线 |
isindex – input prompt |
块级元素特点
- 比较霸道,自己独占一行。
- 高度,宽度、外边距以及内边距都可以控制。
- 宽度缺省默认是容器(父级宽度)的100%。
- 是一个容器及盒子,里面可以放行内或者块级元素。
注意:文字类的元素内不能放块级元素
<p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div>
同理, <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
2、行内元素(inline element)
常见的行内元素:
img input a em span
单标签 |
---|
img – 图片 |
b – 粗体(不推荐) |
br – 换行 |
s – 中划线(不推荐) |
i – 斜体 |
input – 输入框 |
strong – 粗体强调 |
sub – 下标 |
sup – 上标 |
strike – 中划线 |
双标签 |
---|
a – 锚点 |
font – 字体设定(不推荐) |
em – 强调 |
span – 常用内联容器,定义文本内区块 |
u – 下划线 |
abbr – 缩写 |
acronym – 首字 |
bdo – bidi override |
big – 大字体 |
cite – 引用 |
code – 计算机代码(在引用源码的时候需要) |
dfn – 定义字段 |
kbd – 定义键盘文本 |
label – 表格标签 |
q – 短引用 |
samp – 定义范例计算机代码 |
select – 项目选择 |
textarea – 多行文本输入框 |
tt – 电传文本 |
行内元素的特点:
- 相邻行内元素在一行上,一行可以显示多个,遇到父级元素边界会自动换行。
- 高、宽直接设置是无效的。
- 高、行高以及内外边距都不可以改变
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意:
对于行内元素,需要注意的是:设置宽度width无效,设置高度无效,可以通过设置line-height来设置,设置margin只有左右有效,上下无效,设置padding只有左右有效,上下无效
链接里面不能再放链接
特殊情况链接 里面可以放块级元素,但是给 转换一下块级模式最安全
3、行内块元素
常见的行内块标签:
<img />、<input />、<td>
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
- 一行可以显示多个(行内元素特点)。
- 默认宽度就是它本身内容的宽度(行内元素特点)。
- 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
补充 :
<img />
究竟是什么元素是行内元素还是块级元素?
标签没有独占一行,所以是行内元素,这没啥问题
既然是行内元素为什么能够设置宽高呢?这个问题就要引申出下面部分了,
<img />
标签属于替换元素,具有内置的宽高属性,所以可以设置,具体解释看下面。
元素的定义
- 从元素本身的特点来讲,可以分为不可替换元素和替换元素
不可替换元素
(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)
如:<h1>我是标题</h1>
可替换元素
- 浏览器根据元素的标签和属性,来决定元素的具体显示内容
- 例如浏览器会根据 标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据 标签的type属性来决定是显示输入框,还是单选按钮等
- (X)HTML中的 、、、、 都是替换元素。这些元素往往没有实际的内容,即是一个空元素
- 可替换元素的性质同设置了display:inline-block的元素一致特殊的可替换元素
所以
-
<img>
属于可替换元素 -
<img>
同时具有行内元素,行内块,和块级元素的特性 - 替换元素一般有内在尺寸,所以具有 width 和 height,可以设定
例如你不指定 的 width 和 height 时,就按其内在尺寸显示,也就是图片被保存的时候的宽度和高度 - 对于表单元素,浏览器也有默认的样式,包括宽度和高度
- 、属于行内替换元素。height/width/padding/margin均可用。效果等于块元素
元素显示方式的转换
如当一个行内元素需要另外一种元素的特性
转换方式
- 转换为块元素:display:block;
- 转换为行内元素:display:inline;
- 转换为行内块:display: inline-block;
元素的显示与隐藏
-
目的(本质)
让一个元素在页面中消失或者显示出来
-
场景
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!
总结:
属性 区别 用途 display 显示 (重点) 隐藏对象,不保留位置 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛 visibility 可见性 (了解) 隐藏对象,保留位置 使用较少 overflow 溢出(重点) 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围
1.display 显示(重点)
-
display 设置或检索对象是否及如何显示。
display: none 隐藏对象 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
-
特点: display 隐藏元素后,不再占有原来的位置。
-
后面应用及其广泛,搭配 JS 可以做很多的网页特效。实际开发场景:
-
配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
2.visibility 可见性 (了解)
-
visibility 属性用于指定一个元素应可见还是隐藏。
visibility:visible ; 元素可视 visibility:hidden; 元素隐藏
-
特点:visibility 隐藏元素后,继续占有原来的位置。
-
如果隐藏元素想要原来位置, 就用 visibility:hidden
-
如果隐藏元素不想要原来位置, 就用 display:none (用处更多 重点)
3.overflow 溢出(重点)
- overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
- 一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
- 但是如果有定位的盒子, 请慎用overflow:hidden 因为它会隐藏多余的部分。
- 实际开发场景:
1. 清除浮动
2. 隐藏超出内容,隐藏掉, 不允许内容超过父盒子。