介绍一下标准的CSS的盒子模型?
与低版本IE的盒子模型有什么不同的?
标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
低版本IE,宽度=内容宽度(content+border+padding)+ margin
CSS哪些属性可以继承?
font-size, font-family, color
CSS哪些属性不可以继承?
border, padding, margin, width, height
box-sizing
用来控制元素的盒子模型的解析模式,默认为content-box
设置元素的height/width属性指的是border + padding + content部分的高/宽
CSS选择器有哪些(9)
- id选择器(#myid)
- 类选择器(.myclassname)
- 标签选择器(div, h1, p)
- 相邻选择器(h1 + p)
- 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器(*)
- 属性选择器(a[rel=”external”])
- 伪类选择器(a:hover, li:nth-child)
优先级原则
优先级(就近原则):
!important > [ id > class > tag ]
!important 比内联优先级高
优先级计算
元素选择符 1
class选择符 10
id选择符 10
标签选择符 1000
style 行内 1000
!important infinity 无限
CSS3伪类选择器有那些(5)
- 动态伪类选择器
E:link(链接伪类选择器):选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited(链接伪类选择器 ):选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active(用户行为选择器):选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上
E:hover (用户行为选择器): 选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus (用户行为选择器): 选择匹配的E元素,而且匹配元素获取焦点
- UI元素状态伪类选择器
E:checked(选中状态伪类选择器):匹配选中的复选按钮或者单选按钮表单元素
E:enabled(启用状态伪类选择器 ):匹配所有启用的表单元素
E:disabled(不可用状态伪类选择器):匹配所有禁用的表单元素
- a标签有4种伪类(即对应四种状态)
:link “链接”:超链接点击之前
:visited “访问过的”:链接被访问过之后
:hover “悬停”:鼠标放到标签上的时候
:active “激活”: 鼠标点击标签,但是不松手时。
- 结构伪类选择器
E:fisrt-child :作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child :作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root:选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n):选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0.
E F:nth-last-child(n):选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配最后一个元素,与last-child等同
E:nth-of-type(n) :选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n):选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type:选择父元素内具有指定类型的第一个E元素,与E:nth-of-type(1)等同
E:last-of-tye :选择父元素内具有指定类型的最后一个E元素,与E:nth-last-of-type(1)等同
E:only-child :选择父元素只包含一个子元素,且该子元素匹配E元素
E:only-of-type:选择父元素只包含一个同类型子元素,且该子元素匹配E元素
E:empty: 选择没有子元素的元素,而且该元素也不包含任何文本节点
- 否定伪类选择器
E:not(F):匹配所有除元素F外的E元素
display有哪些值?说明他们的作用?
display:none;
inline(默认)–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block
position的值?
static(默认):按照正常文档流进行排列;
relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位;
absolute(绝对定位):参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位;
fixed(固定定位):所固定的参照对像是可视窗口。
如何清除浮动?
如何清除定位?
CSS3有哪些新特性
RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-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(弹性盒布局模型)
css 监听动画效果
Vue 中的
vue 如何监听css动画结束的animationEnd事件
this.$refs.item_box[0].addEventListener("animationend",function(){});