9.css有哪些特性?
答:(1)层叠性:当多个样式作用在同一个标签上就会产生层叠,样式冲突,此时会选择最新写的样式;
(2)继承性:子元素的一些属性会继承父元素的(如:字体属性,背景颜色);
(3)优先级:会根据选择器的权重来判断选择什么样式。
注:h系列元素不能继承文字大小;a标签不能继承文字颜色。
10.css的基本选择器都有哪些?分别适合在什么情况下用?
答:(1)标签选择器:div{};
(2)类选择器:.classname{};
(3)id选择器:#idname{};
(4)后代选择器:div p{}; (包括子元素和子元素的子元素,也就是所有后代元素中的某个子元素)
(5)子选择器:ul>li{}; (与后代选择器类似,但是只是直接子元素,不包括更深的后代元素)
(6)交集选择器:div.classname p{};
(7)并集选择器:div,p{}; (多种不同标签的样式相同时)
(8)通配符选择器:*{}; (全选,不参与计算优先级,不推荐使用)
(9)伪类选择器:a:hover{};
(10)属性选择器:input[type="text"]{};
注:权重大小:important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符;
(【1】!important可以使得某个属性的权重最高;【2】z-index是调节层的显示优先级,决定哪个显示在最上方。)
11.常用的类名命名规范(不能以数字和特殊符号开头("_"下划线除外),尽量是英文)
答:(1) 头部:header; (h5新标签:header)
(2) 内容:content/container;
(3) 尾部:footer; (h5新标签:footer)
(4) 导航:nav; (h5新标签:nav)
(5) 侧栏:sidebar; (h5新标签:aside)
(6) 栏目:column;
(7) 登录条:loginbar;
(8) 标志:logo;
(9) 广告:banner;
(10) 页面主体:main;
(11) 新闻:news; (h5文章标签:article)
(12) 子导航:subnav
(13) 搜索:search;
(14) 子菜单:submenu;
(15) 友情链接:friendlink
12.行内元素和块元素有什么区别?行内元素的margin和padding可以设置吗?
答:区别:(1)行内元素在一行显示(水平方向排列),块元素独占一行(垂直方向排列);
(2)行内元素的宽高由内容撑起,默认不能设置宽高;块元素可设置宽高(默认情况下宽为父元素的宽);
(3)行内元素不能包含块元素,块元素可以包含行内元素和块元素(p元素为块元素但是不能包含div)
内外边距:行内元素padding和margin只有左右方向有效;(竖直方向的内边距只有效果,对其他元素无任何影响。)
块元素有效,但是块元素的两个盒子的上下边距同时设置,会选择最大的margin值执行(外边距合并)。
注:img,input这类元素是inline元素,但是同时也是replace元素,他与一般行内元素不太一样:
【1】可以设置宽高(img在只设置宽或者高一个属性时,会等比例变化);
【2】默认的,img元素在屏幕占据的空间与其图片的实际像素一致,除非有设置;
【3】如果img标签的包裹元素也为inline元素,则img的边界可以超出其直接父元素的边界。(如:a包裹img);
【4】从行为上看,img元素作为行内替换元素,有着类似与inline-block的行为。
13.什么是行内替换元素?
答:替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。例如:
浏览器会根据img标签的src属性来读取图片并显示出来。替换元素一般有内在尺寸,所以可以设置宽高。
注:HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。
14.对于盒模型的理解(盒模型包括的属性)?
答:
如图,这是一个盒子模型图:内容盒子,padding(内边距),border(边框),margin(外边距);
(1)content(实际内容盒子):显示页面的实际内容(如:文本,图像等),width和height就是设置的他;
(2)padding:内容周围的区域,不能填写内容,但是可以设置背景(background),值不能为负;
(3)border:背景覆盖的地方为边框内部(content+padding),将内容围起来;
(4)margin:在边框外设置的空白区域,为了与其他盒子隔开;
注: padding:当给盒子设置padding时,盒子的实际大小会被撑大;
但是盒子宽度被继承时设置,盒子不会被撑大,除非padding值大于父盒子的宽度,垂直方向有效。
margin:有外边距合并现象(11题),还有塌陷现象:子盒子不能踹父盒子,解决办法:
【1】给父盒子一个border,子盒子就可以随意设置margin值了;
【2】给父盒子设置:overflow:hidden;(这个属性会触发bfc:格式化上下文)。
15.盒模型有几种?怎么区分他们?如何切换他们?
答:盒模型有两种:(1)IE盒模型(IE6以下版本浏览器);(2)标准w3c盒模型。
区别:IE盒模型content的宽高包括border和padding,如:我们要计算盒模型的实际所占空间大小:
IE盒模型所占空间大小:width+margin(所占宽度计算:width=content+padding+border);
w3c盒模型所占大小:width+margin+border+padding(宽度计算: width=width );
切换:通过css3新增的box-sizing属性可以设置浏览器的盒模型。box-sizing有三个取值:
(1)content-box:使元素遵循w3c盒模型(默认值);
页面效果:更改padding或者border会改变盒子的实际大小。
(2)border-box:使元素遵循IE盒模型;
页面效果:更改padding和border的值不会改变盒子的大小,只在规定的宽度范围内变化。
(3)inhert:规定应从父元素继承box-sizing属性的值。
16.在css中除了px外你还知道哪些其他单位?简要说明下这些单位的区别。
答:em,pt,rem
(1)px像素(Pixel)是相对长度单位,是相对于显示器屏幕分辨率而言的
【注:px相对于em来说,算是绝对单位,因为px的大小和元素的其他属性无关,不支持IE的缩放】;
(2)em:相对长度单位,相对于当前对象内文本的字体尺寸。
【注:如果当前对行内文本的字体尺寸被人为设置,则相对于浏览器的默认字体尺寸(16px;1em=16px)】
(3)pt(point):在印刷排版中,是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸,但是在css中,要在屏幕上显示,必须先把以 pt 为单位的长度用转换媒介(DPI)转换为以像素为单位的长度。
(4)rem:相对单位,使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
注:【1】IE无法调整使用px作为单位的字体大小,所以用px定义文字,无法用浏览器字体放大的功能。
【2】em的值并不是固定的,会继承父元素的字体大小,所以,在用em时:
body选择器中声明font-size:62.5%;使得10px=1em,也就是说只需要将你的原来的px数值除以10加em。
【3】通过rem既可以只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
(目前,除了IE8及更早版本外,所有浏览器均已支持rem。)