我要当FE Developer--面试题章--CSS篇1

上文说到了HTML 一些标准,一些标签的异同,还有一些新的标签的特性。而今天将提到它的好兄弟CSS的一些问题。(其实CSS还是挺难的)


START

  • 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
css.jpg

标准的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属性,然后弹性盒子模型简介/)
> �也欢迎读者提供。。简化版本 ,我实在无法总结。


 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,453评论 1 19
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,136评论 0 1
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,221评论 24 450
  • 补一篇日志,妈妈今天生病了,拉肚子我陪她看看医生。中午和艳敏的朋友一起吃饭,下午去大周把开户的流程教给荣菲,赵哥说...
    徐晓琳111阅读 179评论 0 0