手记

css样式的问题集合

关于css的优先级

继承不如指定
#id>.class>标签
越具体越强大
#id<标签#id   
.class<标签#id

1.line-height:150% 和 line-height:1.5 的区别是?

父元素的行高为 150%或 1.5em时,会根据父元素的字体大小先计算出行高值然后再让子元素继承,而 1.5是根据子元素的字体大小动态计算出行高值让子元素继承。

  1. 在页面中只显示logo图片不显示该页面的seo名称,可以用定位隐藏在页面的最左边来操作
h1{position:absolute;left:-9999;}

3.table表格边框双线合并 border-collapse:collapse
td中的内容居上对齐 vertical-align:top
4.css中A>B 表示选择A元素的所有子B元素,不管孙辈元素
 与A B的区别在于,A B选择所有后代元素,而A>B只选择一代。

A+B表示选择A元素的下一个元素B,A和B是同级

<div class="demo"></div>
<p></p>
.class+p

 a~b 选择器 a之后出现的所有 b。
两种元素必须拥有相同的父元素,但是 a不必直接紧随 b。
5.伪元素和伪类

p:first-line{color:#f80000;  }  //每个<p>元素的第一行选择的样式,p的内容有多行,只有第一行文字变色
p:first-letter{ font-size:200%;color:#f60;}向首字母设置特殊样式,用于块元素
div:first-child{ }属于其父元素的首个子元素的每个 <p> 元素
div::before{ }
div::after{position:absolute;content:‘ ’} 向该元素前面或后面插入内容,同时要加position:absolute;和content:‘ ’;来撑开元素

6. //text-indent: 首行缩进 // letter-space: 字间距 //word-space: 段落间距 //text-transform: 属性控制文本的大小写。

  1. 四种隐藏内容的方法
display:none;
position:absolute;left:-9999px; //以上两种隐藏不占位
visibitily:hidden;
opacity:0;  //这两种隐藏占位

8.遇到英文字符或者电话号码太长,换行要截取

{word-break:break-all; word-wrap:break-word;}

在table中文本不会自动换行,如果想要换行可以加个p标签一起使用
9.textarea右下角的缩放小三角可以通过resize来控制

{resize:both;  }
resize:none; //不能缩放
resize:horizontal和vertical分别可以在水平和垂直方向上缩放

10.默认一个元素中有两个inline-block内联块元素,是有一定间隙的,可以用letter-space:-5px/-0.31em来消除
也可以在文本元素中加font-size:0;
11.text-align:center;可以使文字/行内块元素display:inline-block;居中
12.居中显示的几种方法

1. {position:absolute;left:0px;top:0px;bottom:0px;right:0px; margin:auto;}
2. {positon:absolute;left;50%;top:50%;margin-left:-div的宽或高}
3. {positon:absolute;left;50%;top:50%; 然后用css3中的transform:-50%;}

13.position:absolute;相对于父元素最近一级的position设置为relative或者absolute的左上角为原点的,如果父元素没有设置,则以body为定位

0人推荐
随时随地看视频
慕课网APP