HTML+CSS+盒模型+flex布局+H5和CSS3新特性

HTML&C

一、盒模型

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成

标准盒模型 （非IE浏览器）

box-sizing:content-box；一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型 （IE浏览器）

box-sizing:border-box；一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

怎么获取和设置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并不是专门用来解决这个问题而创的；

如何触发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 解决垂直边距重叠

三、清除浮动

为什么要清除浮动

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

清除浮动

一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签的方法

        
big
        
small
        
额外标签法

 
 
.clear{
        clear:both;
    }

二、 父级添加overflow方法：

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

三、使用after伪元素清除浮动：

    

        
big
        
small
        
    
    

 
 
 
.clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

四、使用before和after双伪元素清除浮动：用法同上

四、position定位的属性方法

position含义是指定位类型, 可取值有: static, relative, absolute, fixed, inherit, sticky(另: sticky是除css3新发布的属性)

1. position: static;

static(没定位)是position的默认值, 元素处于正常的文档流中, 会忽略left, top, right, bottom, z-index属性.

2. position: relative;

relative(相对定位)是给元素设置相对原本位置的定位, 不脱离文档流, 此元素原本位置会保留, 其他元素不会受影响.

3. position: absolute;

absolute(绝对定位)指给元素设置绝对定位，相对定位的对象可以分为两种情况：

• 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
• 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

4. position: fixed;

可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。

5. inherit

继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

6. sticky (黏性定位,吸顶效果)

设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

五 、盒子水平垂直居中

第一种：盒子宽高 + margin

思路 ：上外边距为自身高度一半，左外边距为自身宽度一半：

.box {
            width: 800px;
            height: 400px;
            border: 1px solid black;
        }
        
        .son {
            width: 400px;
            height: 200px;
            margin-top: 100px;    /* 上外边距为自身高度一半 */
            margin-left: 200px;    /* 左外边距为自身宽度一半 */
            border: 1px solid red;
        }

第二种：盒子高度 + margin

• 思路：让子盒子距离顶部外边距为自己高度的一半，左右auto

.box {
            width: 800px;
            height: 400px;
            border: 1px solid black;
        }
        
        .son {
            width: 400px;
            height: 200px;
            /* 让子盒子距离顶部外边距为自己高度的一半，左右auto */
            margin: 100px auto;
            border: 1px solid red;
        }

第三种：盒子宽高 + 定位 + margin

• 思路 1 ：给父盒子加相对定位，给子盒子加绝对定位，再设置子盒子相对于父盒子的边偏移：top：50%，left：50%；然后设置左外边距为自身宽度一半，上外边距为自身高度一半

.box {
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid black;
        }
        
        .son {
            position: absolute;
            width: 400px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -200px;
            border: 1px solid red;
        }

• 思路 2 ：将子盒子边偏移全部设置成0，然后使用margin:auto

.box {
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid black;
        }
        
        .son {
            position: absolute;
            width: 400px;
            height: 200px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 1px solid red;
        }

第四种：定位 + Transform

• 思路：设置子盒子边偏移 top：50%，left：50%，再用CSS3属性transform: translate(-50%, -50%);

 .box {
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid black;
        }
        
        .son {
            position: absolute;
            width: 400px;
            height: 200px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid red;
        }

第五种：Felx

• 思路：
  1. justify-content：center；设置flex盒子中的项目在主轴上居中对齐
  2. align-items：center；设置flex盒子中的项目在侧轴和主轴上居中对齐
  3. 主轴和侧轴都居中了，盒子也就水平垂直居中了

.box {
            display: flex;
            justify-content: center;    /* 设置flex盒子中的项目在主轴上居中对齐 */
            align-items: center;   /*  设置flex盒子中的项目在侧轴和主轴上居中对齐 */
            width: 800px;
            height: 400px;
            border: 1px solid black;
        }
        
        .son {
            width: 400px;
            height: 200px;
            border: 1px solid red;
        }

六、两栏布局、三栏（圣杯、双飞翼）

作用：

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

圣杯布局：

为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

优缺点：

不需要添加dom节点

缺点：如果将浏览器无线放大时，「圣杯」将会「破碎」掉。当middle部分的宽小于left部分时就会发生布局混乱。（middle

    
    
    
    
    


    
"bd">
            
"middle">middle
            
"left">left
            
"right">right
       
             
                

其中：

左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置
#bd{
                padding: 0 200px 0 180px;
                height: 100px;
            }
中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置
#left{
                
                position: relative;
                left: -180px;
            }
中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置
#right{
                
                position: relative;
                right: -200px;
            }

双飞翼布局：

为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

优缺点：

优点：不会像圣杯布局那样变形

缺点是：多加了一层dom节点

代码如下：

    
    
    
    
    


    
"mian">
        
"midden">
   
"centent">中间
        
        
"left">
             左边
        
        
"right">右边
    

圣杯与双飞翼的区别

​ 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。`

七、Flex 布局

flex基本概念

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"

设为 Flex 布局以后，子元素的float、clear,position和vertical-align属性将失效

开启flex布局

display:flex

flex容器属性

flex-direction	属性决定主轴的方向（即项目的排列方向 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap	设置项目是否换行 * nowrap（默认）：不换行。 * wrap：换行，第一行在上方。
flex-flow	是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content	定义了项目在主轴上的对齐方式 flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端靠边对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items	定义项目在侧轴上如何对齐 一根侧轴的情况下 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
align-content	定义了多根侧轴线的对齐方式。 flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴

八、行内元素.块级元素. 空(void)元素

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

• 行内元素有：a b span img input select strong
• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
• 空元素：br hr img input link meta
• 行内元素不可以设置宽高，不独占一行
• 块级元素可以设置宽高，独占一行
• 块级元素转行内元素:display:block
• 行内元素转块级元素:displai:inline
• 行内元素或块级元素转行内块元素:display:inlind-block

九、CSS Hack

什么是CSS Hack?

简而言之就是:针对不同浏览器编写带有前缀的css就是csshack,就是前段hack.
三种方法

方法一:IE条件注释法

(lte表示小于等于 lt表示小于 gte表示大于等于 gt表示大于 !表示不等于)
IE条件注释是微软官方推荐的方法,向前兼容性方面考虑,它是最安全的hack方式,理论上是最好的选择,但这种方式需要将所有的hack根据浏览器类型集中在相应的文件中

test.css文件是只加载到IE浏览器会生效,对于非IE浏览器会忽略这条语句.

test.css文件是只加载到IE6以上版本时候加载生效.

虽然条件注释最常用于CSS的hack,但他能包含的内容其实不仅仅是link标签,它还可以用这样的形式进行hack(条件注释和style标签)

条件注释和script标签

针对不同IE版本分别导入样式

虽然它的向后兼容性是最好的,但它的缺点也非常明显,将同一css选择服下的样式分散到三个文件中去控制,增加了开发和维护成本.

方法二.选择符前缀法

原理是在css选择符前加一些只有特定浏览器才能识别的前缀 例如"html"只对IE6生效,"+html"只对IE7生效,这就不能保证IE9和IE10不识别,在向后兼容性有风险( 只能在CSS样式文件或内嵌式的style中这样写，不能用于行内式)

方法三.样式属性前缀法

原理是在样式的属性名前加前缀,这些前缀旨在特定的浏览器生效( 行内 style=＂width:200px＂ IE6
style="*width:200px" IE7 或者在CSS文件中写这样的样式，也是可以的)
如""只在IE6生效
"*"只在IE7生效

样式属性前缀法相比起选择符前缀法,聚合程度更高,代码更精简,可维护性很强,和选择符前缀法相同,向后兼容性有风险

十、src与href的区别

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。 当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

十一、link和@import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

十二、H5和C3新特性

1. 选择器
2. 背景和边框
3. 文本效果
4. 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)

1.选择器

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */（fer斯特）
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)  /* 按照奇数 */
:disabled /* 选择每个禁用的dom元素 */
:checked /* 选择每个被选中的dom元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */

伪类和伪元素：

根本区别在于它们是否创造了新的元素（抽象）

伪类：用于向某些选择器添加特殊的效果（没有创建新元素）

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

伪元素：创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器

::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */

2. 背景和边框

背景：

background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）

background-origin：规定背景图片的定位区域 对于 background-origin 属性，有如下属性 背景图片可以放置于
content-box、padding-box 或 border-box 区域

边框：

border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片

3. 文本效果

属性	描述
text-shadow	向文本添加阴影
text-justify	规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色
text-outline	规定文本的轮廓
text-overflow	规定当文本溢出包含元素时发生的事情
text-wrap	规定文本的换行规则
word-break	规定非中日韩文本的换行规则
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行
text-decoration	文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线

• @font-face 自定义字体
• 渐变，CSS3新增了渐变效果，包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变)

4. 2D/3D 转换

变形transform

变形有rotate旋转、scale缩放、translate位移、skew倾斜

过渡transition

过渡transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值

一般写在一起：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

动画animation

动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn;  /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）

H5 新特性

1. h5新增特性：

语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type
新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
canvas 画布
地理定位
拖拽
本地存储：
localStorage 没有时间限制的数据存储；
sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket：建立持久通信协议

2. 语义化标签

标签	描述
header	定义了文档的头部区域
footer	定义了文档的尾部区域
nav	定义文档的导航
section	定义文档中的节（section、区段）
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
dialog	定义对话框，比如提示框

---

3. 表单类型增强

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

input 的 type	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域

week选择周和年

4. html5 新增的表单属性

表单属性	描述
placehoder	简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失
required	是一个 boolean 属性。要求填写的输入域不能为空
pattern	描述了一个正则表达式用于验证 input 元素的值
min 和 max	设置元素最小值与最大值
step	为输入域规定合法的数字间隔
height 和 width	用于 image 类型的 input 标签的图像高度和宽度
autofocus	是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
multiple	是一个 boolean 属性。规定 input 元素中可选择多个值

---

5. html5 新事件

事件	描述
onresize	当调整窗口大小时触发
ondrag	当拖动元素时触发
onscroll	当滚动元素滚动元素的滚动条时触发
onmousewheel	当转动鼠标滚轮时触发
onerror	当错误发生时触发
onplay	当媒介数据将要开始播放时触发
onpause	当媒介数据暂停时触发

十三、前端常见浏览器兼容性问题解决方案

前言：

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容

常见的浏览器内核：

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit

IE浏览器	Trident内核，也成为IE内核
Chrome浏览器	Webkit内核，现在是Blink内核
Firefox浏览器	Gecko内核，俗称Firefox内核
Safari浏览器	Webkit内核
Opera浏览器	最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
360浏览器	IE+Chrome双内核
猎豹浏览器	IE+Chrome双内核
百度浏览器	IE内核
QQ浏览器	Trident（兼容模式）+Webkit（高速模式）

常见的兼容性问题：

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

**4、**图片默认有间距

解决方案：使用float 为img 布局

5、IE9一下浏览器不能使用opacity

解决方案：

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持

解决方案：统一使用 cursor:pointer

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position:relative