码迷,mamicode.com
首页 > Web开发 > 详细

css3部分注意事项

时间:2018-10-09 15:37:23      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:引入   lib   order   structure   css   缩放   ast   border   宽高   

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

 1、选择器

  1. id选择器( # myid)
  2. 类选择器(.myclassname)
  3. 标签选择器(div, h1, p)
  4. 相邻选择器(h1 + p)
  5. 子选择器(ul > li)
  6. 后代选择器(li a)
  7. 通配符选择器( * )
  8. 属性选择器(a[rel = "external"])
  9. 伪类选择器(a: hover, li:nth-child)

2、优先级为:

!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

3、CSS3新增伪类举例:

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

 

4、CSS3有哪些新特性?

CSS3实现圆角(border-radius),阴影(box-shadow), 对文字加特效(text-shadow、),线性渐变(gradient),

旋转(transform) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection. 媒体查询@media,多栏布局 border-image

CSS3中新增了一种盒模型计算方式: box-sizing 。盒模型默认的值是 content-box , 新增的值是 padding-box 和 border-box ,几种盒模型计算元素宽高的区别如下:

 content-box(默认)

布局所占宽度Width:Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom

 padding-box

布局所占宽度Width:Width = width(包含padding-left + padding-right) + border-top + border-bottom

 布局所占高度Height:Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

 布局所占宽度Width:Width = width(包含padding-left + padding-right + border-left + border-right)

 布局所占高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

css3部分注意事项

标签:引入   lib   order   structure   css   缩放   ast   border   宽高   

原文地址:https://www.cnblogs.com/lexiaoyao1992/p/9760408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!