day07-元素类型

<!--

    一:块元素的特点

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

    2.块级元素的特点

        - 块级元素可以直接设置宽高大小,通常是以一个盒子的形状在浏览器中显示的

        - 块级元素默认独占一行,后面的空间也是属于当前元素的

        - 作用:块级元素可以嵌套行内元素或者其他元素作为盒子实现网页布局

    二:行内元素

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

    2.行内元素的特点

        - 不可以直接设置宽高大小,元素的大小是由文本内容决定的

        - 行内元素默认在一行内逐个显示

        - 注意:行内元素在设置margin-top/bottom会失效

    三:行内块元素

    1.常见的行内块元素:img、input

    2.行内块元素特点:

        - 可以直接设置宽高大小 => 拥有块元素的特点

        - 可以在一行内逐个显示 => 拥有行内元素的特点

        - 同时拥有两个元素类型的特点叫做行内块元素

    3.问题:所有的行内块元素都是以基线对齐的(布局问题)

    4.解决:使用css属性 vertical-align:top/bottom/middle

 -->

<!--

    元素类型的转换属性

    1.属性:display(控制、显示方式)

    2.属性值:官方提供了19个

        - block 块,可以将其他元素转换为块元素,使其具有块元素的特点

        - inline 行内,可以将其他元素转换成行内元素,使其具有行内元素的特点

        - inline-block 行内块元素,可以将其他元素转换成行内块元素,使其具有行内块元素的特点

        - 【了解】list-item 列表项目,本质是块级元素

        - 【重点】none 表示隐藏/删除元素(不占位置了)

            - list-style:none 清除列表的默认样式

            - text-decoration:none 清除a标签的默认下划线

            - border:none 清除边框

            - background:none 清除背景

            - outline:none 点击表单控件外面的边框

    3.拓展:关于浮动的设置

        - 浮动可以让元素脱离文档流,改变元素的排列位置(垂直=>水平)

        - 改变元素类型,改为行内块元素

    4.重点:none和block之间的应用(表示显示和隐藏)

 -->

<!--

    动态伪类选择器:可以元素的样式

    1.a:link {color: red;}            /* 未访问的链接状态,必须给a */

    2.a:visited {color: green;}       /* 已访问的链接状态,必须给a */

    3.a:hover {color: blue;}          /* 鼠标滑过链接状态,可以随便给 */

    4.a:active {color: yellow;}       /* 鼠标按下去时的状态,必须给a */

    注意点:伪类选择器有常见的四个,如果四个要使用的话必须按照当前的顺序去写,其中最为重要的是hover选择器

 -->

<!--

    hover选择器:表示当鼠标移入时候可以改变的一种状态

    1.给自己改名字=>hover改变自己的状态 自己的选择器:hover{}

    2.通过爷爷给父亲改名字=>hover改变子级状态 父级选择器:hover 子级选择器{}

    拓展hover不常见的情况

    1.通过哥哥改变后面的一个弟弟妹妹 => 通过自己改变相邻一个兄弟 +

    2.通过哥哥改变后面的所有弟弟妹妹 => 通过自己改变相邻所有兄弟 ~

 -->

<!--

    基线对齐的使用

    1.属性:vertical-align

    2.属性值

        - baseline 基线对齐,默认值

        - top/bottom/middle

    3.需求:实现图片居中?

    总结:设置img结构在容器中居中显示(今天会就行了)

    1.在父级元素上设置text-align:center可以让图片在水平方向居中显示

    2.在img图片后面添加一个任意标签,和图片之间不要有换行空格

    3.给辅助线设置代码:display:inline-block;width:0;height:100%;

    4.给图片和辅助线设置基线对齐:vertical-align:middle

 -->

<!--

    图片bug:默认会往下撑开3~6px的间距

    1.给图片设置基线对齐

    2.把图片转换成块元素

            vertical-align:middle 

            display: block

 -->