#### 1.css3兼容老式IE 浏览器（ie678）–使阴影和圆角属性生效
-moz-border-radius:15px;//Firefox
-webkit-border-radius:15px; // Safari and Chrome
-moz-box-shadow: 10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
生效属性CSS3：(不完全方案-只有一部分)
behavior:url(ie-css3.htc);
#### 2.老式浏览器支持HTML5
（也可以下载静态文件引入）
<head>
<!-[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]->
</head>
#### 3.响应式图片
用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。
* 用srcset和sizes加载不同图片（兼容性：低）
<h2>srcset设置响应式图片</h2>
<!– 最小宽度是900的时候，像素是900，否则是100% –>
<img sizes=”(min-width:900px) 900px,100vm”
srcset=”img/480*320.gif 480w,
img/640*427.gif 640w,
img/720*480.gif 720w,
img/900*600.gif 900w
”
src=”img/480*320.gif” alt=”我是响应式图片”
>
</img>
* picture,source media加载不同的图片（兼容性：一般）
<picture>
<source media=”(max-width:480px)” srcset=”img/480*320.gif”></source>
<source media=”(max-width:640px)” srcset=”img/640*427.gif”></source>
<source media=”(max-width:7200px)” srcset=”img/7200*480.gif”></source>
<img src=”img/900*640.gif” alt=”响应式”></img>
</picture>
<!– 利用媒体查询属性media –>
<picture><>
* 用source type指定多种格式
* 超赞polyfill-picturefill（用来兼容大部分浏览器）
–下载引入加载picturefill.js文件
<script src=”js/picturefill.min.js” type=”text/javascript”></script>
#### Flexbox-弹性盒模型
.menu{
display:flex;
flex-flow:row wrap;
}
.menu li{
flex:1 1 100%
}
@media (min-width:480px){
.menu li{
flex: 1 1 50%;
}
}
@media (min-width:7680px){
.menu {
flex-flow: row nowrap;
}
}
———————–
flex-direction 设置主轴方向。确定弹性子元素排列方式
flex-wrap 当弹性子元素超出弹性容器范围时是否换行
flex-flow flex-direction和flex-wrap属性的快捷方式，复合属性
justify-content 主轴上的对齐方式（水平）
flex-start(默认值)主轴开始对齐–左对齐
flex-end 主轴结束对齐–右对齐
center 居中对齐
space-between 第一个，最后一个对齐弹性容器的边缘（两端对齐）
space-around 全部均匀对齐
align-items 侧轴上的对齐方式（垂直）
align-content 侧轴上有空白时，侧轴的对齐方式();
—–弹性子元素属性——-
order 控制弹性容器里子元素的顺序
flex-grow 设置弹性子元素的扩展比率
flex-shrink 设置弹性子元素的收缩比率
flex-basis 指定弹性子元素伸缩前的默认大小值，相当于width和height属性
flex flex-grow,flex-shrink,flex-basis属性的复合属性
align-self 允许独立的弹性子元素覆盖弹性容器的默认对齐设置（align-items）
———————————–
#### 瀑布流
简写:h1{图片瀑布流}+ul.picC>li*18>img>[src=”img/$.jpg”]
<h1>图片瀑布流</h1>
<ul class=”picC”>
<li><img src=”” alt=””></li>
</ul>
.picC{
width:90%;
margin:50px auto;
-webkit-column-count:4;
-moz-column-count:4; // 设置列的个数
column-count:4;
-webkit-column-gap:20px; // 设置列之间的间距
-moz-column-gap:20px;
column-gap:20px;
list-style-type: none;// 去掉列符号
column-rule:1px dashed raba(0,0,0,5); // 列之间的边框（分割线）
}
———————————————-
#### 媒体查询
获取用户行为以及设备的环境(系统平台，屏幕尺寸，屏幕定向)自适应的显示不同的布局。
媒体查询让css可以更精确作用于不同的媒体类型和同一媒体的不同条件。
两种方式：
第一种：link元素中的css媒体查询
<link rel=”stylesheet” media=”(max-width:800px)” href=”example.css/”>
第二种：
<style>
@media (max-width: 600px){
.face_sidebar {
display: none;
}
}
</style>
语法规则：
@media all and (min-width: 800px) 所有最小屏幕宽度为800像素的屏幕应用规则
@media (min-width:800px) 简写方式，同上
一般应用总结：
1.超小屏幕(手机，小于768px)
2.小屏幕(平版，大于等于768px);
@media (min-width:768px){….}
3.中等屏幕（桌面显示器，大于等于992px）
@media (min-width:992px){….}
4.大屏幕 （大桌面显示器，大于等于1200px）
@media (min-width:1200px){….}
#### 页面跳转
<a href=”soure.html”><img></img></a>
从一个新的页面打开
<a href=”” target=”_blank”></a>
无序列表：有小圆圈
<ul>
<li></li>
</ul>
有序列表：有123
<ol>
<li></li>
</ol>
—————-
今天的文章w3c html5手册_web前端最全笔记分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/47446.html
