day02面试题总结

一.常用的页面布局

1.两栏布局：左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响。

2.圣杯布局：给左右两侧设置宽度，并为其留出空间，对三列标签设置宽度和浮动，并对footer标签清除浮动，左右标签设置负边距并进行定位，设置页面最小宽度。

3.双飞翼布局：设置各列的宽度和浮动，并为左右预留空间，footer标签清除浮动，左右标签放置到预留位置，设置最小宽度。

二.Flex布局

1.flex弹性布局，采用flex布局的元素成为“容器”。容器默认存在两个轴，水平主轴和垂直交叉轴。它的所有子元素自动成为容器成员，被称为“项目”。

2.容器属性

• flex-direction   --- 决定主轴的方向
• flex-wrap         --- 换行
• flex-flow          ---是flex-direction和flex-wrap的简写，默认值为 row nowrap
• justify-content ---定义元素在主轴上的对齐方式
• align-items      ---定义元素在交叉轴上的对齐方式
• align-content   ---定义多根轴线的对齐方式

3.项目属性

• order    ---定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow  ---定义项目的放大比例，默认为0。
• flex-shrink ---属性定义了项目的缩小比例，默认为1。
• flex-basis ---定义了在分配多余空间之前，项目占据的主轴空间。
• flex    ---属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
• align-self---允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

三.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

1.行内元素：span a b i img input select strong

2.块级元素：div p h1-h6 ul table form ul ol li dl dt dd...

3.空元素：<br> <hr> <img> <input> <link> <meta>

四.CSS Hack

1.一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

2.CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器

3.浏览器优先级别：FF<IE7<IE6,CSS hack

五.src与href的区别

1.href：href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

2.src：src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。