1.盒模型
1.什么是盒子模型?
在我们HTML页面中,每一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、填充区(padding)、边框区(border)、外边界区(margin)四部分组成。
2.盒子模型有哪两种
标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异模式下: 一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)(IE浏览器)
3.标准和怪异模型的转换
box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。
2.BFC的理解?
1.BFC(Block Formatting Context),即块级格式化上下⽂,它是⻚⾯中的⼀块渲染区域,并且有⼀套属于⾃⼰的渲染规则:
2.触发BFC的条件包含不限于:
3.利⽤BFC的特性,我们将`BFC`应⽤在以下场景:
⾃适应多栏布局
3.清除浮动的4中方法
一、 额外标签法: 给谁清除浮动,就在其后额外添加一个空白标签 。
优点: 通俗易懂,书写方便。(不推荐使用
)
缺点: 添加许多无意义的标签,结构化比较差。
给元素small清除浮动(在small后添加一个空白标签clear(类名可以随意),设置clear:both;即可)
二、 父级添加overflow方法: 可以通过触发BFC的方式,实现清楚浮动效果。必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点: 简单、代码少、浏览器支持好
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏。
三、使用after伪元素清除浮动: :after方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after,,zoom(IE专有属性)可解决ie6,ie7浮动问题(较常用推荐)
优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点: 由于IE6-7不支持:after,使用zoom:1
四、使用before和after双伪元素清除浮动:(较常用推荐
)
<style>
.father{
border: 1px solid black;
*zoom: 1;
}
.clearfix:after,.clearfix:before{
content: "";
display: block;
clear: both;
}
.big ,.small{
width: 200px;
height: 200px;
float: left;
}
.big{
background-color: red;
}
.small{
background-color: blue;
}
</style>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</div>
postiton定位5个值
1、position: static
static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。
2、position: relative
relative(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响。
3、position: absolute
absolute(绝对定位)是指给元素设置绝对的定位,相对定位的对象可以分为两种情况:
1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。
4、position: fixed
可以简单说fixed是特殊版的absolute,fixed元素总是相对于body定位的。
5、inherit
继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
- 行内元素有:
span a b i img input select strong
- 块级元素有:
div p h1-h6 ul table form ul ol li dl dt dd…
- 空元素(没有内容):
<br> <hr> <img> <input> <link> <meta>
你知道CSS Hack吗?
一.什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式:
属性Hack、选择符Hack、条件注释Hack, Hack主要针对IE浏览器
1、条件Hack
条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
2、属性Hack
属性级Hack:
比如IE6能识别下划线“”和星号“”,
IE7能识别星号“”,但不能识别下划线” ”,而firefox两个都不能认识。
background-color:red9; 9所有的ie浏览器可识别;
background-color:yellow0; 0 是留给ie8的,
3、选择符Hack
比如IE6能识别 *html .class{}
,IE7能识别*+html .class{}
简述一下src与href的区别
1.href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
2.src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;
在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
link与@import区别
link属于html标签。@import在css中使用表示导入外部样式表;
页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
link方式的样式的权重 高于@import的权重;
link 支持使用javascript改变样式 (document.styleSheets),后者不可