css样式的问题集合-原创手记-慕课网

关于css的优先级

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

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

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

在页面中只显示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: 属性控制文本的大小写。

四种隐藏内容的方法

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为定位