1.元素显示模式
元素模式 元素排列 设置样式 默认宽度 包含 块级元素 一行放一个 可设宽高 容器的100% 容器级可包含任何标签 行内元素 一行放多个 不可设宽高 它本身内容的宽度 容纳文本或者其它行内元素 行内块元素 一行放多个 可设宽高 它本身内容的宽度
2.权重
1、继承或者*权重为0,0,0,0。【继承的权重为0】
2、元素选择器权重为0,0,0,1
3、类选择器或伪类选择器权重为0,0,1,0
4、ID选择器权重为0,1,0,0
5、行内样式style=""权重为1,0,0,0
6、!improtant 重要的权重为 无穷大
3.浮动注意点
1、先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置；
2、浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
浮动的盒子不会有外边距合并的问题。
3.1清除浮动
1、额外标签法：div style=“clear: both;”> /div>或br/>，（不常用）（要求新的空标签必须是块级元素）；
2、为父元素添加：overflow:hidden（或auto或scroll），无法显示溢出的部分；
3、为父元素添加：:after（伪元素法，在大盒子后面加个浮动块）
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* /*IE6、7专有*/
*zoom: 1;
}
4、双伪元素清除浮动（在大盒子前面后面加个浮动块）
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* /*IE6、7专有*/
*zoom: 1;
}
4.CSS属性书写顺序
1、布局定位属性:display / position / float / clear / visibility / overflow
(建议display第一个写，毕竟关系到模式)
2、自身属性: width / height / margin / padding / border / background
3、文本属性:color / font / text-decoration / text-align / vertical-align / white-space / break-word
4、其他属性(CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…
导航栏一般用包含链接（li+a）
5.定位
定位=定位模式+偏移量
定位模式：
static（静态定位）
*relative（相对定位）：以原来位置为坐标，占位置
*absolute（绝对定位）：以最近以及的有定位的祖元素为参考点移动，不占用位置
子绝父相
*fixed（固定定位）：浏览器可视区，不占有位置
sticky（粘性定位）：以浏览器的可视窗口为参照点移动，占有原先位置
浮动元素会压下面的标准流盒子，不会压住标准流盒子里面的文字或图片，但绝对定位（固定定位）会压住标准流所有的内容。浮动会产生文字环绕效果。
6.网页布局总结
1、标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2、浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3、定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
6.1 网页布局技巧
1、让每个盒子margin往左侧移动-1px正好压住相邻盒子边框；
2、鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有有定位，则加相对定位（保留位置)，如果有定位，则加z-index )
7.元素的显示与隐藏
1、display（使用最多）
display：none；隐藏对象
display：block；除了转换为块级元素外，还有显示元素的意思
display隐藏元素后，不在占有原来的位置
2、visibility
visibility : visible；元素可视
visibility : hidden；元素隐藏
visibility隐藏元素后，继续占有原来的位置
3、overflow
属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条
8.用户界面
取消表单轮廓：outline：none；
防止拖拽文本域：resize：none；
图片文字对齐：vertical：XXX;（行内或行内块元素）
单行文本溢出显示省略号
white-space:nowrap；（默认normal自动换行）强制一行
overflow：hidden；超出隐藏
text-overflow：ellipsis；文本用省略号替代超出的部分
多行文本溢出显示省略号
overflow : hidden;
text-overflow: ellipsis;
/弹性伸缩盒子模型显示/
display: -webkit-box ;
/限制在一个块元素显示的文本的行数/
-webkit-line-clamp: 2;
/设置或检索伸缩盒对象的子元素的排列方式/
-webkit-box-orient : vertical;
9.HTML5语义化标签
header :头部标签
nav :导航标签
article :内容标签
section :定义文档某个区域
side:侧边栏标签
footer :尾部标签
audio：音频
video：视频
新增input类型：type=“number”（限制为数字类型）、“tel”（手机号码）、“search”（搜索框）
新增的表单属性（放在表单域里面）
属性 值 说明 required required 表单拥有该属性表示其内容不能为空，必填 placeholder 提示文本 表单的提示信息，存在默认值将不显示 autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单 autocomplete off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete="on”，关闭autocomplete ="off”需要放在表单内，同时加上name属性，同时成功提交 multiple multiple 可以多选文件提交
10.CSS3新特性
1、属性选择器
选择符 简介 E[att="val "] 选择具有att属性且属性值等于val 的E元素 E[att/=“val”] 匹配具有att属性且值以val开头的E元素 E[att$=“val”] 匹配具有att属性且值以val结尾的E元素 E[att*=“val”] 匹配具有att属性且值中含有val的E元素
类选择器、属性选择器、伪类选择器权重为10
2、结构伪类选择器
选择符 简介 E:first-child 匹配父元素中的第一个子元素E E:last-child 匹配父元素中最后一个E元素 E:nth-child(n) 匹配父元素中的第n个子元素E（n可以为数字，关键字-even偶数、odd奇数和公式） E:first-of-type 指定类型E的第一个 E:last-of-type 指定类型E的最后一个 E:nth-of-type(n) 指定类型E的第n个
3、伪元素选择器
选择符 简介（必须有content属性） ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容
伪元素选择器和标签选择器一样，权重为1
4、盒子模型 box-sizing:border-box;（不会撑大盒子，大小为width）
5、图片变模糊 flilter:blur(5px)
6、计算盒子宽度 width:calc函数
7、过渡（重点）谁做过渡给谁加
transition:要过渡的属性 花费的时间 运动曲线 何时开始；
11. SEO优化
网站TDK三大标签
1、title网站标题
2、description网站说明
3、keywords关键字
LOGO SEO优化
1、logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2、h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。
3、为了搜索引擎收录我们，我们链接里面要放文字(网站名称），但是文字不要显示出来。
方法1 : text-indent移到盒子外面( text-indent:-9999px)，然后overflow:hidden，淘宝的做法。
方法2∶直接给font-size:O;就看不到文字了，京东的做法。
4、最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了。
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
