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,使表格奇数行为白色背景,偶数行为灰色,鼠标一上去为黄色背景。
table { border: 1px solid #ddd;}
td{width: 30px;height: 10px;}
/* 奇数 */
tr:nth-child(odd) {background-color: gray}
/* 偶数 */
tr:nth-child(even) {background-color: pink}
tr:hover {background-color: yellow}
表格标题 | ||||
---|---|---|---|---|
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
1 | 2 | 3 | 4 | 5 |
扩展:
:link 超链接没有被访问过时的状态
:visited 链接访问过后的状态
:hover 鼠标划过时的状态
:active 鼠标按下时的状态