标签分类与元素转换

Posted 2020-12-02 kyhboke

css
常见的css样式：
列表：
无序列表：
list-style-type 设置无序列表前面的列表符号
disc 表示实心圆
square表示实心方块
circle表示空心圆
none 表示去掉列表符号
list-style-position 设置列表前面的项目符号是否包含在整个标签宽度范围之内
默认 outside 不在宽度范围内
inside 表示包含在列表宽度范围内
list-style-image 表示以图片作为列表的项目符号

list-style:none; 表示去掉列表前面的项目符号

有序列表：
list-style-type:

标签的分类：
p 段落标签
h1 -- h6 标题标签
span 应用于段落内部分文字修改的标签
br 换行
hr 水平线
b 加粗
i 倾斜
a 超链接
sup 上标
sub 下标
img 图片
input 输入框
button 按钮
ol 有序列表
li 列表项
ul 无序列表
dl 定义列表
dt 定义的名词项
dd 定义的解释项
table 表格
tr 行
td 列 单元格
th 表头的单元格
thead 表头
tbody 表格主体
caption 表格标题
form 表单
select 下拉菜单
option 下拉列表项
textarea 文本域
div 普通盒子

大的范围分为两种：
单标记
双标记

标签的分类：
块级标签： 该标签会单独占据一行，可以手动设置宽和高
h1 --- h6 p br hr ol li ul dl dt dd table tr thead tbody caption
form div

行内标签： 该标签不会单独占据一行，无法手动设置宽和高，宽高是由里面的内容自动撑开
span b i a sub sup option

行内块级标签：该标签不会单独占据一行，但可以手动设置宽和高
img input button td th select textarea

标签之间的嵌套规则：
块级标签内部可以嵌套任意类型的标签
行内标签内部不允许嵌套块级标签
ul 或 ol 标签中 只允许li标签出现 li标签中可以嵌套任意标签

标签之间的转换：
display 表示元素之间的转换
block 表示其他元素转换成块级元素
inline 表示其他元素转换成行内元素
inline-block 表示其他元素转换成行内块级元素
none 表示将该元素隐藏

overflow: hidden; 表示设置溢出部分隐藏
visibility: hidden; 表示元素隐藏

visibility: hidden; 与display:none; 区别
同样都是对元素进行隐藏
visibility：表示占位隐藏
display：表示不占位隐藏