CSS3有哪些新特性？
- RGBA和透明度;
-
background-imagebackground-origin(content-box/padding-box/border-box)background-sizebackground-repeat; -
word-wrap（对长的不可分割单词换行）word-wrap：break-word; - 文字阴影：
text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）; - font-face属性：定义自己的字体;
- 圆角（边框半径）：
border-radius属性用于创建圆角; - 边框图片：
border-image: url(border.png) 30 30 round; - 盒阴影：
box-shadow: 10px 10px 5px #888888; - 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性;
请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
用纯CSS创建一个三角形的原理是什么？
利用边框样式设计的;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
一个满屏品字布局如何设计?
第一种真正的品字：
- 三块高宽是确定的；
- 上面那块用margin: 0 auto;居中；
- 下面两块用float或者inline-block不换行；
- 用margin调整位置使他们居中。
第二种全屏的品字布局:
上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。
上下margin重合的问题
在重合元素外包裹一层容器，并触发该容器生成一个BFC。
例子 :
<div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>
<!--下面是css代码-->
.aside {
margin-bottom: 100px;
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 100px;
height: 200px;
background: #fcc;
}
.text{
/*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
overflow: hidden; //此时已经触发了BFC属性。
}
设置元素浮动后，该元素的display值是多少？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
-
<head>里边
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)"> - CSS :
@media only screen and (max-device-width:480px) {/css样式/}
CSS优化、提高性能的方法有哪些？
- 避免过度约束;
- 避免后代选择符;
- 避免链式选择符;
- 使用紧凑的语法;
- 避免不必要的命名空间;
- 避免不必要的重复;
- 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么;
- 避免！important，可以选择其他选择器;
- 尽可能的精简规则，可以合并不同类里的重复规则;
全屏滚动的原理是什么？用到了CSS的哪些属性？
-
原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过
margin-top实现; -
overflow：hidden；transition：all 1000ms ease；
让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高 ;
CSS优先级算法如何计算？
元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000
-
!important声明的样式优先级最高，如果冲突再进行计算。 - 如果优先级相同，则选择最后出现的样式。
- 继承得到的样式的优先级最低。
CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
网友评论