标签是典型的块元素。块级元素的特点
(1)比较霸道&＃xff0c;自己独占一行
(2)高度&＃xff0c;宽度&＃xff0c;外边距和内边距都可以控制
(3)宽度默认是父元素宽度的100%
(4)是一个容器及盒子&＃xff0c;里面可以放行内或者块级元素
行内元素(inline-level)
常见的行内元素,,,,,,,,,等&＃xff0c;其中
行内元素的特点
(1)相邻行内元素可以在一行上
(2)高和宽直接设置是无效的
(3)默认宽度就是它本身的宽度
(4)行内元素只能容纳本文或者其他行内元素
行内块元素(inline-block)
在行内元素中有几个特殊的标签![]()
,,,可以对他们设置宽高和对齐的属性&＃xff0c;这就是行内块元素
行内块元素的特点
(1)和相邻的行内元素在一行上&＃xff0c;但是之间会有空白的缝隙。
(2)默认宽度就是他本身内容的宽度。
(3)高度&＃xff0c;行高&＃xff0c;外边距以及内边距都可以设置
显示模式的区别总结
标签显示模式的转换 display
1.块转行内&＃xff1a;display:inline;
2.行内转块&＃xff1a;display:block;
3.块、行内元素转为行内块&＃xff1a;display:inline-block;
CSS的复合选择器础选择器之上&＃xff0c;对基础选择器进行组合形成的。
复合选择器可以更准确&＃xff0c;更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器&＃xff0c;通过不同的方式组合而成的。常用的复合选择器包括&＃xff1a;后代选择器、子选择器、并集选择器、伪类选择器等等。1.后代选择器
后代选择器又称为包含选择器&＃xff0c;可以选择父元素里面子元素&＃xff0c;其写法就是把外层标签写在前面&＃xff0c;内层标签写在后面&＃xff0c;中间用空格分隔&＃xff0c;当标签发生嵌套时&＃xff0c;内层标签就完成外层标签的后代。语法&＃xff1a; 元素1 元素2 { 样表说明}上述语法表示选择元素1里面的所有元素1(后代元素)。例如&＃xff1a; UI li { 样式声明 } /* 选择UI里面所有的li标签元素 */元素1和元素2中间用空格隔开元素1是父级&＃xff0c;元素2是子级&＃xff0c;最终选择的是元素2元素2可以是儿子&＃xff0c;也可以是孙子等&＃xff0c;只要是元素1的后代即可元素1和元素2可以是任意的基础选择器2.子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素&＃xff0c;简单理解就是选亲儿子元素。语法&＃xff1a; 元素1>元素2(样式声明)上述语法表示选择元素1里面的所有直接后代(子元素)元素2。例如&＃xff1a; div>p{ 样式声明 } /* 选择div里面所有最近一级p标签元素 */元素1和元素2中间用大于号隔开元素1是父级&＃xff0c;元素2是子级&＃xff0c;最终选择的是元素2元素2必须是亲儿子&＃xff0c;其孙子、重孙之类都不归他管&＃xff0c;你也可以叫他亲儿子选择器3.并集选择器
并集选择器可以选择多组标签&＃xff0c;同时为我们定义相同的样式&＃xff0c;通常用于集体声明。并集选择器是各选择器通过英文逗号(&＃xff0c;)连接而成&＃xff0c;任何形式的选择器都可以作为并集选择器的一部分。语法&＃xff1a; 元素1&＃xff0c;元素2{ 样式声明 }上述语法表示选择元素1和元素2.例如&＃xff1a; ul,div { 样式声明 } /* 选择ul和div标签元素 */元素1和元素2中间用逗号隔开逗号可以理解为和的意思并集选择器通常用于集体声明4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果&＃xff0c;比如给链接添加特殊效果&＃xff0c;或选择第1个&＃xff0c;第n个元素。伪类选择器书写最大的特点是用冒号(&＃xff1a;)表示&＃xff0c;比如&＃xff1a;hover、&＃xff1a;first-child因为伪类选择器很多&＃xff0c;比如有链接伪类、结构伪类等&＃xff0c;所以这里讲解常用的链接伪类选择器。链接伪类选择器a:link /* 选择所有未被访问的链接 */a:visited /* 选择所有已被访问的链接 */a:hover /* 选择鼠标指针位于其上的链接 */a:active /* 选择活动链接(鼠标按下未弹出链接) */链接伪类选择器注意事项为了确保生效&＃xff0c;请按照LVHA的循顺序什么&＃xff1a;link -&＃xff1a;visited -&＃xff1a;hover -&＃xff1a;active。记忆法&＃xff1a;love hate 或者LV 包包hao。因为a链接在浏览器中具有默认样式&＃xff0c;所以我们实际工作中都需要给链接单独指定样式。特殊的伪类选择器
focus伪类选择器&＃xff1a;focus伪类选择器用于选取获得焦点的表单元素焦点就是光标&＃xff0c;一般情况类表单元素才能获取&＃xff0c;因此这个选择器也主要针对于表单元素来说。 css复合选择器---链接伪类title> /*1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来*/ a:link { color: #333; text-decoration: none; } /*2.a:hover 选择鼠标经过的那个链接*/ a:hover { color: skyblue; } /*3.a:visited 选择点击过的(访问过的)链接*/ a:visited { color: orange; } /*4.a:active 选择的是我们鼠标正在按下的链接*/ a:active { color: green; } /*把获得光标的input表单元素选取出来(及鼠标光标所在的位置)*/ input:focus { background-color: pink; }style>head> 小猪佩奇a> 小猪佩奇a> body>html>
京公网安备 11010802041100号