Web前端学习整理(四)

元素类型:

-每个元素类型都有其特定的语义和功能且可以通过css和js来控制样式.

---

块元素:

-常见的块元素:<div>,<h1~h6>,<p>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>等

                块元素能够容纳其他块元素,可以用来构建页面的整体结构.

        -特性:

                1.独占一行.

                2.默认宽度占满父元素,除非设置了宽度属性.

                3.可以容纳其他块元素和内联元素.

                4.可以设置宽度,高度,内外边距等样式属性.

---

行内元素:

-常见的内联元素包括<span>,<a>,<strong>,<em>,<img>等.

        -特性:

                1.不独占一行.

                2.默认宽度由内容决定.

                3.不能包括块元素.

                4.不能设置宽度,高度,垂直内外边距.但是可以设置水平内外边距.

---

行内块元素:

-常见的行内块元素包括<img>,<input>,<button>等.

        -特性:

                1.不独占一行.

                2.默认宽度由内容决定.

                3.可以包含其他的行内元素和行内块元素.

                4.可以设置宽度,高度,水平和垂直内外边距.

---

类型转换:

-可以通过display属性对元素类型进行转换.

        -none 元素不显示:元素销毁.

        -block 元素变成块元素.

        -inline 元素变成行内元素.

        -inline-block 元素变成行内块元素.

---

空格解析问题:

html中的空格|换行|制表符等空白字符在渲染过程会被视作为普通文本的一部分,因此会出现一个空格多出,例如<img>标签之间的换行会变成一个空格.

解决办法:

        1.直接不换行书写.

        2.设置父类容器font-size:0,但是这个时候子元素如果有文字内容等需要设置相关的font-size.

---

伪类选择器:hover

        在样式中设置能够实现样式的变化.