ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
>标签的分类 ####1.1 块标签 ~~~ h1 ,p,ul,li,dl,dt,dd, 特点:独占一行,能设置width,height ~~~ ####1.2 内联标签 ~~~ a ,span,i,em,strong 特点:并排显示,不能设置width,height 不能设置margin-top,margin-bottom ~~~ ####1.3 内联块 ~~~ input,img,button 特点:1.并排显示,设置width,height ~~~ - 内联元素和内联块元素 块标签转化 ~~~ display:block;块标签默认值; display:inline;内联标签默认值; display:inline-block;内联块标签默认; 想转化成什么就加纳个默认值; ~~~ 不改变内联和内联块的属性,实现水平居中 ~~~ 父级{ text-align:content; } ~~~ >css选择器 定义:选定你所要改变的元素的一种方式。 ####2.1分类 ~~~ (1).css元素选择器 文档的元素就是最基本的选择器 p{color:pink} (2).class选择器 .test{color:yellow} (3).id选择器 #first{color:blue} (4).分组选择器 p,h4{background:gray} (5).后代选择器 div>span{} //选取div所有子元素为span的标签 (6).兄弟选择器 div+p{}选取紧邻div之后的第一个兄弟元素 div~p{}选取紧邻div之后的所有兄弟元素 (7).伪类选择器 div:hover{} input:focus{} (8).伪元素 ":before" 伪元素可以在元素的内容前面插入新内容 p:before{ content:'' } ":after" 伪元素可以在元素的内容之后插入新内容。 p:after{ content:'' } (9).属性选择 div[class='test']{} ~~~ ####2.2选择器的优先级别排序 ~~~ <div class='test' id='first'>hello world</div> 元素选择器<class选择器<ID选择器<!important div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important} ~~~ >问题 #####1下划线 text-decoration:none underline overline