7_元素类型

一、元素类型的分类

元素类型的分类:块元素、行内元素、行内块元素
一.块元素的使用:块级元素、块状元素、块元素

1. 常见的块元素:div、p、h、ul>li、ol>li

2. 块级元素的常见特点

   • 块级元素可以直接设置宽高大小,通常都是以盒子的方式在浏览器中显示的
   • 块级元素默认是独占一行的,会上下排列
   • 为了嵌套其他标签或者是其他元素类型作为盒子实现网页布局

二.行内元素的使用:行内元素、内联元素

1. 常见的行内元素:a、span、i、em、b、strong

2. 行内元素的常见特点

   • 行内元素无法直接设置宽高大小,宽高由文本内容撑开的
   • 行内元素默认在一行内逐个显示
   • 常见bug:设置垂直方向的margin值是没有效果的

三.行内块元素的使用:之前根据css的显示分类第三种元素类型叫做可变元素(根据上下文的关系进行显示方式)

1. 常见的行内块元素:input、img
2. 行内块元素常见的特点
   • 可以直接设置宽高大小 => 块级元素
   • 可以在一行内逐个显示 => 行内元素
   • 拥有了块级元素设置宽高大小,行内元素在一行显示的共同特点
3. 问题:所有的行内块都会以基线对齐的(虚拟线)
4. 解决:vertical-align:top\bottom\middle

二、元素类型的转换

元素类型的转换

1. 属性:display(显示方式)
2. 属性值:官方有19个属性值,常用的只是两三个
   • block 块,将其他的元素类型转换为块级元素,使其具有块级元素的特点(a=>块级)
   • inline 行内,将其他的元素类型转换为行内元素,使其具有行内元素的特点
   • inline-block 行内块,将其他的元素类型转换为行内块元素,使其具有行内块元素的特点
   • list-item 了解 列表项目(有序无序) 和转换成块级元素的效果是一样的
   • none 无、隐藏(不占位置的)
3. 拓展:浮动属性不仅可以让元素脱离文档流,还默认将元素类型转换为行内块元素
4. 重点:block表示块级 还可以显示作用 和none形成一对应用
5. 总结none的用法
   • border:none 清除边框
   • list-style:none 清除列表样式
   • text-decoration:none 清除下划线
   • display:none 隐藏显示元素
   • background:none 清除背景
   • outline:none 点击文本框的显示样式
   • float:none 不浮动

三、动态伪类选择器

动态伪类选择器:表示输入移入文字的时候状态的变化

1. a:link{color: red;} /* 未访问的链接状态,必须给a */
2. a:visited{color: green;} /* 已访问的链接状态,必须给a */
3. a:hover {color: blue;} /* 鼠标滑过链接状态,可以随便给 */
4. a:active {color: yellow;} /* 鼠标按下去时的状态,必须给a */
5. 注意
   • 动态伪类选择器使用的时候顺序不能乱
   • 只需要记住一个hover即可

四、hover的使用

hover的常见用法:表示鼠标移入悬停时候触发的效果

1. 改变自己的状态 自身选择器:hover{}
2. 通过父级改变子级的状态 父级选择器:hover 子级选择器{}
3. 通过兄弟改变后面一个兄弟元素的状态 兄弟选择器:hover +相邻一个兄弟选择器{}
4. 通过兄弟改变后面所有兄弟元素的状态 兄弟选择器:hover ~相邻所有兄弟选择器{}

五、图片居中显示

实现img结构居中对齐

1. 在父级元素上设置text-align:center控制图片水平方向居中
2. 在img后面设置任意标签(不要有换行)
3. 给标签转换成行内块元素(宽度为0 高度为100%)
4. 将图片和辅助线都设置居中对齐 vertical-align:middle

六、关于图片的默认bug

问题:图片会默认向下撑开3~6px的间距
解决
- 转换为块级元素
- 基线对齐 vertical-align:top