2020-03-25

1.BFC是什么?

块级格式化上下文,指页面中的一个渲染区域,并且拥有一套渲染原则。

如何触发BFC

(1)设置float除none以外的值(例如left或right等)

(2)设置overflow除visible以外的值(hidden  scroll auto)

(3)设置display值为table-cell,table-caption,inline-block,flex之一

(4)设置position值为absolute或fixed

BFC的作用

(1)解决上下margin重叠问题

(2)解决高度塌陷问题

(3)用于布局

与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖,利用该特性可实现多列布局

BFC的特性

(1)浮动的子元素会参与父元素的高度计算(父级触发了BFC)

(2)子元素设置的margin值不会传递给父元素(父级触发了BFC)

(3)当上下两个元素同时设置了margin-bottom和margin-top,不会重叠(给其中一个元素嵌套一个父级,并触发BFC)

定位流>浮动流>文档流

2.IE的双编剧bug:块级元素float后设置横向margin,IE6显示的margin比设置的较大

_display:inline

3.HTML和XHTML有什么区别?

(1)所有的标记都必须有一个相应的结束标记

(2)所有标签的元素和属性的名字都必须使用小写

(3)所有的XML标记都必须合理嵌套

(4)所有的属性必须用引号“ ”括起来

(5)把所有的特殊符号用编码表示

(6)给所有属性赋一个值

(7)不要在注释内使用 --

(8)图片必须有说明文字

4.HTML常见兼容性问题

(1)双边距bug float引起的  使用display:inline

(2)在IE6中,不能识别较小高度的容器(添加overflow:hidden)

(3)超链接hover点击后失效,改变属性顺序:link visited hover active

(4)图片默认有空隙(float:left或display:block或vertical-align:bottom)

(5)IE6不能识别min-height属性(!important或_height)

height:auto!important;

height:500px; 

min-height:500px;

#test {

min-height:100px;

background:#BBB;

_height:100px;

overflow: visible;

}

(6)IE5-8不支持opacity

解决:filter:alpha(opacity=数值)

(7)a标签里嵌套img时,有些浏览器会出现有颜色的边框

解决:img{boreder:0}或img{border:none}

(8)鼠标指针bug

cursor:hand(只有IE8及以下浏览器支持)

设置为cursor:pointer(所有浏览器都支持)

(9)表单行高不一致

设置input{float:left} 或 input{vertical-align:hidden}

(10)百分比bug:在IE6下,子元素50%+50%按照四舍五入的计算会大于100%

给右边浮动的元素添加clear:right

5.对WEB标准以及W3C的理解与认识

答:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

6.前端页面有哪三层构成,分别是什么?作用是什么?

答:结构层 Html 表示层 CSS 行为层 js。

7.列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?

display的值

(1)block  将元素转换为块元素

(2)inline  将元素转换为内联元素(a,span等)

(3)inline-block  将元素转换为内联块元素(img input textarea select)

(4)list-item 将元素转换为li类型

position的值

absolute 

        生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 

fixed(老IE不支持)

        生成绝对定位的元素,相对于浏览器窗口进行定位。 

relative 

        生成相对定位的元素,相对于元素偏移前本身的位置 

static  默认值。没有定位

相对定位和绝对定位的区别

(1)参照物不同

(2)位置是否保留   相对定位保留位置,绝对定位不保留位置

8.css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

9.浏览器标准模式和怪异模式之间的区别是什么?

在标准模式下:浏览器按照HTML与CSS标准对文档进行解析和渲染;对于旧有的网页,浏览器启动怪异模式,就能够使得旧网页正常显示;

在怪异模式下:浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。对于新的网页,则可以启动标准模式,使得新网页能够使用HTML与CSS的标准特性。

区别:

对于IE,怪异模式和标准模式下的盒模型宽高计算方式是不一样的;因为IE的content部分是包含内边距和边框的,标准CSS盒模型的宽度和高度等于内容区的高度和宽度

10.text-align:center和line-height有什么区别?

  text-align是水平对齐,line-height是行间。

11.写一个表格以及对应的CSS,使表格奇数行为白色背景,偶数行为灰色,鼠标一上去为黄色背景。



    表格

    

    

        

        

            

            

            

            

            

        

        

            

            

            

            

            

        

        

            

            

            

            

            

        

    

表格标题
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5

扩展:

:link  超链接没有被访问过时的状态

:visited  链接访问过后的状态

:hover 鼠标划过时的状态

:active  鼠标按下时的状态

你可能感兴趣的:(2020-03-25)