css为什么要用浮动_CSS问题和解决

1. 浏览器私有前缀(兼容)

-moz-    

2. 浮动引起的问题和解决

问题1

父元素高度撑不开，同父级的元素紧随其后，会被浮起来的子元素遮挡

解决

1. 为父元素固定高度
2. 父元素设置 overflow:hidden;
3. 子级最后添加一个空标签，赋予clear: both;
4. 给父元素标签class="clearfix"，样式如下：

.

问题2

1、2、3，12浮动，3不浮动，12会盖在3上面

解决

1. 给3 clear: both; 3就会去往下一行，不会被遮盖

3. position的值分别相对哪个位置定位？

• relative相对自己原来位置
• absolute相对父元素定位
• fixed相对于浏览器窗口

4. 哪些样式可以继承？

① 字体系列属性

• font-family：字体系列
• font-weight：字体的粗细
• font-size：字体的大小
• font-style：字体的风格

② 文本系列属性

• text-indent：文本缩进
• text-align：文本水平对齐
• line-height：行高
• word-spacing：单词之间的间距
• letter-spacing：中文或者字母之间的间距
• color：文本颜色

③ 元素可见性：

• visibility：控制元素显示隐藏

④ 列表布局属性：

• list-style：列表风格

⑤ 光标属性：

• cursor：光标显示为何种形态

5. 为什么要初始化CSS？

不同浏览器对标签的默认值是不同的，不初始化，会在不同浏览器产生差异

6. 如何居中div？居中浮动元素？

div 

7. div+CSS实现3栏布局(左右固定200px，中间自适应)

html

<

css

.

8. 几种IE6 Bug

① 双边距问题，双倍margin，float引起的

解决：display: inline;

② 3像素问题，float引起的

解决：_margin-right: -3px;

③ 超链接hover伪类样式，单击后失效

使用正确的书写顺序：LVHA(link, visited, hover, active)

④ z-index 问题

给父级添加 position:relative;

⑤ 定义高度很小的容器

overflow: hidden 或 font-size: 容器高度px；

⑥ PNG24 位的图片在 IE6 浏览器出现背景。

改成PNG8，也可以引入一段脚本处理

9. 图片下方有几像素的空白间隙

定义img为display:block 或 定义父容器 font-size:0;

10. 超出宽度的文字显示为省略号

overflow

11. 如何使英文单词发生词内断行？

word-wrap

12. 如何实现 IE6 下的 position:fixed?

html_

13. 如何让min-height兼容IE6？

.

14. CSS中，自适应的单位有哪些？

• 百分比：%
• 相对于视口宽度的单位：vw
• 相对于视口高度的单位：hw
• 相对于视口宽度或高度(取决于哪个小)的单位：vm
• 相对于父元素字体大小的单位：em
• 相对于根元素字体大小的单位：rem

15. CSS的content属性有什么作用？

应用在 before/after 伪元素上，用于插入生成的内容。

16. 外边距重叠规则

• 两个相邻的外边距都是正数时，合为较大的
• 都是负数，绝对值较大的
• 一正一负，取相加的和

17. rgba()和opacity的透明效果有什么不同？

• rgba()作用于元素及元素内所有内容，包括子元素
• opacity只作用于颜色、背景色，不影响子元素

18. 控制行间距和字间距的属性是什么？有什么妙用？

• line-height letter-spacing
• letter-spacing能消除inline-block元素之间的换行符空格间隙

19. 不显示元素的方法

• display:none;
• visibility:hidden;
• 宽高为0
• 透明度为0
• z-index:-1000;

20. 行内属性标签

• span、a、em、strong、select、option、img、input、textarea
• 后三个特殊，可以设置宽高

CSS3

1.first-child 与 first-of-type 的区别

• first-child，第一个子元素，并且认标签
• first-of-type，第一个元素

<

• p:first-child 匹配到p元素
• span:first-child 匹配不到span元素，第一个不是span
• p:first-of-type 匹配到p元素
• span:first-of-type 匹配到span元素

2. 当使用 transform:translate 属性时会出现闪烁现象，如何解决？

-webkit-backface-visibility

3. 用两种方式实现div元素以 每秒50px 左移100px

① 使用jQuery

$

② JS+CSS3

div

4. box-sizing: border-box;作用

• 写了的话，width=内容宽度+padding*2+borde*2; 内边距和边框改变的话，内容宽度也改变，但是盒子宽度是定值=width
• 没写，width=内容宽度。内边距和边框改变的话，内容宽度不变，盒子宽度不确定

5. transition和animation的区别

• transition：过渡动画，指定属性的开始值和结束值，设置平滑的过渡实现动画。
• animation：帧动画 关键帧@keyframes中定义属性值，实现更复杂的动画。

6. 淡入淡出的动画效果

@

7. 如何为盒子添加蒙版？

.

8. 如何相对于内容框定义图像？

.

9. 实现背景颜色线性渐变？

div 

10. CSS3 倒影

.

11. 把文本分隔为4列，间隔30px

div 

12. 用帧动画，使div移动200px

div