一、盒模型
1.什么是盒子模型
在我们HTML页面中,每一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、填充区(padding)、边框区(border)、外边界区(margin)四部分组成。
2.盒子模型种类
标准盒模型:总宽度 = width + margin(左右)+ padding(左右)+border
怪异盒模型:总宽度 = width + margin(左右)( width 已经包含了 padding 和 border )
3.标准盒模型和怪异盒模型的转换
box-sizing:content-box; 标准盒模型
box-sizing:border-box; 怪异盒模型
box-sizing:inherit; 继承父元素的 box-sizing 属性的值
二、边距重叠——BFC
1.什么是BFC?
BFC就是“块级格式化上下文
”的意思,BFC是一块独立的布局环境,保护其中内部元素不收外部影响,也不影响外部。本身BFC是一种css的布局方式,只是我们可以利用它来解决外边距折叠的问题,BFC并不是专门用来解决这个问题而创的;
2.如何触发BFC
在 box 属性值为这些的情况下,都会让所属的box产生BFC。
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
也可以用排除法
overflow 的值不是 visible;
position 的值不是 static 或 relative
float 的值不是 none
display 的值是 inline-block 或 table-cell 或 flex 或 table-caption 或 inline-flex
3. BFC 的原理
- BFC 内部的盒子,会在垂直方向,一个接一个地放置。垂直方向上也会发生边距重叠。
- BFC 就是页面上的一个独立容器,容器里面的子元素不会影响到外面的元素,外边的也不会影响里边的。
- BFC 的区域不会与float重叠。
- 计算 BFC 的高度时,浮动元素也被计算在内。
三、清除浮动的方法
1.额外标签法
给谁清除浮动,就在其后额外添加一个空白标签 。
优点:通俗易懂,书写方便。
缺点:添加许多无意义的标签,结构化比较差。
2.父级添加 overflow 方法
可以通过触发BFC的方式,实现清楚浮动效果。必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏。
3.使用 after 伪元素清除浮动
:after 方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持 :after,zoom(IE专有属性)可解决ie6,ie7浮动问题
优点:符合闭合浮动思想,结构语义化正确,不容易出现怪问题
缺点:由于IE6-7不支持 :after ,使用 zoom:1
4.使用 before 和 after 双伪元素清除浮动
优点:代码更简洁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</body>
</html>
四、posititon 定位
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属性。
五、元素居中
方法一
父相自绝后,子分部向左向上移动本身宽度和高度的一半(也可以用 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;
}
方法二
父元素设置成弹性盒,子元素横向居中,纵向居中
#father{
width: 400px;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
#son{
width: 200px;
height: 200px;
background: yellow;
}
方法三
父向子绝,子元素所有定位为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;
}
六、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。
- 行内元素有:span a b i img input select strong
- 块级元素有:div p h1-h6 table form ul ol li dl dt dd ...
- 空元素(没有内容):< br > < hr > < img > < input > < link >
七、CSS Hack
1. 什么是 CSS Hack
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式:
属性Hack、选择符Hack、条件注释Hack, Hack主要针对IE浏览器
条件Hack
条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
属性Hack
属性级Hack:
比如IE6能识别下划线和星号,
IE7能识别星号,但不能识别下划线,而firefox两个都不能认识。
background-color:red9; 9所有的ie浏览器可识别;
background-color:yellow0; 0 是留给ie8的
选择符Hack
比如IE6能识别 *html .class{ },IE7能识别 *+html .class{ }
2.浏览器优先级别
FF ( FireFox 火狐 ) < IE7 < IE6 , CSS hack
八、src与href的区别
href
href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
src
src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;
在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
九、link与@import区别
应用场景
<head>
<!-- link是标签,引入外部样式表 -->
<link rel="stylesheet" href="./a.css">
<style>
/* @import 在css环境中 导入外部css */
@import url('./b.css');
.box{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
区别
- link属于html标签。@import在css中使用表示导入外部样式表;
- 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
- import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
- link方式的样式的权重 高于@import的权重;
- link 支持使用javascript改变样式 (document.styleSheets),后者不可