HTML&CSS
文章目录
-
-
- 一.盒模型
-
-
- 1.什么是盒子模型？
- 2.盒子模型有哪两种
- 3.标准和怪异模型的转换
- 4.JS盒模型
-
- 二、BFC
-
-
- 概念
- 如何触发BFC？
- BFC的应用
-
- 三、清除浮动
-
-
- 为什么要清除浮动？
- 1. 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。
- 2.父级添加overflow方法
- 3.使用after伪元素清除浮动（推荐使用）
- 4.使用before和after双伪元素清除浮动
- 5.父级div 设置 height：
-
- 四、元素水平、垂直居中
-
-
- 1.父相自绝后，子分部向左向上移动本身宽度和高度的一半
- 2.父元素设置成弹性盒
- 3.父向子绝，子元素所有定位为0，margin设置auto自适应。
-
- 五、常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）
-
-
- 1. 两栏布局,左边定宽，右边自适应
- 2. 三栏布局，(圣杯布局、双飞翼布局)
-
- 圣杯布局
- 双飞翼布局
- 使用flex布局来实现
-
- 六、flex布局
- 七、行内元素、块级元素、空(void)元素？
- 八、CSS Hack
- 九、src与href的区别
- 十、link与@import区别
- 十一、HTML5和css3新特性
-
-
- 1. h5新增特性：
- 2.css3新特性
-
-
一.盒模型
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 属性的值。
4.JS盒模型
怎么获取和设置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
当我们浮动给父元素中的子元素加浮动时，父元素高度会坍塌，给父盒子加oxerflow:hidden;就不会坍塌，我一开不理解，然后查询资料才知道这是一种BFC布局。
概念
BFC就是“块级格式化上下文”的意思，它可以解决外边距折叠的问题。
如何触发BFC？
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
BFC的应用
- 可以用来自适应布局
利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。
给盒子加overflow:hidden；使其变成BFC，消除外部盒子因浮动对他的影响
- 可以清除浮动：
父元素加overflow:hidden/auto,变BFC
- 解决垂直边距重叠：
同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个
可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题
三、清除浮动
为什么要清除浮动？
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
1. 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。
clear:both;
2.父级添加overflow方法
3.使用after伪元素清除浮动（推荐使用）
.clearfix:after{
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
"father clearfix">
"big">big
"small">small
"footer">
4.使用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>
5.父级div 设置 height：
四、元素水平、垂直居中
1.父相自绝后，子分部向左向上移动本身宽度和高度的一半
#box{
width: 400px;
height: 400px;
background: red;
position: relative;
}
#x{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%)
}
2.父元素设置成弹性盒
#box{
width: 400px;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
3.父向子绝，子元素所有定位为0，margin设置auto自适应。
#box{
width: 400px;
height: 400px;
background: red;
position: relative;
}
#x{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
五、常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）
1. 两栏布局,左边定宽，右边自适应
左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响
2. 三栏布局，(圣杯布局、双飞翼布局)
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式，两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）
圣杯布局
- DOM结构
<div id="header">div>
<div id="container">
<div id="center" class="column">div>
<div id="left" class="column">div>
<div id="right" class="column">div>
div>
<div id="footer">div>
首先定义出整个布局的DOM结构，主体部分是由container包裹的center,left,right三列，其中center定义在最前面。
- CSS代码
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
双飞翼布局
- DOM结构
<body>
<div id="header">div>
<div id="container" class="column">
<div id="center">div>
div>
<div id="left" class="column">div>
<div id="right" class="column">div>
<div id="footer">div>
<body>
双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
- CSS代码
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
使用flex布局来实现
<div id="container">
<div id="center">div>
<div id="left">div>
<div id="right">div>
div>
#container {
display: flex;
}
#center {
flex: 1;
}
#left {
flex: 0 0 200px;
order: -1;
}
#right {
flex: 0 0 150px;
}
六、flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
//任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
//行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
//Webkit 内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
常用的属性：
flex-direction 主轴方向
flex-wrap 是否换行
flex-flow flex-direction与flex-wrap简写形式 默认为row nowrap
justify-content 水平对齐方式
align-items 垂直对齐方式
align-content 多行垂直对齐方式 只有一行不生效
弹性布局使用范围很广，我一般用于移动端，因为PC端需要兼容，我用于九宫格、底部tabbar、头部标题和返回键、商品列表等。
七、行内元素、块级元素、空(void)元素？
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
- 行内元素有：span a b i img input select strong
- 块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…
- 空元素(没有内容)：
八、CSS Hack
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式：
属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器
1、条件Hack
<!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->
<!--[if IE]>
<style>
.test{
color:red;}
</style>
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
2、属性Hack
.test{ color:#090\09; /* For IE8+、FF */
color:#f00; / * For IE7 * /
_color:#ff0; / For IE6 */ }
属性级Hack：
比如IE6能识别下划线“”和星号“”，
IE7能识别星号“”，但不能识别下划线” ”，而firefox两个都不能认识。
background-color:red9; 9所有的ie浏览器可识别；
background-color:yellow0; 0 是留给ie8的，
3、选择符Hack
- html .test{color:#090;} /* For IE6 and earlier */
+html .test{color:#ff0;} / For IE7 /
.test{color:#f00;} / For IE8+ and not IE */
九、src与href的区别
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；主要用于img、script等。
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
十、link与@import区别
- link属于html标签。@import在css中使用表示导入外部样式表；
- 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
- import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
- link方式的样式的权重 高于@import的权重；
- link 支持使用javascript改变样式 （document.styleSheets），后者不可
<head>
<link rel="stylesheet" href="./a.css">
<style>
/* @import 在css环境中 导入外部css */
@import url('./b.css');
.box{
width: 100px;
height: 100px;
background: green;
}
style>
head>
十一、HTML5和css3新特性
1. h5新增特性：
语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type
新增表单属性：placehoder、min 和 max
音频视频：audio、video
canvas 画布
地理定位
拖拽
本地存储：
localStorage 没有时间限制的数据存储；
sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
2.css3新特性
选择器
背景和边框
文本效果
2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)
详细介绍