上文说到了HTML 一些标准,一些标签的异同,还有一些新的标签的特性。而今天将提到它的好兄弟CSS的一些问题。(其实CSS还是挺难的)
START
- 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
标准的CSS盒子模型: his width = content width + border width + padding width
比如 : .box {width:100px;border:10px solid #ccc;padding:10px; margin:10px;}
那么标准的CSS盒子模型BOX总的宽度为 140 = 100 + 210+210;
而对于 IE来说 width 就是 contend width.
- CSS选择符有哪些?哪些属性可以继承?
标签,Id和Class,还有伪类
其中 Class, 伪类a 是可以继承,还有 ul li dd dt 标签是可以继承的。
- CSS优先级算法如何计算?
原则一: 继承不如指定
原则二: id > .class > 标签选择符
原则三: 越具体 越 强大
CSS 优先级权重算法
元素标签中定义的样式(styles属性),加1000
每个ID选择符,加100
每个Class,每个属性选择符(如[attribute=])、每一个伪类 都是加10
每个元素选择符或者伪选择符是加1
然后四个数字累加就是得到CSS定义的优先级选项
然后就是从左到右比较大小,数字大的CSS样式优先级就高。注意
!important声明的演示优先级是最高的,如果是有冲突那么再进行计算。
如果优先级相同,那么选择最后出现的样式。
继承得到的样式的优先级最低。
- CSS3有哪些新特性?
E[att^="val"] ---- 匹配具有att属性,且具有以val开头的E元素
E[att$="val"] ---- 匹配具有attr属性,且具有以val结尾的E元素
E[att*="val"] ---- 匹配具有attr属性,且具含有val的E元素
E:root -------- 匹配文档的根元素。在HTML中,根元素永远是HTML
E:nth-child(n) ----匹配父元素中的第n个子元素E
E:nth-last-child(n)---匹配父元素中倒数第n个结构子元素E
E:nth-of-type(n)--- 匹配同类型中第n个同级兄弟元素E
E: nth-last-of-type(n) ---- 麻痹手好累
E: last-child ----匹配父元素最后一个E元素
E:first-of-type ---匹配同级兄弟元素中的第一个E元素
E:only-child ---匹配属于父元素的唯一子元素E
E:only-of-type ---匹配属于同种类型的唯一元素E
E:empty ----匹配没有任何子元素(包括text节点)的元素E
E:target ----匹配相关URL指向的E元素
E:enabeled-----匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled----匹配所有用户界面(form表单)中处于可用状态的E元素
E:checked -----选中状态
E:selection -----被选中或者处于高亮状态
E:not(s) ----- 匹配所有不匹配简单选择符(s)的元素E
E~F ----- 匹配E元素之后的F元素
- 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
margin居中
css中首选的让元素水平 居中的方法就是使用 margin的一些属性将margin-left和margin-right属性设置为auto即可。 在实际使用之中,我们可以为这些需要剧中的元素创建一个起容器 作用的div。但是必须特别注意的是,该容器必须指定宽度。text-align:
text-align:center并且引用到 body元素上即可 HACK!!!!组合使用以上两种方法
最后一种负外边距解决
Container {
position:absolute;
left:50%;
width:a px;
margin-left:-a/2px; //这里的a 是个数字
}
----
- display有哪些值?说明他们的作用。
> **常见的**
>inline, block, inline-block, none
>
>其中 none 之后,元素是不会保留在显示的空间中,但是`visibility:hidden`还会保留
>
>inline,block,inline-block,他们之间的区别是
>先来感性认识一下猛敲[DEMO](http://jsfiddle.net/qjgcjLm8/)
>
>**inline**
>如果内联对象设置了inline,那么对其设置width和height是没有用的,要让他size有所改变,必须要内容宽高改变,还有padding改变,**而且inline对象并不会单独占用一行**,后面的元素回紧随其后。
>
>**block**
>以block显示的对象是可以设置宽高的,而且它的实际宽高=**内容实际宽高+padding+border**
>它是独占一行的的。
>
>**那万一我既要设置一个元素的宽高,又要它不要独占一行**
>那就要inline-block了
>
>**不常见的**
>list-item
>list-item 此元素会作为列表显示。
>
>run-in此元素会根据上下文作为块级元素或内联元素显示。
>
>compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
>
>marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
>
>table 此元素会作为块级表格来显示(类似table),表格前后带有换行符。
>inline-table 此元素会作为内联表格来显示(类似table),表格前后没有换行符。
>table-row-group 此元素会作为一个或多个行的分组来显示(类似tbody)
table-header-group 此元素会作为一个或多个行的分组来显示(类似thead)
table-footer-group: 此元素会作为一个或多个行的分组来显示(类似tfoot)
table-row 此元素会作为一个表格行显示(类似 tr )。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 colgroup )。
table-column 此元素会作为一个单元格列显示(类似 col )
table-cell 此元素会作为一个表格单元格显示(类似 td 和 th)
table-caption 此元素会作为一个表格标题显示(类似 caption【真有面试题问得这么。。。】
---
- position的值relative和absolute定位原点是?
> relative 是以自己原始位置为定位位置
>absolute 是相对于离自己最近有定位父级元素为参照
----
- CSS3有哪些新特性?
> CSS选择器(路径选择)
>Font-face
>Word-wrap [有break-word的 会自动换行]
>Text-overflow [设置属性为clip的,溢出后就会截去字体,设置属性为ellipsis时就会显示省略符号]
- 请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
> 这里有[张鑫旭大神的讲解](http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex属性,然后弹性盒子模型简介/)
> �也欢迎读者提供。。简化版本 ,我实在无法总结。