一、盒模型
1、什么是盒子模型?
在我们HTML页面中,每一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、填充区(padding)、边框区(border)、外边界区(margin)四部分组成。
2、盒子模型有两种。
1、标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
2、怪异模式下: 一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)(IE浏览器)
3、标准和怪异模型的转换
box-sizing:content-box; 标准模式的盒子模型标准
box-sizing:border-box; 怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。
二、BFC
1、什么是BFC?
BFC就是“块级格式化上下文
”的意思,BFC是一块独立的布局环境,保护其中内部元素不收外部影响,也不影响外部。本身BFC是一种css的布局方式,只是我们可以利用它来解决外边距折叠的问题,BFC并不是专门用来解决这个问题而创的;
2、如何触发BFC?
给盒子模型设置以下的属性:
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
3、BFC解决边距折叠问题
(1)父子关系边距问题
父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距,我们可以给父元素添加 overflow:hidden这样父元素就变为 BFC,不会随子元素产生外边距
(2)兄弟之间的折叠
同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个
4、BFC原理
- BFC内部的盒子,会在垂直方向,一个接一个地放置。垂直方向上也会发生边距重叠。
- BFC就是页面上的一个独立容器,容器里面的子元素不会影响到外面的元素,外边的也不会影响里边的。
- BFC的区域不会与float重叠。
- 计算BFC的高度时,浮动元素也被计算在内。
三、清除浮动
1、为什么要清除浮动?
清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题
2、清除浮动的四种方法:
1.额外标签法: 给谁清除浮动,就在其后额外添加一个空白标签 。
优点: 通俗易懂,书写方便。(不推荐使用
)
缺点: 添加许多无意义的标签,结构化比较差。
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
.clear{
clear:both;
}
2.父级添加overflow方法:可以通过触发BFC的方式,实现清楚浮动效果。必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点: 简单、代码少、浏览器支持好
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。 不能和position配合使用,因为超出的尺寸的会被隐藏。
.fahter{
width: 200px;
border: 1px solid yellow;
overflow: hidden;
}
3.使用after伪元素清除浮动::after
方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after,,zoom(IE专有属性)可解决ie6,ie7浮动问题(较常用推荐
)
优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点: 由于IE6-7不支持:after
,使用zoom:1
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
4.使用before和after双伪元素清除浮动:(常用推荐
)
.clearfix:after,.clearfix:before{
content: "";
display: block;
clear: both;
}
四、postiton定位的属性
1.position:relative(相对定位)
指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留, 其他的元素位置不会受到影响。
2.position:absolute(绝对定位)
是指给元素设置绝对的定位,相对定位的对象可以分为两种情况:
1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。
3.position: fixed(固定定位)
fixed元素总是相对于body
定位的。
4.position: static
static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。
5.inherit
继承父元素的position
属性,但需要注意的是IE8以及往前的版本都不支持inherit
属性。
6.sticky (吸顶效果)
设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是 top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据 设置的left、top等属性成固定位置的效果。
五、元素的居中方式
1.子绝父相后,子分部向左向上移动本身宽度和高度的一半(也可以用 transform:translate(-50%,-50%))最常用方法
.father:{
width: 400px;
height: 400px;
background: red;
position: relative;
}
.son{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
2.
父向子绝,子元素所有定位为0,margin设置auto自适应。
.father{
width: 400px;
height: 400px;
background: red;
position: relative;
}
.son{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
3.父元素设置成弹性盒,子元素横向居中,纵向居中
.father{
width: 400px;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 200px;
height: 200px;
background: yellow;
}
六、CSS Hack
什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式:
属性Hack、选择符Hack、条件注释Hack, Hack主要针对IE浏览器
1.条件Hack
条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
2.属性Hack
比如IE6能识别下划线“”和星号“”,
IE7能识别星号“”,但不能识别下划线” ”,而firefox两个都不能认识。
3.选择符Hack
IE6能识别 *html .class{}
,IE7能识别*+html .class{}
浏览器优先级别:
FF(FireFox火狐) <IE7<IE6,CSS hack
七、常见的块级/行内/空元素
- 行内元素有:
span a b i img input select strong
- 空元素(没有内容):
<br> <hr> <img> <input> <link> <meta>
- 块级元素有:
div p h1-h6 ul table form ul li dl dt dd…
八、简述一下src与href的区别
1.href
href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
2.src
src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;
在请求src资源时会将其指向的资源下载并应用到文档内,当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此
九、link与@import的区别
1.link属于html标签。@import在css中使用表示导入外部样式表;
2.页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
3.import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
4.link方式的样式的权重 高于@import的权重;
5.link 支持使用javascript改变样式 (document.styleSheets),后者不可
十、HTML5和css3新特性
-
css3新特性
-
选择器
( 基本选择器 层级选择器 内容选择器 过滤选择器 属性过滤选择器 子元素过滤选择器 表单属性过滤选择器 )
-
-
背景和边框 ( background-size, border-radius,box-shadow )
-
文本效果
-
2D/3D 转换 — 变形(transform)、过渡(transtion)、动画(animation)
-
h5新增特性:
-
语义化标签:header、footer、section、nav、aside、article
-
增强型表单:input 的多个 type (email date color search)
-
新增表单属性:placehoder、required、min 和 max
-
音频视频:audio、video
-
本地存储: localStorage 没有时间限制的数据存储; sessionStorage, session 的数据存储,当用户关闭浏览器窗口后,数据会被删除
-