CSS常见问题

发表于 | 更新于: | 分类于

Alt text

一、link和@import的区别

  • link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  • link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  • ink支持使用Javascript控制DOM去改变样式；而@import不支持。

二、常用CSS选择器

  • id选择器（ #myid）
  • 类选择器（.myclassname）
  • 标签选择器（div, h1, p）
  • 相邻选择器（h1 + p）
  • 子选择器（ul > li）
  • 后代选择器（li a）
  • 通配符选择器（ * ）
  • 属性选择器（a[rel = “external”]，input[type=”text”]）
  • 伪类选择器（a: hover, li: nth - child,:first-child,:last-child,:hover,:focus,:active）
  • 多个类选择器

三、CSS规则权重

  • !important ： infinty
  • 内联样式 ： 1000
  • ID选择器 ： 100
  • Class 属性选择器 伪类选择器（：hover） : 10
  • 标签 : 1
  • 通配符 : 0
  • 注意 : 优先级相同时采用就近原则

四、CSS画三角形

1
2
3
4
5
width:0;
height:0;
border-width: 100px;
border-style:solid;
border-color:red transparent transparent transparent;

五、CSS标签嵌套

(一)div和p嵌套

p标签里是不能嵌套div的，如果嵌套了，则浏览器会解析成如下代码

1
2
3
4
5
6
7
8
<!-- 嵌套前 -->
<p>
	<div></div>
</p>
<!-- 浏览器解析后 -->
<p></p>
<div></div>
<p></p>

(二)a标签嵌套

a标签里是不能嵌套a的，如果嵌套了，则浏览器会解析成如下代码

1
2
3
4
5
6
7
<!-- 嵌套前 -->
<a href="https://www.cctv.com">
	<a href="https://www.cctv.com"></a>
</a>
<!-- 浏览器解析后 -->
<a href="https://www.cctv.com"></a>
<a href="https://www.cctv.com"></a>

六、CSS属性继承

(一)所有元素都可以继承的属性

  • 元素可见性：visibility
  • 光标属性：cursor

(二)内联可以继承的属性

  • 字体系列属性
  • 除text-indent、text-align之外的文本系列属性

(三)块级可以继承的属性

  • text-indent
  • text-align

七、display:none与visibility:hidden的区别

  • display : 隐藏对应的元素但不挤占该元素原来的空间。
  • visibility : 隐藏对应的元素并且挤占该元素原来的空间。

八、height:100% 不起作用

(一)问题

1
2
3
4
5
6
7
8
9
<html>
  <body>
    <div style="height: 100%">
      <p>
        想让这个div高度为 100% ,但是不起作用。
      </p>
    </div>
  </body>
</html>

(二)原因

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

(三)解决

1
2
3
4
5
6
7
8
9
<html style="height: 100%">
  <body style="height: 100%">
    <div style="height: 100%">
      <p>
        为他所有的父元素的高度都设置成100%,这个div的高度就变成100%了。
      </p>
    </div>
  </body>
</html>

九、inline-block之间有空白

(一)问题

1
2
3
4
5
6
<ul>
	/* 如果代码写成这样，会导致每个li之间有一个空白间隙 */
	<li style = "display : inline-block">1</li>
	<li style = "display : inline-block">2</li>
	<li style = "display : inline-block">2</li>
</ul>

(二)原因

浏览器的默认行为会把inline元素间的空白字符（空格换行tab）渲染成一个空格。也就是我们上面的代码li换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

(三)解决

  • 去掉换行，将所有li写在一排。
  • 将ul内的字符尺寸(font-size)直接设为0。

十、单词拼写检查

(一)问题

如果在 类型为text型的input元素、textarea元素、里输入一些不能构成单词的字母时,下面会有一条红色波浪线,这是因为input默认是打开了拼写检查的原因。

(二)解决

1
2
<textarea spellcheck="false">absolute testK</textarea>
<input type="text" spellcheck="false"/>

十一、transition动画导致文字模糊和抖动

(一)解决：添加backface-visibility

1
2
3
4
.designer .d_item .slide-image{
  transition: transform 700ms cubic-bezier(.694,0,.335,1);
  backface-visibility: hidden;
}