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

CSS3处理

时间:2018-08-31 19:32:25      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:动画   1.2   定义   visit   避免   现在   通配   也会   range   

1.CSS盒子模型?IE盒子模型?

2.box-sizing属性?

3.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

4.CSS优先级算法如何计算?

元素选择符: 1
class选择符: 10
id选择符:100
元素标签:1000

优先级(就近原则):!important > [ id > class > tag ]
!important 比内联优先级高

 

一.!important声明的样式优先级最高,如果冲突再进行计算。

 

 

二.如果优先级相同,则选择最后出现的样式。

 

三.继承得到的样式的优先级最低。

5.伪类和伪元素?

w3c中对于它们是这么解释的

  • 伪类:用于向某些选择器添加特殊的效果
  • 伪元素:用于将特殊的效果添加到某些选择器

总结:

  • 伪类与伪元素都是用于向选择器加特殊效果
  • 伪类与伪元素的本质区别就是是否抽象创造了新元素
  • 伪类只要不是互斥可以叠加使用
  • 伪元素在一个选择器中只能出现一次,并且只能出现在末尾
  • 伪类与伪元素优先级分别与类、标签优先级相同

伪类:

SelectorMeaningCSS
:active 选择正在被激活的元素 1
:hover 选择被鼠标悬浮着元素 1
:link 选择未被访问的元素 1
:visited 选择已被访问的元素 1
:first-child 选择满足是其父元素的第一个子元素的元素 2
:lang 选择带有指定 lang 属性的元素 2
:focus 选择拥有键盘输入焦点的元素 2
:enable 选择每个已启动的元素 3
:disable 选择每个已禁止的元素 3
:checked 选择每个被选中的元素 3
:target 选择当前的锚点元素 3
:first-of-type 选择满足是其父元素的第一个某类型子元素的元素 3
:last-of-type 选择满足是其父元素的最后一个某类型子元素的元素 3
:only-of-type 选择满足是其父元素的唯一一个某类型子元素的元素 3
:nth-of-type(n) 选择满足是其父元素的第n个某类型子元素的元素 3
:nth-last-of-type(n) 选择满足是其父元素的倒数第n个某类型的元素 3
:only-child 选择满足是其父元素的唯一一个子元素的元素 3
:last-child 选择满足是其父元素的最后一个元素的元素 3
:nth-child(n) 选择满足是其父元素的第n个子元素的元素 3
:nth-last-child(n) 选择满足是其父元素的倒数第n个子元素的元素 3
:empty 选择满足没有子元素的元素 3
:in-range 选择满足值在指定范围内的元素 3
:out-of-range 选择值不在指定范围内的元素 3
:invalid 选择满足值为无效值的元素 3
:valid 选择满足值为有效值的元素 3
:not(selector) 选择不满足selector的元素 3
:optional 选择为可选项的表单元素,即没有“required”属性 3
:read-only 选择有"readonly"的表单元素 3
:read-write 选择没有"readonly"的表单元素 3
:root 选择根元素 3

伪元素:

SelectorMeaningCSS
::first-letter 选择指定元素的第一个单词 1
::first-line 选择指定元素的第一行 1
::after 在指定元素的内容前面插入内容 2
::before 在指定元素的内容后面插入内容 2
::selection 选择指定元素中被用户选中的内容

 

 

6.CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

7.浮动元素的上下左右居中?

border1px solid red;

floatleft;

positionabsolute;

width200px;

height100px;

left50%;

top50%;

margin: -50px 0 0 -100px;

8.绝对定位的左右居中?

border1px solid black;

positionabsolute;

width200px;

height100px;

margin0 auto;

left0;

right0;

9.display有哪些值?

10.css3新增那些特性?

  1. RGBA和透明度

  2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

  3. word-wrap(对长的不可分割单词换行)word-wrap:break-word

  4. 文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)

  5. font-face属性:定义自己的字体

  6. 圆角(边框半径):border-radius 属性用于创建圆角

  7. 边框图片:border-image: url(border.png) 30 30 round

  8. 盒阴影:box-shadow: 10px 10px 5px #888888

  9. 媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

11.用纯CSS创建一个三角形?

width0;

height0;

border-top40px solid transparent;

border-left40px solid transparent;

border-right40px solid transparent;

border-bottom40px solid #ff0000;

12.常见的兼容性问题?

  1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

  2. IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大。hack:display:inline;将其转化为行内属性。

  3. 渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。

    {

    background-color:#f1ee18;/*所有识别*/

    .background-color:#00deff\9; /*IE6、7、8识别*/

    +background-color:#a200ff;/*IE6、7识别*/

    _background-color:#1e0bd1;/*IE6识别*/

    }

  4. 设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度。hack:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

  5. IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

  6. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

  7. 超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

13.CSS里的visibility属性有个collapse属性值?在不同浏览器下以后什么区别?

当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。

  1. chrome中,使用collapse值和使用hidden没有区别。

  2. firefox,opera和IE,使用collapse值和使用display:none没有什么区别。

14.display:none与visibility:hidden的区别?

15.position跟display、overflow、float这些特性相互叠加后会怎么样?

display属性规定元素应该生成的框的类型;position属性规定元素的定位类型;float属性是一种布局方式,定义元素在哪个方向浮动。
类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。

16.浮动带来的问题?

  1. 父元素的高度无法被撑开,影响与父元素同级的元素

  2. 与浮动元素同级的非浮动元素(内联元素)会跟随其后

  3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。

17.清除浮动?

  1. 最后一个浮动元素后加空div标签 并添加样式clear:both。

  2. 包含浮动元素的父标签添加样式overflow为hidden或auto。

  3. 父级div定义zoom

18. CSS 预处理器使用?

Less(@) sass($)

19.CSS优化、提高性能的方法有哪些?

  1. 避免后代选择符

  2. 避免链式选择符

  3. 使用紧凑的语法

  4. 避免不必要的命名空间

  5. 避免不必要的重复

  6. 避免!important,可以选择其他选择器

  7. 尽可能的精简规则,你可以合并不同类里的重复规则

20.怎么让Chrome支持小于12px 的文字?

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

21.position:fixed;在android下无效怎么处理?

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

22.手动写动画,你认为最小时间间隔是多久,为什么?

多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。

23.li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
解决方法:

    1. 可以将<li>代码全部写在一排

    2. 浮动li中float:left

    3. 在ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px

 

24.display:inline-block 什么时候会显示间隙?

  1. margin正值的时候 解决:margin使用负值

  2. 使用font-size时候 解决:font-size:0、letter-spacing、word-spacing

25.style标签写在body后与body前有什么区别?

页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)

26.HTML5 存储类型?

HTML5 提供了下面两种本地存储方案:

  • localStorage 用于持久化的本地存储,数据永远不会过期,关闭浏览器也不会丢失。
  • sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储

27.https://yq.aliyun.com/articles/630745?spm=a2c4e.11153940.blogcont609475.15.259b1b2ebFKtaq

CSS3处理

标签:动画   1.2   定义   visit   避免   现在   通配   也会   range   

原文地址:https://www.cnblogs.com/guoz/p/9567341.html

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