目录
盒模型
在我们HTML页面中,每一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、内边距(padding)、边框区(border)、外边界区(margin)四部分组成
标准盒模型 (非IE浏览器)
box-sizing:content-box;一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型 (IE浏览器)
box-sizing:border-box;一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)
js的盒模型
元素.offsetParent | 获取的是带有定位的最近的父元素 |
元素.offsetLeft | 相对于父元素左边的距离 |
元素.offsetWidth | 获取元素本身所占据的宽度,包括内容、边框和padding |
元素.offsetHeight | 获取元素本身所占据的高度,包括内容、边框和paddind |
元素.clientTop | 获取的是元素上边框的大小 |
元素.clientLeft | 获取的是元素左边框的大小 |
元素.clientWidth | 获取的元素包含padding、内容的宽度,不含边框 |
元素.clientHeight | 获取的元素包含padding、内容的高度,不含边框 |
window.innerWidth | 获取浏览器可使区域的宽度与高度 |
怎么获取和设置box的内容宽高
IE: dom.currentStyle.width/height
非IE: window.getComputedStyle(dom).width/height
var obj = document.getElementById("box");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, null); // 非IE
} else {
style = obj.currentStyle; // IE
}
alert("width=" + style.width + "\nheight=" + style.height);
BFC
什么是BFC
BFC就是“块级格式化上下文
”的意思,BFC是一块独立的布局环境,保护其中内部元素不收外部影响,也不影响外部。BFC是一种css的布局方式
如何触发BFC
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
BFC的应用
1 可以用来自适应布局
利用BFC的这个原理可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。
给左边盒子加浮动,右边盒子加overflow:hidden;变成BFC,就可以消除外部左边盒子因浮动对他的影响
2 可以清除浮动
一个父元素中的子元素,设置浮动时,父元素没有设置高度,这时子元素脱离文档流,父元素感知不到子元素的高度,造成父元素的塌陷。
这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。
3 解决垂直外边距重叠
中间添加一个空元素,设置该元素overflow:hidden
清除浮动
为什么要清除浮动
清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动的方法
一、 额外标签法: 给谁清除浮动,就在其后额外添加一个空白标签
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
.clear{
clear:both;
}
二、 父级添加overflow方法:
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
三、使用after伪元素清除浮动:
<body>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
</body>
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
四、使用before和after双伪元素清除浮动:用法同上
position定位的六个方式
static | 没有定位 ,可以用来取消之前的定位 |
relative | 相对定位,相对于自身对位,元素不脱标,依然占位 |
absolute | 绝对定位,子绝父相,根据有定位的父元素定位,父元素没有,向上级找,直到body 脱标不占位 |
fixed | 固定定位,始终针对body定位,脱标不占位 |
inherit | 继承父元素的定位 |
sticky | 粘性定位 ,吸顶效果 ,接触到头部时自动黏在上面,不接触头部定位无效 |
元素上下左右居中的方法
1 子绝父相,子元素设置top与left为50%,然后可以使用merge-top/left各自身的 -50%,也可以使用transfrom位移自身x与y轴各 -50%
2 使用flex弹性布局
3 子绝父相后,设置子元素top/left/bottom/right 的偏移量都为0,然后设置margin为auto
flex布局
flex基本概念
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"
设为 Flex 布局以后,子元素的float
、clear,position
和vertical-align
属性将失效
开启flex布局
display:flex
flex容器属性
flex-direction | 属性决定主轴的方向(即项目的排列方向
|
flex-wrap | 设置项目是否换行
|
flex-flow | 是flex-direction 属性和flex-wrap 属性的简写形式,默认值为row nowrap |
justify-content | 定义了项目在主轴上的对齐方式
|
align-items | 定义项目在侧轴上如何对齐 一根侧轴的情况下
|
align-content | 定义了多根侧轴线的对齐方式。
|
flex项目的属性
order | 定义项目的排列顺序。数值越小,排列越靠前,默认为0 |
flex-shrink | 定义了项目的缩小比例 默认为1,即如果空间不足,该项目将缩小 设置为0,项目不会缩小 |
flex-basis | 定义了在分配多余空间之前,项目占据的主轴空间 |
flex | flex-grow , flex-shrink 和 flex-basis 的简写,默认值为0 1 auto |
两栏。圣杯,双飞翼布局
两栏布局
- 左边浮动,右边加oveflow:hidden;变成BFC清除左侧浮动元素影响
三栏布局
- 圣杯布局和双飞翼布局两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)
圣杯布局来源于文章In Search of the Holy Grail,
而双飞翼布局来源于淘宝UED。
虽然两者的实现方法略有差异,
不过都遵循了以下要点:
* 两侧宽度固定,中间宽度自适应
* 中间部分在DOM结构上优先,以便先行渲染
* 允许三列中的任意一列成为最高列
* 只需要使用一个额外的<div >外层 标签
圣杯布局
1 主体部分是由主体container
包裹的center,left,right
三列,其中center
定义在最前面
2 主体设置 padding-left: 200px; padding-right: 150px; 为左右两列预留出相应的空间
3 随后分别为三列设置宽度与浮动,同时对footer设置清除浮动
4 使用负外边距,将left放置到之前预留出的位置上
5 使用position: relative
和right: 200px
将left的位置在原有位置基础上左移200px
,以完成left
的放置
6 右侧同样
优点:
(1)兼容性好,兼容若有主流浏览器,包括万恶的IE6
(2)可以实现主要内容的优先加载
1 双飞翼布局的DOM结构与圣杯布局的区别是用container
仅包裹住center
,另外将.column
类从center
移至container
上。
2 将container,left,right
设置为float: left
,而在container
内部,center
由于没有设置浮动,所以其宽度默认为container
的100%宽度,通过对其设置margin-left
和margin-right
为左右两列预留出了空间
3 将right通过margin-left放置到预留位置
4 左侧同样
总结
圣杯布局在DOM结构上显得更加直观和自然,且在日常开发过程中,更容易形成这样的DOM结构
而双飞翼布局在实现上由于不需要使用定位,所以更加简洁,且允许的页面最小宽度通常比圣杯布局更小
常见的块级、行级、空元素
- 行内元素有:span a b i select strong
- 块级元素有:div p h1-h6 ul table from ul ol li dl dt dd…
- 空元素(没有内容): <br> <hr> <img> <input> <link> <meta>
css Hack
在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号,以达到应用不同的CSS样式的目的。用来兼容IE
条件Hack
<!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->
只有在IE可以被解析,其他浏览器都是当做注释
属性Hack
*color:#f00; / * For IE7 * /
_color:#ff0; /* For IE6 */ }
IE6能识别下划线“”和星号“”,
IE7能识别星号“”,但不能识别下划线”
选择符Hack
* html .test{color:#090;} /* For IE6 and earlier */
*+html .test{color:#ff0;} /* For IE7 */
比如IE6能识别 *html .class{}
IE7能识别*+html .class{}
写CSS hack需要遵循以下三条原则:
- 有效: 能够通过 Web 标准的验证
- 只针对太古老的/不再开发的/已被抛弃的浏览器, 而不是目前的主流浏览器
- 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉
滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此,并不推荐使用CSS hack来解决兼容性问题。
src与href的区别
href 是指向网络资源所在位置,建立和当前元素之间的链接,用于超链接。
src是指向外部资源的位置
在请求src资源时会将其指向的资源下载并应用到文档内,当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,类似于将所指向资源嵌入当前标签内
link与@import区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面内嵌调用和外面链接调用,其中外面引用有两种:Link引入和@import导入,两者都是外部引用CSS的方式,但是存在一定的区别:
- link是 标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
- link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
- link是HTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式;而@import不支持。
- link方式的样式的权重 高于@import的权重;
HTML5与CSS3的新特性
css3
常规选择器 | :last-child 选择元素最后一个孩子 :first-child 选择元素第一个孩子 :nth-child(1) 按照第几个孩子给它设置样式 :disabled 属性选择器 选择每个禁用的dom元素 |
伪类选择器 | a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链接 a:hover {color: #FF00FF} 鼠标移动到链接上 |
伪元素选择器 | ::before {} 选择器在被选元素的前面插入内容和定义css ::after {} 选择器在被选元素的后面插入内容和定义css :first-letter 选择该元素内容的首字母 :first-line 选择该元素内容的首行 |
背景 | background-size:规定背景图片的尺寸 background-origin:规定背景图片的定位区域 |
边框 | border-radius: 圆角 box-shadow / text-shadow: 阴影 border-image: 边框图片 |
文本效果 | text-shadow 向文本添加阴影 text-outline 规定文本的轮廓 text-overflow 规定当文本溢出包含元素时发生的事情 text-wrap 规定文本的换行规则 |
渐变效果 | background-image: linear-gradient(线性渐变) background-image: radial-gradient(径向渐变 |
变形 | transform:rotate 旋转 transform:scale 缩放 transform:translate 位移 |
过渡 | transition : 过度的地方(color/width等) ,时间(1s/.5s) , 状态( linear / ease 等) |
动画 | @keyframes 定义动画名称及动画的行为 animation 设置动画相关值 animation-name: fadeIn 调用动画 |
HTML5
语义化标签 | header 定义了文档的头部区域 footer 定义了文档的尾部区域 nav 定义文档的导航 section 定义文档中的结构标签 article 定义页面独立的内容区域 aside 定义页面的侧边栏内容 |
表单类型增强 | color 主要用于选取颜色 date 从一个日期选择器选择一个日期 email 包含 e-mail 地址的输入域 month 选择一个月份 search 用于搜索域 url URL 地址的输入域 |
新增的表单属性 | placehoder 简短的提示信息 min 和 max 设置元素最小值与最大值 required 是一个 boolean 属性。要求填写的输入域不能为空 |
html5 新事件 | onresize 当调整窗口大小时触发 ondrag 当拖动元素时触发 onscroll 当滚动元素滚动元素的滚动条时触发 onerror 当错误发生时触发 onmousewheel 当转动鼠标滚轮时触发 |
音频视频标签 | audio 音频标签 video 视频标签 |
本地存储 | localStorage 永久存储,除非手动删除或代码删除 sessionStorage 关闭当前会话删除 |
浏览器兼容
不同的浏览器,浏览器的内核是不同的,所以各个浏览器对网页的解析存在一定的差异
浏览器的内核分为两种,渲染引擎,js引擎,所以,兼容问题一般是指css兼容 js兼容
css的兼容
问题: 不同浏览器的标签默认的margin和padding不同
解决方案:
1 通配符 * 设置内外边距为0
2 全局引入一个官方的样式重置表
问题:css3的新属性不兼容
解决方案:加浏览器的前缀来解决低版本浏览器不兼容问题
-moz- | 火狐浏览器 |
-webkit- | 谷歌浏览器 / 苹果浏览器等使用Webkit引擎的浏览器 |
-o- | 欧朋浏览器 |
-ms- | IE浏览器 |
都有什么css3不兼容
定义关键帧动画 @keyframes
css3中的变形(transform)、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....
问题:块属性标签flot后,又有横行的margin情况下,IE 浏览器margin加倍的问题
解决方案:使用 display:inline 将这个块转换为行内元素
问题:. 设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度
解决方案:
- 给超出高度的标签设置overflow:hidden;
- 或者设置行高line-height 小于你设置的高度。
问题:IE浏览器div最小宽度和高度的问题
解决方案:
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
问题:超链接访问过后hover样式就不出现的问题
解决方案:将四个伪类选择器按照固定的顺序排列使用
a:link {} // 未访问前
a:visited {} // 访问之后
a:hover {} // 鼠标划过
a:active {} // 点击不松开的时候
问题:图片默认有间距,使用通配符也无法清除
解决方案:
1 给所有图片设置flot-left
2 因为是写代码时不在一行,默认羽有个文字间距,用一个div包裹,设置 font-size:0 即可
浏览器css兼容的常用方法:css Hack
JS的兼容
问题:事件绑定的不同
IE: dom.attachEvent()
;
标准浏览器: dom.addEventListener(‘click',function(event){ },false)
;
解决方案:使用 if 判断当前浏览器或者 try catch
var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器,ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
或
var x = document.getElementById("myBtn");
try {
x.addEventListener("click", myFunction);
} catch(x.attachEvent){
x.attachEvent("onclick", myFunction)
}
问题:event事件对象问题
火狐不支持不传递形参,直接接受event为事件对象
解决方案:在事件里做一个 || 来兼容
document.onclick=function(ev){ //谷歌火狐的写法,IE9以上支持,往下不支持;
var e=ev;
}
document.onclick=function(){ //谷歌和IE支持,火狐不支持;
var e=event;
}
document.onclick=function(ev){ //兼容写法;
var e=ev||window.event;
}
问题:event.target (事件源对象)问题
IE: event.srcElement
标准浏览器: event.
target
解决方案:通过 if 或 try 或三元表达式判断当前浏览器
event = event.srcElement?event.srcElement:event.target;
问题:获取元素的非行间样式值不同 即没有设置宽高被自动撑开的盒子的宽高度
IE: dom.currentStyle[‘width’]
标准浏览器: window.getComputedStyle(obj, null)['width']
解决方案:通过 if 或 try 判断当前浏览器
function getStyle(obj,attr){
if(obj.currentStyle){
//兼容IE
return obj.currentStyle[attr];
}else{
//非IE,
return window.getComputedStyle(obj, null)[attr];
}
}
问题:阻止事件冒泡和默认行为
w3c 阻止冒泡 e.stopPropagation() 阻止默认行为 e.preventDefault()
IE 阻止冒泡 e.cancelBubble=true 阻止默认行为 e.returnValue=false
解决方案:通过 if 或 try 判断当前浏览器
//js阻止事件传播,这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
问题:ajax的兼容
IE: ActiveXObject
其他: xmlHttpReuest
解决方案:通过 if 或 try 判断当前浏览器
var oAjax = null;
if(window.XMLHttpRequest){
// 标准浏览器
oAjax = new XMLHttpRequest();
}else{
//只支持IE6浏览器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}