66-88

HTML/CSS部分:

1、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

举例:

行内元素:a、span、strong、em、i、input、select、label、b、button、textarea等;

块级元素:div、p、h1—h6、ul、ol、dl、li、dt、dd、blockquote等;

空元素:img、br、meta、link、input、hr

2、px和em的区别:

px和em都是长度单位,区别是:px的值是固定的,指定为多少就是多少,计算比较容易;em的值是相对的,它会继承父级元素的字体大小,一般浏览器默认字体大小为16px,所以未经调整的浏览器都符合1em=16px,12px=0.75em, 10px=0.625em

3、如何让div中的图片水平垂直居中:(大小不确定,图片高度是随机调取div高度)

答:方法很多,最简单的方法是把图片设置为背景:给背景设置background-position:center;

如果只能用图片:分两种情况:

(1)将图片宽高固定:

         水平居中:display:block;margin:0 auto;

         垂直居中:算出(div高度-图片高度)/2,得到margin-top值即可

(2)图片高度未知,用js实现:

         水平居住:display:block;margin:0 auto;

         垂直居中:用js算出(div高度-图片高度)/2,得到的值赋给margin-top即可

4、css选择器有哪些?哪些属性可以继承?css3新增伪类?

三种基本的选择器类型

语法如下:

◆标签名选择器,如:p{},即直接使用HTML标签作为选择器。

◆类选择器,如.polaris{}。

◆ID选择器,如#polaris{}。

注意,ID选择器跟类选择器有很大的不同:一个页面内不能出现相同的ID;再就是ID也是后台开发人员会经常用的,所以前端开发人员应该尽量少的使用。当然跟后台人员的工作配合十分娴熟之后,这些都不会成为限制。

扩展选择器

◆后代选择器,如.polaris span img{},后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。

◆群组选择器,如div,span,img{},群组选择器实际上是对CSS的一种简化写法,只不过把有相同定义的不同选择器放在一起,省了很多代码。


所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

css3新增伪类

:first-of-type    p:first-of-type    选择属于其父元素的首个 <p> 元素的每个 <p> 元素。     
:last-of-type    p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type    p:only-of-type    选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)    p:nth-last-child(2)    同上,从最后一个子元素开始计数。
:nth-of-type(n)    p:nth-of-type(2)    选择属于其父元素第二个 <p> 元素的每个 <p> 元素。   
:nth-last-of-type(n)    p:nth-last-of-type(2)    同上,但是从最后一个子元素开始计数。     
:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。  
:root    :root    选择文档的根元素。   
:empty    p:empty    选择没有子元素的每个 <p> 元素(包括文本节点)。  
:target    #news:target    选择当前活动的 #news 元素。
:enabled    input:enabled    选择每个启用的 <input> 元素。  
:disabled    input:disabled    选择每个禁用的 <input> 元素  
:checked    input:checked    选择每个被选中的 <input> 元素。  
:not(selector)    :not(p)    选择非 <p> 元素的每个元素。
::selection    ::selection    选择被用户选取的元素部分。

 

分类:

技术点:

相关文章: