目录
<head>标签内容定义
<head>标签内容定义
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。
width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。中device-width即表示，视区宽度应为设备的屏幕宽度。device-height即表示设备的屏幕高度。
initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。
maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。值的范围为0.25~10.0之间
user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。
<meta http-equiv="X-UA-Compatible" content="ie=edge">是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题
button & a
button 的原始目的就是一个通用的按钮，点击后应该触发 JavaScript，没有其它附带的隐含的附加效果
<a> 标签的隐含附带效果就是跳转页面到其它地方，而提交表单时应该有一个隐含附带的让浏览器触发提交表单的效果。
span & p
p标签指一个段落，是块级元素，有换行效果；
span是行内元素，一般单独修饰文字；
span 标签可以放在p标签里,p标签不应该放在span标签里
background & img
html img 先加载 css 后加载 所以重要的用 html img ,比如 logo
“如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。
而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。”
选择器易混符号
~波浪号：A ~ B 选择A标签后的所有B标签，【A和B必须有相同的父元素】
+加号（兄弟选择器）：A+B 选择紧邻在A后面的B元素，【A和B必须拥相同的父元素】所选到的仅为一个B元素标签。
>大于号：A>B 选择A元素里面的B元素【B元素是A元素下的第一代，只第一后代】
overflow：auto；
代码实现
.father {
width: 200px;
height: 200px;
background-color: blue;
overflow: auto;
}
.son {
width: 150px;
height: 500px;
background-color: aquamarine;
}注意要给父元素加
效果：
怪异盒模型
CSS3中可以通过box-sizing指定盒模型。
可以分为两种情况：
普通盒模型：box-sizing：content-box； 盒子大小为width + padding + border content-box：此值为其默认值，其让元素维持W3C的标准Box Mode
怪异盒模型：box-sizing：border-box； 盒子大小为width 就是说padding 和 border 是包含到width里面的，不会撑开盒子
CSS3 filter滤镜属性
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
/*
-moz代表firefox浏览器私有属性；
-ms代表IE浏览器私有属性；
-webkit代表chrome、safari私有属性；
-o代表Opera私有属性
*/
}修改图片的颜色为黑白（100%灰度）
Filter函数
| Filter | 描述 |
| none | 默认值，无效果 |
| blur(px) | 高斯模糊（参数可设置css长度值，不接受百分比） |
| brightness(%) | 调整图像对比度。值为0%，全黑；值为100%，不变；值可以超过100%。 |
| ...... | ...... |
CSS3 @media查询
使用媒体查询可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}自适应布局
常用单位：rem em % vw vh 少量px
为了界面兼容性更好，推荐使用宽度%或者vw 高度vw这种搭配去写自适应
vw
可以理解为手机屏幕宽度=100vw
手机端的兼容尺寸：320px-1200px
background-size
background-size:x,y;
background-size:cover|contain;
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
