HTML５
- 一、html5
- 二、css3
- 1. BFC规范
- 2. 浏览器内核与前缀
- 3.transition 过度
- 4.transform 变形
- 5. animation 动画
- 6.animation 实现load加载动画
- 7.transform 实现正方体旋转
- 8. css3 背景图扩展
- 9. 背景图之线性渐变 、径向渐变linear-gradient、radial-gradient
- 10. 字体图标 font-face
- 11.文字阴影 text-shadow
- 12. 盒子阴影 box-shadow
- 13. 图片遮罩 mask
- 14. 倒影 box-reflect
- 15. 模糊值 blur 和计算 calc
- 16. 分栏布局 column
- 17. 伪类和伪元素
- 18. CSS hack
- 19. 渐进增强与优雅降级
- 20. 网页布局
- 三、viewport 视口
- 四、css新特性
一、html5
1. html5 与 xhtml的区别
1.DOCTYPE文档及编码
html5：<!DOCTYPE html> 比较简单
<meta charset="utf-8">
xhtml：<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 相对复杂
meta charset 相对复杂
2.元素大小写
html5：可以大写也可以小写
xhtml:只能小写
3.属性布尔值
html5：当属性的属性值和属性一样时，属性值可以不写
xhtml: 属性和属性值都要写完整
4.单标签
html5：单标签可以不写/
xhtml：单标签必须要写/
5.属性引号
html5：属性的属性值可以不写引号
xhtml：属性的属性值必须要写引号
6.img alt 属性
html5:可以不写alt属性
xhtml：必须要写alt属性
7.双标签闭合
html5：可以不写闭合标签
xhtml：必须写闭合标签
2. strong和b，em和i 的区别
span、strong、em、b、i 都属于内联样式
span用的多需要在内部写很多class样式区分span，利用标签的不同，简化选择器的操作
3.引用标签
对适用的文本进行语义化的操作，什么样的样式，用什么样的标签就是语义化
4. 嵌套页面 iframe
在一个页面中嵌套一个页面
同时存在src 和srcdoc 的时候，会优先显示srcdoc的内容
5. 换行 br 与软换行 wbr
在页面中，一段较长的文字或单词，在页面进行缩小的时候会进行自动换行操作
br：不管页面有没有缩小，都会进行强制换行
wbr：针对较长的单词换行时，不会把整个单词换行，可以通过 wbr 对长单词进行分段，页面缩小时进行
部分换行
6. 定义预格式化的文本 pre 和 code
通过pre 与 code 的组合，将想要展示的代码，放入其中。 尖括号等代码符号需要进行转义字符
7. 给特殊图形添加链接 map 与 area
<img src="" usemap="#da">
<map name="da">
<area shape="形状" coords="形状位置" href ="热区目标链接" alt="" />
</map>
8. 嵌入多媒体（flash） embed、object
<embed src="多媒体路径" type="">
<object>
<param name="movie" value="多媒体路径">
</object>
9. 嵌入音频和视频 audio、video
<audio src="音频路径" controls="显示控件" loop="自动循环"></audio>
<video src="视频地址" conreols></video>
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
10. 拼音注解和文字反向 ruby、rt、bdo、
<ruby>
苏<rt>su</rt> 文字注解
</ruby>
<p><bdo dir="rtl">倒过来念</bdo></p> 文字反向
dir的值：
rtl：right to left
ltr: left to right
11. link 标签
<link rel="icon" type="/img/x-icon" href="img/resizeApi.png"/> 页面小图标
12. meta 标签
meta的作用：添加辅助信息，根据属性 name 的不同，作用也不同
上面的框表示meta的辅助信息，下面的框表示meta的功能作用
13. h5新语义化标签
header: 页眉
footer: 页脚
main: 主体
hgroup ：标题组合
nav： 导航
页眉页脚主体，只能出现一次
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">标题</h1>
<h2></h2>
<nav>新闻</nav>
</header>
<footer></footer>
<main>
<article>
<section>
<figure>
<img src="img/favicon.ico" >
<figcaption>
新型语义化
<br>
新时代
</figcaption>
</figure>
</section>
<section>
<input type="text" list="elms" />
<datalist id="elms">
<option value ="a"></option>
<option value ="ab"></option>
<option value ="abc"></option>
<option value ="app"></option>
<option value ="around"></option>
<option value ="actz"></option>
</datalist>
<details open>
<summary>HTML</summary>
<p>超文本语言</p>
</details>
<progress min="0" max="10" value="8"></progress>进度条
<meter min="0" max="100" value="90" low="10" high="80"></meter>度量条
</section>
<section></section>
</article>
</main>
14. 表格扩展
表格css样式
15. 表单扩展之控件美化
通过label ，运用label与其他位置的关联，更改图片进行美化
15.1 表单扩展之新input控件
15.2 表单扩展之新属性
<input type="text" name="username" autocomplete="off" autofocus required pattern="" />
autocomplete：自动完成 默认值 on / off
当提交表单有name 属性的时候，提交过的值会显示出提示，可以用autocomplete
关闭自动提示
autofocus：获取焦点，
可以在访问当前页面的时候，自动将光标放置在输入框。
pattern：正则表达式验证
15.3 表单扩展之新标签
<fieldset>
<legend>等灯</legend>
<p>
用户名：<input type="text" name="" d="" value="" />
</p>
<p>
密码：<input type="password" />
</p>
<input type="submit" />
</fieldset>
optgroup:可以为选择项的内容进行分组
<select name="">
<optgroup label="水果">
</optgroup>
<option value="">香蕉</option>
<optgroup label="shucai">
</optgroup>
<option value="">番茄</option>
</select>
二、css3
1. BFC规范
只有触发BFC规范的元素，才可以形成一个独立的容器，不受外界的影响，从而解决布局的问题
1.解决margin 叠加问题
将两个容器单独放置在一个容器中，将 display 定义成flex
2.解决margin传递问题 传递问题只有嵌套的容器才会出现
将父容器溢出处理 overflow 设置成 auto 等
3.解决浮动问题
可以让父模块出发BFC规范。
也可以让父元素也浮动
4. 解决覆盖问题
2. 浏览器内核与前缀
css3去兼容不同版本的浏览器，针对旧的浏览器版本进行兼容，新的浏览器版本基本不需要前缀
为了实现某些css3 特效，旧版本不支持，需要加前缀。对应的浏览器只能使用对应的前缀
3.transition 过度
.div1{width: 50px; height: 50px; background: #808080;
transition-property: all;
transition-duration: 1s;
transition-delay: ;
transition-timing-function: ease;
}
.div1:hover{width: 100px; height: 100px; background: #6A5ACD;}
<style type="text/css">
ul,li{margin: 0; padding: 0; list-style:none; }
ul{width: 600px;}
ul li{
width: 165px; height: 200px; background: url(img/sprite.png); float: left;
transition: all 1s ease;
}
ul li:nth-child(1){background-position: 0px 200px;}
ul li:nth-child(2){background-position: -200px 200px;}
ul li:nth-child(3){background-position: -400px 200px;}
ul li:nth-child(4){background-position: 0px 400px;}
ul li:nth-child(5){background-position: -200px 400px;}
ul li:nth-child(6){background-position: -400px 400px;}
ul li:hover:nth-child(1){background-position: 0px 564px;}
ul li:hover:nth-child(2){background-position: -200px 564px;}
ul li:hover:nth-child(3){background-position: -400px 564px;}
</style>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
4.transform 变形
transform-origin 基点：
当设置多个值时候的顺序，设置基点的位置。
当进行transform 复写的时候，要注意属性的前后位置， transform的的执行顺序是
从后往前进行变化。当translate 在最后的时候，会受到其他值的影响。
变形只能加给块元素，内联元素想用，可以改变类型。
模块运用 transform 变形的时候，本体也需要加上transition 过渡，才能显示效果。
4.1 transform 3D
1.在做3d效果时，需要同时用到 perspective和transfrom-style。
perspective在外层，transform-style 在内层
2.backface-visibility 背面隐藏，可以在物体透明的状态下，隐藏后面的图像。
5. animation 动画
注：
1.运动结束后，默认会停留在起始位置
2.from 等价于0%，to 等价于100%
3.复合写法，不区分先写后写，但是动画持续时间先写，动画延迟时间后写
4.哪个样式需要动画，就写在哪个样式上
<style type="text/css">
.box1{width: 300px; height: 300px; border: 1px black solid; margin: 30px auto;}
/* .box2{width: 100px; height: 100px; background: red;
animation-name: mybox;
animation-duration: 1s;
animation-delay: 2s ;
animation-iteration-count: infinite;
animation-timing-function: linear;
} */
.box2{width: 100px; height: 100px; background: red;
animation: mybox 1s 2s infinite linear;
}
/*
@keyframes mybox{
from{transform: translate(0,0);}
to{transform: translate(200px,0);}
} */
@keyframes mybox{
0%{transform: translate(0,0);}
100%{transform: translate(200px,0);}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
5.1 animate 第三方动画库
从官网下载css文件，引入项目。
6.animation 实现load加载动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/* ==========================================
制作load加载动画思路：
1.先制定一个盒子，在制定盒子的四个点位，在制定第二个盒子的四个点位。
2.让第二个盒子的四个点位与第一个盒子的重叠，然后旋转45度。形成一个圆形点位
3.给点位加上动画，让他们可以进行缩放。动画样式为：无限循环次数，匀速运动
4.在给每个点位的缩放时间进行等差延迟。形成加载动画
========================================== */
.load{width: 40px; height: 40px; margin: 30px auto; position: relative;}
.load .box1,.load .box2{ width: 100%; height: 100%; position: absolute;}
.load .box2{transform: rotate(45deg);}
.load .box1 div,.load .box2 div{width: 5px; height: 5px; background:blue; border-radius:50%; position: absolute;
animation: loadmove 1.5s infinite linear;}
.load .box1 div:nth-child(1),.load .box2 div:nth-child(1){left: 0; top: 0;}
.load .box1 div:nth-child(2),.load .box2 div:nth-child(2){right: 0; top: 0;}
.load .box1 div:nth-child(3),.load .box2 div:nth-child(3){right: 0; bottom: 0;}
.load .box1 div:nth-child(4),.load .box2 div:nth-child(4){left: 0; bottom: 0;}
@keyframes loadmove{
0%{transform: scale(1);}
50%{transform: scale(0);}
100%{transform: scale(1);}
}
.load .box1 div:nth-child(1){animation-delay: 0s;}
.load .box2 div:nth-child(1){animation-delay: .2s;}
.load .box1 div:nth-child(2){animation-delay: .4s;}
.load .box2 div:nth-child(2){animation-delay: .6s;}
.load .box1 div:nth-child(3){animation-delay: .8s;}
.load .box2 div:nth-child(3){animation-delay: 1s;}
.load .box1 div:nth-child(4){animation-delay: 1.2s;}
.load .box2 div:nth-child(4){animation-delay: 1.4s;}
</style>
</head>
<body>
<div class="load">
<div class="box1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
7.transform 实现正方体旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/* ================================================
正方体思路
运用知识：position定位、transfrom动画、transform-origin旋转基点定位、
位置移动、perspective远景观看效果、transform-style动画样式、
构建思路：
1.先构建一个盒子，将ul放入，根据li制造正方体的六个面。
2.构建好六个面后，对各个面进行旋转调整位置。
3.构建好位置后，进行动画添加，让盒子旋转，以及旋转基点的选择
注：盒子旋转以中心旋转，要将整体放置在中心位置，不然会出现不按中心旋转。注意ul的margin。
================================================ */
*{margin: 0; padding: 0;}
ul{list-style: none;}
.box{width: 300px; height: 300px; border: 1px black solid; margin: 30px auto; perspective:200px;}
.box ul{width: 100px; height: 100px; position: relative;transform-style: preserve-3d;transform-origin: center center -50px;
transition: 2s; margin: 100px;
}
.box ul li{width: 100px; height: 100px; position: absolute;line-height: 100px; color: white; text-align: center;
line-height: 100px; font-size: 26px; }
.box ul li:nth-child(1){background:red; left: 0px; top: 0px;}
.box ul li:nth-child(2){background: blue; left: 0px; top: -100px; transform: rotateX(90deg); transform-origin: bottom;}
.box ul li:nth-child(3){background: yellow;left: 0; top: 100px;transform: rotateX(-90deg);transform-origin: top;}
.box ul li:nth-child(4){background: pink; left: -100px; top: 0px;transform:rotateY(-90deg);transform-origin: right;}
.box ul li:nth-child(5){background: green;left: 100px; top: 0px; transform: rotateY(90deg);transform-origin: left;}
.box ul li:nth-child(6){background: gray;left: 0px; top: 0px; transform: translateZ(-100px) rotateY(180deg);}
.box:hover ul{transform:rotateY(360deg);}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
8. css3 背景图扩展
background-size:
可以直接写宽高，设置背景图的图片大小
cover:覆盖 会用图片把背景铺满
contain：包含 会为使用背景图的模块填充合适大小的图
background-origin：
padding-box:以padding的位置放置图片
border-box： 以border的位置开始 放置图片
conten-box： 以content 内容 的位置放置图片
9. 背景图之线性渐变 、径向渐变linear-gradient、radial-gradient
linear-gradient 是属于background属性的值 linear-gradient（）
1.括号里可以直接写 颜色 ，多个颜色，意思是 从什么颜色到什么颜色
2.在颜色的前面可以加 to left 等其他方位，从哪边开始到哪边
3.颜色的前面可以加角度 3deg，正值代表向右旋转颜色，负值代表向左。
4.在颜色部分，可以添加百分比。颜色渐变从上到下是0-100%。加上百分比表示从百分数开始变，之前的都是
原来的颜色。
radial-gradient 是径向渐变，圆形的
.box1{width: 100px; height: 100px; background:linear-gradient(red,green);}
.box1{width: 100px; height: 100px; background:linear-gradient(to left, red,green);}
.box1{width: 100px; height: 100px; background:linear-gradient(30deg, red,green);}
.box1{width: 100px; height: 100px; background:linear-gradient(red, yellow 10%, green 20%);}
10. 字体图标 font-face
字体图标就是字体的样式，可以设置颜色大小。
通过@font-face 引入，font-family随意起名，src是引入字体图标路径。
在需要使用的地方填写font-family，然后在写上字体对应的名字。
简单写法：
使用after伪类，让对应的字体加入其中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
@font-face {
font-family:hello;
src: url();
}
div{
font-family: hello;
}
.gouwuche::after{content:"对应图标的字体";}
</style>
</head>
<body>
<div>对应图标的字体</div>
</body>
</html>
10.1 引入阿里巴巴矢量字体图标
1.先从图标库下载，解压文件，将对应的css和兼容文件放置项目中。
2.使用link标签引入css
3.在使用此样式的标签上加入class="iconfont 对应图标名称"
其他彩色图标在阿里巴巴矢量图标库有帮助文档
10.2 引入icomoon自制图标
在移动端网页图标可以使svg自制的图标，在icomoon下。
11.文字阴影 text-shadow
text-shadow:x y 模糊值 颜色,多个效果; 颜色不添加默认跟随字体颜色
text-shadow: 10px 15px 50px blue,-10px -15px 10px green;
12. 盒子阴影 box-shadow
box-shadow: 10px 10px 15px 50px yellow,1px 1px 15px 8px blue inset;
13. 图片遮罩 mask
mask的值：
1.url（）选择图片
2.repeat 选择是否重复平铺
3.位置宽高 /图片大小
4.多遮罩
.box{
background: url();
mask: url() no-repeat 100px 100px / 200px 200px ,url() no-repeat 100px 100px / 200px 200px;
}
14. 倒影 box-reflect
box-reflect的 属性：
1.倒影的方向
above 上、below 下、 left 左、right 右、
2.倒影的距离
3.linear-gradient 渐变、mask 遮罩、
渐变只支持透明度的渐变，不支持颜色渐变。
倒影的使用，写在想要倒影的选择器中。
box-reflect:above 30px url();
倒影实现思路：
1.使用box-reflect 实现图片倒影 浏览器版本高，兼容这个可以使用。
2.使用transform 变形中的 scale 缩放效果 ，将值设置为-1，浏览器版本低兼容性不好用这个。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
img{width: 300px; height: 300px;}
/* .box{ margin: 50px auto; -webkit-box-reflect:below 30px url(../img/98.png);}
*/
.box{margin: 50px auto; -webkit-box-reflect: right 20px linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1)); }
/* .box{margin: 50px auto; transform: scale(-1);} */
</style>
</head>
<body>
<div class="box">
<img src="../img/8283262.jpg" >
</div>
</body>
</html>
15. 模糊值 blur 和计算 calc
模糊值 blur
通过filter 滤镜加给img标签。滤镜可以提供模糊值和饱和度
img{filter: blur(20px);}
计算calc
加在宽高等需要像素的后面，用来代替百分比和像素之间的换算
可以用四则运算。
calc的计算公式时要每个数值和符号要有空格
.box{height: 300px; width: calc(100% - 300px); border: 1px black solid;}
16. 分栏布局 column
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.box{width:500px; height: 300px; border: 1px black solid;
margin: 30px auto;
column-width: 100px;
column-gap: 10px;
column-rule: 1px red dashed;
}
</style>
</head>
<body>
<div class="box">
<h2>全球独角兽企业两年翻番 中美占比达七成</h2>
<p> 参考消息网11月28日报道 据《日本经济新闻》11月27日报道，被称作“独角兽”的大型初创企业数量在全球已增加到500家。借助现有产业与信息技术的融合以及人工智能的进步，独角兽企业在两年左右的时间里增加了一倍。</p>
<p>报道称，独角兽企业是指估值超过10亿美元的初创企业。美国数据智库CB风险投资公司说，在以色列和美国等地设有办事处的一家网络安全对策公司19日的估值达到13亿美元，成为第500家独角兽企业。</p>
</div>
<hr />
</body>
</html>
17. 伪类和伪元素
伪类
css3中规定 伪类由一个冒号:·开始，后面跟伪类的名称。
伪类是为了弥补常规选择器中的不足，弥补DOM树的不足。
伪类作用的范围是整个元素。伪类是给整体添加的样式，整个样式都会变化。
伪元素
css3中规定伪元素由两个冒号开始：：,后面跟伪元素的名称 。
伪元素是创建的一个有内容的虚拟容器，这个容器不包含DOM树元素，
但是可以包含内容，开发者还可以为伪元素定制样式。
伪元素作用的范围是创建虚拟容器的范围。伪元素是对创建的虚拟容器发生变化，伪元素的功能类似于添加了span标签。
18. CSS hack
hack的作用
通过使用不同的样式代码，为不同的浏览器版本实现不同的css效果。
18.1 css属性前缀法
css属性前缀法
通过在css属性的前缀添加不同的样式代码，实现浏览器版本不同，所展示的效果也不同。
前两个符号写在属性前缀，后两个符号加在值的后面。
background: red ;
_background:blue;
background:blue\9;
18.2 选择器前缀法
选择器前缀法
加在选择器的前面
*html .box{}
*+html .box{}
:root .box{}
18.3 IE条件注释法
IE条件注释法
写在需要识别的标签前后。类似于条件判断
19. 渐进增强与优雅降级
渐进增强
在构建网页时，先考虑低版本浏览器，保证基础功能。随着浏览器版本的升高，对基本的功能进行优化与增强。
优雅降级
在构建网页时，先从高版本进行功能完善，随着浏览器版本的降低，再进行兼容优化。
20. 网页布局
在页面中，没有设置高的div，他的高是由里面容器的高加上margin的值所形成的，如果margin的值为负数，那么父容器的高度会小于里面子容器的高度。
20.1 布局扩展之等高布局
等高布局
在同一个父容器中，子元素的高度相等的布局
伪等高布局
利用负margin-bottom和正padding-bottom实现等高布局
padding会增加子元素填充内容的高度，margin和内容的高度相加会得到父容器的高度。所以负margin和padding会形成一个有填充内容的高度，但没有显示高度的父容器。当在里面添加内容时，子元素会根据最长的内容显示高度，把较低的子元素撑起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
.box {
border: 5px black solid;
overflow: hidden;
}
.box1 {
float: left;
width: 100px;
background: red;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.box2 {
float: right;
width: 100px;
background: blue;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
</div>
<div class="box2">
<p>222</p>
<p>222</p>
<p>222</p>
<p>222</p>
<p>222</p>
<p>222</p>
</div>
</div>
</body>
</html>
20.2 三栏布局-双飞翼布局
三列布局，左右固定，中间自适应。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/* =================================
构建思路:将center放置在最前,左右两个模块在后. 然后给
左浮动的模块设置-100%的margin,这样他就会在整体的左边,
然后给右浮动模块加上自身等宽的负margin,让他排在右边.
================================= */
* {
margin: 0;
padding: 0;
}
.header {
height: 100px;
background: red;
}
.container {}
.container .center {
height: 200px;
float: left;
width: 100%;
}
.container .center p {
height: 100%;
background: yellow;
margin: 0 150px 0 100px;
}
.container .left {
width: 100px;
height: 200px;
background: blue;
margin-left: -100%;
float: left;
}
.container .right {
width: 150px;
height: 200px;
background: green;
margin-left: -150px;
float: left;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="center">
<p>内容部分</p>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
20.3 三栏布局-圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/* ========================================================
构建思路：
1.让container整体背景颜色为黄色，里面靠center、left、right
模块撑起来，元素浮动后，不清除浮动，父元素无法撑起高度。
2.让center、left、right浮动起来。
3.给left、right设置宽高，定位在两边。left用margin-left：-100%；使他
与center并列。再用定位移动到左边，使他一直在center左边。
4.right用margin-left：150px；使他消除与自己等宽的margin，与center的右边
并列，然后用定位移动到center右侧。
5.center的宽靠父容器，父容器靠里面装的子元素撑起。
6.给父容器添加margin，把挤出去的left和right的位置添加回来。
======================================================== */
*{margin: 0; padding: 0;}
.clear::after{content: ""; display: block; clear: both;}
.header{height: 100px; background: red;}
.container{background: yellow; margin: 0 150px 0 100px; }
.container .center{float: left; height: 200px; width: 100%;}
.left{width: 100px; height: 200px; float: left; background: blue; margin-left: -100%; left: -100px; position: relative;}
.right{width: 150px; height:200px ; background: green; float: left; margin-left: -150px; position: relative; right: -150px;}
</style>
</head>
<body>
<div class="header"></div>
<div class="container clear">
<div class="center">
<p>内容部分</p>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
三、viewport 视口
1. visual viewport可视视口、layout viewport 布局视口
visual viewport固定大小和屏幕一样大小且不可改变，在上面。layout viewport默认是980像素大小，可以改变大小。
一个页面不设置viewport，默认大小是980px。
2. viewport设置
device：设备
scalable：可伸缩
initial:最初的
3. 移动端适配方案
1等分比布局也叫流式布局
2等比式布局也叫rem布局
4.rem布局
进行宽度动态设置
不同的设备宽度不同，根据当前设备的layout viewport 设置fontsize的值。用document.documentElement.clientwidth获取layout的值，用document.documentElement.style.fontsize给根元素html设置fontsize。
5. 响应式布局-根据不同的设备，配置不同的样式
orientation:方向
portrait:竖向
landscape:景色地形，在这里指的是横向
@media媒体查询
通过@meidia添加媒体查询，根据不同的浏览器大小配置对应的样式。
<style type="text/css">
#box{width: 100px; height: 100px; background: red;}
/* @media all and (min-width:500px) {
#box{background: blue;}
} */
/* @media all and (min-width:500px) and (max-width:700px) {
#box{background: blue;}
} */
/* @media not all and (min-width:500px){
#box{background: blue;}
} */
/* @media all and(min-width:500px) {
#box{background: blue;}
}
@media all and (min-width:700px){
#box{background: yellow;}
} */
/* 纵向显示 */
@media all and (orientation:portrait) {
#box{background: blue;}
}
/* 横向显示 */
@media all and (orientation:landscape) {
#box{background: yellow;}
}
</style>
<!-- 通过link引入媒体查询 -->
<link rel="stylesheet" href="base.css" media="all and (min-width:400px)"/>
<link rel="stylesheet" href="base2.css"/ media="all and (min-width:600px)">
通过媒体查询为了修改常见样式，先写正常的样式，然后根据不同的设备，配置不同的样式。
display
通常移动端不需要的样式通过@meidia配合display进行隐藏，或者块和内联之间的转换。
四、css新特性
1.css自定义属性
自定义的作用域也是就近原则，和优先级原则。
2. shapes 环绕文字
shape-outside：属性
clip-path：切割图形形状
shape-margin：图形和坐标产生的间距
polygon：进行切点
3. scrollbar 自定义滚动条
4. scroll snap css滚动捕捉
小窗口的元素滚动条位置固定。
扫一扫
841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
