HTML+CSS基础总结
一：常用标签：
1. 标题栏图标：
后缀名为 .ico的图片
<link href="bitbug_favicon.ico" rel="icon" />
2. 网站说明 :
3. 关键词：
4. 样式优先级：
!important>js > style行间样式 > id > class > 标签 > 通用
继承的权重为0
!important>js >行内style>id>结构性伪类（eq :nth-child() ：nth-of-type()）> id > 类 > 标签 > 通用
5. 继承性：
text- font- line- color 可以继承 继承的权重为0
6. h1-h5 标签
标题
字体由大到小
标题
标题
标题
标题
7. img 标签
可用float属性来实现文本环绕图像
8. a 标签
W3School
target= "_self/_blank" 当前窗口/新窗口
href="#Id" id="Id" 锚链接
下载功能
href = "img/1.jpg";
a:link 未访问(默认)
a:active 鼠标按下
a:hover 鼠标悬停
a:visited 访问过后
定义所有窗口都是新窗口打开:9. 常用的文本标签
为中间的文字加引号
强调文本 粗体
强调文本 斜体
缩写
改变一段文字的样式
10. 列表
- 标题
- 列表项
- 列表项
- 列表项
11. 表单
action:规定当提交表单时向何处发送表单数据。
method: 规定用于发送 form-data 的 HTTP 方法。get/post 一次发送/分段发送
target: 规定在何处打开 action URL。
subimit: 提交按钮
name: 为按钮起个名字，单选按钮时名字一样才能实现单选效果
表单标签里面的值要修改需要到 value 里面设置
非表单元素 href title src alt等
表单元素 type value checked disabled selected
placeholder="13213" 提示
submit: 提交按钮
text: 文本框
password: 带*号的文本框
radio: 单选按钮 name="gender"性别
checkBox: 复选框
file: 上传
image: 图片
button: 按钮
reset: 重置
hidden: 隐藏域，用户看不到，给后台程序员查看是哪一条数据使用的
email: 邮箱格式
tel： 手机格式 ----一般用于手机端限制用户输入类型
number： 只能是数字
url： 网址格式
search： 搜索框，多了一个 X
range： 一个可自动拖动滑块的区域
拖动时 value 值会跟随改变，表当前值
time： 小时分钟
data： 年月日
datatime： 时间---只用苹果浏览器支持
datatime-local：
month： 月，年
week： ____年第___周
color： 颜色 ---- 出现一个颜色选择块
placeholder = '123' 提示信息
autocomplete ="on/off" 是否记录输入的值
此属性所在的表单必须要 提交按钮 和 name/id 属性
autofocus = "autofocus" 自动获取焦点
required 必填项
multiple=“multiple” 多文件/图片/邮箱上传
pattern = “^\d{17}[0-9x]$” 正则表达，注：此时不需要加 /
accesskey = "s" 用Alt+''快捷键跳到指定位置
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">
100+<input type="number" id="b" value="50">
=<output name="x" for="a b">output>
form>
<p><b>注释：b>Internet Explorer 不支持 <output> 标签。p>
body>
html>
// progress
// meter
<audio src="/mp3.mp3" controls autoplay loop='-1' >audio>
<video>
<source src="" poster="../aa.jpg" >source>
video>
resize:none
none:用户无法调整元素的尺寸。
both:用户可调整元素的高度和宽度。
horizontal:用户可调整元素的宽度。
vertical:用户可调整元素的高度。
一般与from input一起用，可以关联到相关控件上
12. 表格
表格标题
单元格
单元格
单元格
13. 内联
1.不支持width，height
2.不支持上下外边距
3.不支持上下内边距
4.换行被解析为空格，空格为文字大小的一半
5.增加 display:block;显示为块
6.加float:left;后变成块元素
7.加position:fixed;后变成块元素 relative不行
display:none;不显示
display:inline-block;ie6ie7不支持
14. 块标签
1.默认一行
2.支持内外边距
3.增加 display:inline;显示为内联
不设宽度时宽度继承父元素，不设高度时高度被子集撑高
p标签内不能嵌套块标签
自带浮动，所以要清浮动li
15. 内联块
inline-block
------
1.块在一行显示
2.行内属性支持宽高
3.没有宽度的时候内容撑开宽度
4.换行解析成空格
16. 新增标签
头部
主体
文章
二：常用属性：
0. 选择器
1).基本选择器
通配选择器---->选择文档中的所有HTML元素
E 元素选择器 选择指定的类型的HTML元素
#id ID选择器 选择指定ID属性值为'id'的任意类型元素
.class 类选择器 选择指定class属性值为'class'任意类型的多个元素
1.多类选择器 .class1.class2 只匹配同时具有class1和class2的元素
2.标签类选择器 ul.class1 只匹配包含class1的ul元素
3.群组选择器 selector1，selectorN 例: ul,p,a{ ...}
2).层次选择器
E F 后代选择器 选择E元素所有后代中的F元素
E>F 子选择器 选择E元素中的子元素F
E+F 相邻兄弟选择器 选择紧位于E元素后面的F元素
E~F 通用选择器 选择E元素后所有兄弟元素中的F元素
EF 交集选择器
3).伪类选择器
<1>.动态伪类选择器 L-V-H-A
E:link 链接伪类选择器 未被访问时的超链接
E:visited 链接伪类选择器 访问过时的超链接
E:active 用户行为伪类选择器 单击未松开时的效果
E:hover 用户行为伪类选择器 鼠标停留时的效果
E:focus 用户行为伪类选择器 元素获得焦点时的效果
<2>.目标伪类选择器
E:target 为锚点元素添加样式，当锚点被触发时锚点的链接目标触发该样式
例:<a id="contact" href="#contact">关于我们a>
<a href="index.html#contact ">关于我们a>
<3>.语言伪类选择器
E:lang(language) 用来匹配使用指定语言的元素
<4>.UI元素状态伪类选择器
指定的样式只有在某种状态下才起作用
E:hover 鼠标经过（悬停）
E:active 鼠标点击（但未松开）
E:focus 鼠标获得焦点（点击松开）
<5>.结构伪类选择器 -----> 相对父元素来查找E元素
☸ 通用子元素过滤器：
E:nth-child(n) 选择父元素中的特定的子元素E
E:nth-last-child(n) 从某父元素的最后一个子元素开始计算，来选择特定的元素。
☸ 通用子类型元素过滤器：
E:nth-of-type(n) 选择父元素中指定元素类型为E元素的子元素。
E:nth-last-of-type(n) 从后往前，选择父元素中指定元素类型为E元素的子元素。
☸ 特定位置的子元素：
E:first-child 选择E的父元素中第一个子元素的元素E
E:last-child 选择E的父元素中最后一个子元素的元素E
E:first-of-type 元素 E 的父元素中 第一个元素类型为E元素的子元素-----相对于父级
E:last-of-type 元素 E 的父元素中 最后一个元素类型为E元素的子元素-----相对于父级
☸ 特定状态的元素------>查找父元素：
E:root 匹配E元素所在文档的根元素：HTML
E:only-child 选择父元素只包含一个子元素的元素(不能有其他类型的元素)
E:only-of-type 选择父元素只包含一个同类型的子元素(可以有其他类型的元素)
E:empty 选择没有子元素的元素，且该元素也不包含任何文本节点------>即不包含任何内容
**注：**当选中的元素为元素E时才生效 n的关键词：odd(奇数) even(偶数)
nlength n+length -n+length nlength+b
当 n<=0 时无效 ，所以可以用 -n+b 来设置前 b 个元素的样式
<6>.否定伪类选择器
E:not(F){} 除F元素的E元素
.ul:hover li:not(:hover) { 在li 标签下没有鼠标指向位置的显示下面情况；
-webkit-filter: blur(2px) grayscale(1);
opacity:0.7;
}
4).伪元素
::first-letter 用于向文本的首字母设置特殊样式
::first-line 用于向文本的首行设置特殊样式
::selection 设置当前选中内容的样式-----例：选中后背景颜色改变
注：该选择器只能设置显示的样式，不能设置内容的大小
注：以上只能用于块级元素
:before 用于在指定元素前插入内容
:after 在元素的内容之后插入新内容
1. 是一个行内元素
2. 必须设置 content 属性
3. 旧版本是伪类:，新版本是伪元素::
4. 功能等同于DOM元素，但不会在DOM树中生成
例：p:before{ content:“台词：”;} content:表示将要插入的新内容
5).属性选择器
E[attr] 选择具有属性attr的E元素
E[attr=val] 选择attr的属性值为val的E元素
E[attr|=val] 选择attr属性值为val 或以 val-开头的E元素
E[attr~=val] 选择attr属性值为val 或 是具有多个空格分开的值，其中的某个值为val的E元素
例：title=“hello word” h2[title~=hello]
E[attr^=val] 选择attr属性值以val 开头的E元素
E[attr$=val] 选择attr属性值以val 结尾的E元素
E[attr*=val] 选择attr属性值中任意位置包含"val"的E元素
1. 默认样式重置
(css reset)
2. 滤镜
-webkit-filter: grayscale(100%);
grayscale(%) 设置灰度---值为100%则完全转为灰度图像，值为0%图像无变化
blur(px) 高斯模糊
brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。
如果值是0%，图像会全黑
3. 过渡
transition: 要过渡的属性 花费时间 运动曲线 延时开始;
执行完毕后默认会还原
transition-property:属性名
transition-duration:持续时间
transition-timing-function:linear||ease||ease-in ||... (速度)
transition-delay: 延迟时间
多属性写法
transition: width 0.6s ease 0s ,
height 0.3s ease-in 1s;
运动曲线：
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezie(0.25,0.1,0.25,1）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(, , , ) 贝塞尔曲线
在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
steps(步数) 指定多少步(帧)完成
4. 动画
animation：name duration timing-function delay iteration-count direction fill-mode play-state;
name ： 规定需要绑定到选择器的 keyframe 名称。
duration ： 规定完成动画所花费的时间，以秒或毫秒计。
timing-function： 规定动画的运动曲线。
delay ： 规定在动画开始之前的延迟。
iteration-count：1 规定动画播放的次数。
infinite：无限次播放。
direction： 规定是否应该反向轮流播放动画。
normal；
alternate 反向交替轮播
fill-mode: 规定动画的结束状态
forwards:保留结束状态，有延时的情况下，不进行初始状态---0%
backwards:不保留结束状态，有延时的情况下也进行初始状态---0%
both:保留结束状态,有延时的情况下也进行初始状态---0%
play-state: 规定动画的开始或暂停
paused: 暂停
running: 播放
@keyframes mymove /*关键帧(@keyframes)*/
{
from {left : 0px;} ----------- from 等效于 0%.
to {left : 200px;} --------- to 等效于 100%
注意：此处不能加 ; 号
/----------------------------------------------/
0% { margin-top: 0px;}
/* 通过值的不改变来实现暂停效果 */
10% { margin-top: 0px;}
50% { margin-top: -100px;}
60% { margin-top: -100px;}
90% { margin-top: -200px;}
100% { margin-top: -200px;}
}
5. 缩放
transform : none
matrix(n,n,n,n,n,n) 定义2D转换,6个矩阵
matrix(n,n,n,n,n,n,n,n,n,n, n,n,n,n,n,n) 定义2D转换,16个值
translate(x,y) 在水平方向、垂直方向平移元素
/*【注】设置百分比+left:50% top:50%可实现子元素在父元素上居中*/
translate(x,y,z) 定义3D转换
translateX(x) 只用X轴
translateY(y) 只用y轴
translateZ(z) 只用z轴
/*---------------------------------------------------*/
scale(x[,y]?) 定义2D缩放
scale3d(x,y,z) 定义3D缩放
scaleX(x) 沿 X 轴进行缩放
scaleY(y) 沿 Y 轴进行缩放
scaleZ(z) 沿 Z 轴进行缩放(相当于盒子变厚)
/*---------------------------------------------------*/
rotate(angle) 定义 **2D** 旋转
在参数中规定角度-----**围绕Y轴进行平面旋转**
rotate3d(x,y,z,angle) 定义 3D 旋转。x y z 为一个向量值，表一个方向
rotateX(angle) 定义沿着 **X** 轴的 **3D** 旋转。
rotateY(angle) 定义沿着 **Y** 轴的 **3D** 旋转。
rotateZ(angle) 定义沿着 **Z** 轴的 **3D** 旋转。
/*---------------------------------------------------*/
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
如果角度为 **负值**，则向 **正轴** 的方向倾斜
如果角度为 **正值**，则向 **负轴** 的方向倾斜
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) /*为 3D 转换元素定义透视视图---视距---眼睛到3D元素的距离*/
perspective-origin:0px 0px /* 设置3D镜头的观察点，默认是元素的中心点 */
transform-origin : left top； 旋转中心点
transform-style: /*设置子元素的呈现方式为**2D**还是**3D**呈现，默认为**2D**呈现*/
flat；2D 呈现
preserve-3d ; 让子元素保留3D效果 3D空间呈现需在3D元素的父级设置此属性
6. 光标形状
cursor : default 默认
auto 浏览器默认
crosshair 十字线
pointer 小手
text 指示文本 I 型光标
wail 程序正忙(表，或者沙漏)
help 可用的帮助(问好或者气球)
move 移动 十字梅花状
not-allowed 禁止 红圈杠型
7. 最小宽度，透明度
min-width : 960px // 当宽度小于960px时当做960px处理
min-height : 960px
opacity : 0.5 ;
8. 禁用元素+元素只读
disabled : disabled ; 禁用
**readonly **: readonly ； 只读-----------一般用于文本框
9. 窗口打开方式
target="_blank" ; 新窗口打开
target="_self" ; 原窗口打开
定义所有的窗口都是新窗口打开：
10. 去除焦点框/元素的轮廓
outline-style:none ;
11. 字符实体
" "
' '
& &
< <
> >
空格
© ©
12. 垂直对齐方式
1.对浮动元素无效
2.图片是相当于内容的对齐方式，不是父元素
3.只针对于行内元素或者行内块元素，
4.因为初始对齐基线，所以视觉上会多几像素空白距离
解决li内容浮动和图片,input 多出几像素；
vertical-align :middle 中间对齐
:top 顶部对齐
:bottom 底部对齐
13. 溢出—overflow
overflow : auto;如果内容被修剪（一般由浏览器决定），则会显示滚动条
: scroll;内容会被修剪，默认显示滚动条
: hidden;溢出隐藏
: inherit 从父元素继承 overflow 的值
overflow:scroll hidden
14. 显示—display
☸ display :block 显示为块级元素
:none 显示为无 不占文档流
:inline
:inline-block(的默认显示)
**【注】**height : 0 + overflow : hidden 可达到 display : none 的效果
15. 能见度—visibility
☸ **visibility ** : hidden 隐藏 占文档流
☸ visibility : visible 可见的
16. 定位—position
☞ 相对定位:
☸ position:relative;
▷ 相对于自身进行移动
▷ 不影响其他元素的位置
▷ 元素不脱离文档流
▷ 元素层级提高
☞ 绝对定位:
☸ position:absolute**;
▷ 元素脱离文流
▷ 使内嵌支持宽高
▷ 块属性标签内容撑开宽高
▷ 如果父级有定位就相当于定位父级发生偏移，没有定位就相当于整个文档发生偏移
▷ 不加偏移量就保持在原位置，但脱离了文档流
☞ 固定定位：
☸ position:fixed**; 可用margin-(±)top/left值来具体调位置
▷ 元素脱离文档流
▷ 使内嵌支持宽高
▷ 块属性标签内容撑开宽高
▷ 加了偏移量后“只相当于可视窗口”发生偏移，若偏移值大于当前窗口的大小就会消失不见
▷ 不加偏移量就保持在原位置，但脱离了文档流
▷ 跟父级没关系
☞ 静态定位 :
☸ position:static;静态定位-----相当于取消当前定位
☯ 定位层级默认后者比前者的高
☯ 设置定位层级：z-index : 1 ; 默认的层级不超过1
<style>
.div1{
position:relative;
width:500px;
height:500px;
bgckground-color:#ccc;
}
.div2{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
/*不设宽高时，该元素会继承父元素，可以达到遮罩层的效果*/
width:200px;
height:200px;
background-color:skyblue;
}
style>
div>
div>
17. 边框
☞ 边框的基本属性
border-width: 设置边框的大小
border-style: 设置边框的样式
border-color: 设置边框的颜色
<简写：border: border-width border-style border-color;>
☞ 边框的样式
border-style:none ; 无边框
dotted ; 点装边框
dashed ; 定义虚线
solid ; 定义实线
double ; 定义双线
groove ; 定义 3D 凹槽边框
ridge ; 定义 3D 垄状边框
inset ; 定义 3D inset 边框
outset ; 定义 3D outset 边框
inherit; 规定应该从父元素继承边框样式。
合并相邻边框：border-collapse: collapse;
☞ 边框多重颜色
p.one
{
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
}
Gecko引擎内核 -moz-
Trident(IE内核) -ms-
KHTML -o-
webkit(谷歌) -webkit-
☞ 图片边框属性
border-image:url(border.png) 27 repeat;
图片(url(border.png))，剪裁位置(27)，重复方式(repeat)
子属性：
border-image-source:图片(url(border.png));
border-image-slice :剪裁位置
border-image-repeat:重复方式 repeat(重复) round(平铺) stretch(拉伸)
☞ 边框圆角属性
/*是参照元素的实际大小来进行圆角设置*/
border-radius:10px 10px 10px 10px/ 20px 20px 20px 20px; 四个角的水平半径/垂直半径 左上 右上 右下 左下
子属性：
border-top-left-radius:10px 左上 或者10px 20px 水平半径为10px垂直半径20px
border-top-right-radius: 右上
border-bottom-right-radius: 右下
border-bottom-left-radius: 左下
特殊应用: 1.当border-radius值<=边框的厚度时，元素边框内部将不具有圆角效果
2.当元素相邻的边具有不同的厚度时，角度将有宽的边平滑过渡到窄的边
3.图片应用圆角时需先将图片设置成背景再设置圆角，可解决兼容性
4.表格设置圆角时需设置属性 border-collapse:separate
border-collapse: 表格边框是否合并
collapse:合并
separate(独立的):不合并
☞ 盒子阴影
box-shadow:h-shadow v-shadow blur(可) spread(可) color(可) inset/outset(可)
水平偏移量 垂直偏移量 模糊度 模糊半径 颜色 内外阴影
blur：模糊度，即：柔和度
spread：设置后相当于扩展阴影，即：阴影会不断变大
box-shadow: 0px 0px 10px 5px #111 inset
特殊应用:1.图片应用内阴影时需先将图片设置成背景再设置阴影，可解决兼容性
2.多层阴影
box-shadow: 0px 0px 0px 5px #888888,
0px 0px 0px 10px #569892,
0px 0px 0px 15px #775566,
0px 0px 0px 20px #f55a45;
18. 背景
☞ 背景基本属性
background-color:red; 背景颜色 rgba(0,0,0,0.5) 背景透明度
background-image:url(...); 背景图片
background-repeat:repeat 平铺方式
repeat(X,Y)
no-repeat
repeat-x
repeat-y
round : 将图片缩放之后再平铺
space : 图片不会进行缩放，但会在图片之间产生一个相同的间距值
background-attachment:scroll 图片固定还是滚动
scroll:跟随页面滚动，不是跟随容器
fixed:固定在当前位置
local:当滚动容器时，图片也跟随一起滚动
background-size:300px,300px 图片大小
background-position:top left 图片位置 (top left)||(0% 0%)||(0 0)
如果只规定一个值，那么第二个值将默认为center
例：top 将显示在上中 left为左中
*******注：图片向左移动需设负值
☞ 背景原点(起始点)属性
background-origin:padding-box(默认值); 决定背景图片定位的起点
padding-box ; 图片相对于内边距框左上角来定位
border-box ; 图片相对于边框左上角来的定位
content-box ; 图片相当于内容框左上角来定位
注:是从左上角到右下边框，而不是到右下内边距框或者内容框
☞ 背景裁切属性
background-clip:border-box(默认值);
border-box ; 从边框开始剪切
padding-box; 从内边距开始剪切
content-box; 从内容框开始剪切
注:可先设置图片的原点属性(位置)，再从指定处开始剪切，已达到指定显示某区域的画面
-webkit-background-clip:text; 文字以外全部剪切掉 此属性仅支持webkit内核的浏览器
-webkit-text-fill-color:transprent; 设置文字为透明度
☞ 背景尺寸属性
background-size:auto 保持比例自动缩放
取具体值：若只有一个值，那么另一个值为 auto
百分比：参照父容器可放置内容区域的百分比
cover 保持图片本身宽高比，将图片等比例缩放到宽度或高度正好适应的区域，
必须使图片占满整个容器， 所以比例不对会造成图片的溢出
contain 保持图片本身宽高比，将图片等比例缩放到宽度或高度正好适应的区域，
必须使图片包含在容器之内，所以比例不对会造成空白区域
☞ 背景渐变
/*1. 线性渐变*/
background:linear-gradient(方向,开始颜色1，结束颜色1，开始颜色2，结束颜色2......)
'方向：' to top / to bottom / to left / to right
'颜色：' red 0%,red50%,blue 50%,blue 100%;
/*2. 径向渐变*/
background:radial-gradient(形状 大小(半径) 圆心(定位点)，颜色)
'形状：' cicrle ellipse(默认)
'大小(控制半径)' closest-side（最近边）
closest-corner(最近角)
farthest-side(最远边)
farthest-corner（最远角）
默认为--->最远角
'圆心(定位点)' top left / right center / 50% 50% / 50px 50px;
'颜色：' red 0%,red50%,blue 50%,blue 100%;
☞ 多背景属性
分写：
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"),
url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),
url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
简写：注：图片向左移动需设负值
.b {background:url("http://www.leemagnum.com/img/left.jpg") no-repeat left top,
url("http://www.leemagnum.com/img/right.jpg") no-repeat right top;padding:0 10px;}
19. CSS文本属性
/*定义字体类型*/
font-family:
/*字体样式*/
font-style:normal
italic 指斜体字
oblique 指倾斜的文字，对于没有斜体的字体可以用oblique来倾斜
/*定义字体的粗细*/
font-weight:normal
bold 粗体
bolder 更粗的字体
lighter 细体
100~900 以百为单位 400=normal 700=bold
/*定义字体的大小写*/
font-variant:normal
small-caps 设置小型大写字母体
/*伸缩变形*/
font-stretch:normal 对当前的 font-family 进行伸缩变形。
wider 把伸展比例设置为更进一步的伸展值
narrower 把收缩比例设置为更进一步的收缩值
font-size-adjust:0.6 对指定文字的x轴高度进行设置 c = ( a(指定纵横比)/a'(原纵横比) ) s.
/*设置词与词的间距*/
word-spacing:normal
length 10px -1em em:相对于对象类文本的尺寸 0.5em=0.5*当前字体大小
/*设置字符与字符的间距*/
letter-spacing:normal
length
/*设置字符与字符的空白间距*/
white-space:normal 处理字符与字符的空白间距
normal 默认，空白会被浏览器忽略
pre 空白会被浏览器保留
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 同pre属性,但是遇到超出容器范围的时候会自动换行
pre-line 同pre属性,但是遇到连续空格会被看作一个空格
/*文本的水平对齐方式*/
text-align:left
right/center/justify(两端对齐)
/*文本的垂直对齐方式*/
vertical-align: baseline 文本的垂直对齐方式(通常用于图片包含在文字中)
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
/*定义下划线*/
text-decoration:none
none 无下划线
underline 下划线
overline 上划线
line-through 删除线
blink 闪烁线
/*文本首行缩进*/
text-indent:50px;
length与百分比
/*行高*/
line-height:normal;
length与百分比
/*文本大小写转换*/
text-transform:none;
capitalize 首字母大写
uppercase 大写
lowercase 小写
/*文本阴影*/
text-shadow:
50px 5px 5px #FF0000 ----> 水平距离 垂直距离 模糊度 颜色
/*多层阴影实现立体效果*/
-1px -1px 0px #eee ,
-2px -2px 0px #ddd ,
-2px -2px 0px #ccc ,
/*设置文本的方向*/
direction:ltr; 设置文本的方向
ltr(默认)
rtl 从右到左
/*文本溢出*/
text-overflow:clip 文本溢出
clip 溢出剪切
ellipsis 溢出显示省略号
注：text-overflow属性需配合 white-space:nowrap 和 overflow:hidden 一起使用
/*长单词换行*/
word-wrap:normal 允许长单词或 URL 地址换行到下一行。
normal 只在允许的断字点换行
break-word 在长单词或 URL 地址内部进行换行。
/*自动换行*/
word-break:normal 属性规定自动换行的处理方法。
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或标点处换行。中文与中文之间不能换行
/*溢出多行显示省略号*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
注：word-wrap:break-word与word-break:break-all
共同点是都能把长单词强行断句，不同点是word-wrap:break-word会首先起一个新行来放置长单词，
新的行还是放不下这个长单词则会对长单词进行强制断句；
而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。
20. 内外边距
☞ 内边距 padding
相当于给盒子直加了厚度，只影响父级大小
padding-top(right/bottom/left):10px;
padding:10px 10px 10px 10px/top right bottom left;
☞ 外边距 margin
1.上下外边距会叠加
2.父子级包含的时候子级的margin-top会传递给父级
3.负值时可以覆盖,正值不行
margin-top(right/bottom/left):10px;
margin-left:auto;标签自动到最右边
margin-right:auto;标签自动到最左边
margin-left:auto;margin-right:auto;标签自动水平居中
margin:0 auto;水平居中
21. 浮动
1.块在一行显示
2.行内属性支持宽高
3.没有宽度的时候内容撑开宽度
4.换行"不"解析成空格
5.该元素脱离文档流 文档流：该元素在文档中所占用的 图片不会占用剩余的位置
6.提升元素层级半层，也就是提升到元素内容的层级
------------
| 元素内容 |
------------
| 元素本身 |
------------
元素加了浮动，会脱离文档流，往指定的一个方向移动直至碰到父级的边界或者另一个浮动元素停止
float:left/right/none;
float:left; 从左向右排列
float:right; 从右向左排列
控制浮动：clear 作用于块级元素
该元素的某一个方向不能有浮动元素,如果有，该元素就自动跳到下一行
clear:left/right/both/none
clear:both;两边都不能有浮动元素
设了float:left的元素允许它的右边存在任何元素同行显示，不论是内联元素还是块元素。
但它的左边还是不允许存在任何块级元素与之同行显示，
哪怕其它的元素的代码在前，除非也给前面的元素加上float:left或display:inline-block后
22. 清浮动
清浮动：
为了父级元素可以包含住子级元素所以要清浮动
1.给父级加浮动
2.给父级加inline-block
3.浮动元素下加div设置其height:0px clear:both
4.在浮动元素下加
clear="all"等同于样式中的clear:both
5.父级{zoom:1;}触发haslayout
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了,
这里一旦改变zoom值时其实也会发生重新渲染
父级:after{conter:"";display:block;clear:both;}
6.给父级加 overflow:outo;zoom:1
.clearfix:after {
/* 清除浮动 */
content: "." ;
/* 内容为小点，尽量加不要空，否则旧版本浏览器有空隙 */
display:block; /* 转换为块级元素 */
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
clear清除浮动的原理是：
让添加了clear属性的那个元素的top边缘在某侧或者两侧（看设置的值是left right还是both）浮动元素的底 边距之下。
23. BFC规则
BFC : 块级格式化上下文
-
如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器
-
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素
-
简单来说：它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系
块级元素：父级（是一个块元素）
内容 ：子元素（是一个块元素）
其他元素：与内容同级别的兄弟元素
相互作用：BFC里的元素与外面的元素不会发生影响
-
触发条件：
1. body 根元素
2. 浮动元素：float 除 none 以外的值
3. 绝对定位元素：position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)
可解决 ---- 上下外边框塌陷，子元素浮动-父元素高度塌陷，兄弟元素被遮挡，实现文字环绕
-
布局规则
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠
BFC布局规则
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.BFC的区域不会与float box叠加，所以非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.子元素的margin值会与父级的边框相接触，所以不会传递给父级（父级触发了BFC）
4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发
24. 盒模型
☞ 盒模型简介
W3C标准下：
/*外盒尺寸(元素空间尺寸)*/
element空间高度 = 内容高度 + 内距 + 边距 + 外距
element空间宽度 = 内容宽度 + 内距 + 边距 + 外距
/*内盒尺寸(元素大小)*/
element空间高度 = 内容高度 + 内距 + 边距
element空间宽度 = 内容宽度 + 内距 + 边距
IE下：
/*外盒尺寸(元素空间尺寸)*/
element空间高度 = 内容高度 + 外距
element空间宽度 = 内容宽度 + 外距
/*内盒尺寸(元素大小)*/
element空间高度 = 内容高度 height包括元素的边框，内容，内边距
element空间宽度 = 内容宽度 width 包括元素的边框，内容，内边距
☞ 盒模型属性
定义盒模型的尺寸解析方式
box-sizing:content-box (默认值) 元素为W3C标准
border-box IE传统模型 (不用因为border或者padding值而破坏布局)
☞ 内容溢出
overflow:scroll ;默认显示滚动条
:auto ;溢出显示滚动条
:hidden ;溢出隐藏
:no-display ;溢出不显示元素 相当于设置了display:none
:no-content ;溢出不显示内容 相当于设置了visibility:hidden;
☞ 元素拖动
resize:none 用户不能拖动修改尺寸大小 IE不兼容
:both 用户可以拖动和修改尺寸的大小
:horizontal 用户可以拖动并只可以修改宽度
:vertical 用户可以拖动并只可以修改高度
☞ CSS外轮廓属性
outline ------>不占文档流 不能设置单边的轮廓
outline-color:
outline-style:
outline-width:
outline-offset: 定义轮廓框偏移位置的数值
25. 伸缩布局
☞ 容器属性
display:flex 设置元素为块级伸缩容器
inline-flex 设置元素为内联块伸缩容器
/* 如果一个容器设置了的 display:flex/inline-flex 属性，那么他的子元素都会变成伸缩容器
只能影响到下一代元素，后代元素影响不到*/
/*主轴方向*/
flex-direction:row 决定主轴的方向
row(默认值) 主轴为水平方向，起点在左端。
row-reverse 主轴为水平方向，起点在右端。
column 主轴为垂直方向，起点在上沿。
column-reverse 主轴为垂直方向，起点在下沿。
/*换行方式*/
flex-wrap:nowrap 定义如果一条轴线排不下，如何换行。
nowrap(默认) 自动缩小，不换行。
wrap 换行，第一行在上方。
wrap-reverse 换行，第一行在下方。
/*简写属性*/
flex-flow:row nowrap flex-direction属性和flex-wrap属性的简写形式
/*主轴上元素对齐方式*/
justify-content:flex-start 定义了项目在主轴上的对齐方式。
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等。边框与项目之间没有间距
space-around 每个项目两侧的间隔相等，边框与项目之间有间距
即：项目之间的间隔比项目与边框的间隔大一倍。
/*交叉轴上元素对齐方式*/
align-items:stretch 定义项目在交叉轴上如何对齐
stretch 拉伸：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start 交叉轴的起点对齐。
flex-end 交叉轴的终点对齐。
center 交叉轴的中点对齐。
baseline 项目的第一行文字的基线对齐。
/*多根轴线的对齐方式*/
align-content:stretch 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
stretch 轴线占满整个交叉轴。
flex-start 与交叉轴的起点对齐。
flex-end 与交叉轴的终点对齐。
center 与交叉轴的中点对齐。
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
☞ 项目属性
order:0 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow: 定义项目的放大比例，即：扩展子元素的宽高值，默认为0，如果为1，则该属性将平分剩余空间
flex-shrink 定义了项目的缩小比例，默认为1，即当空间不够时，该属性值为1的子元素会等分缩小宽高值
flex-basis 在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小
它可以设置为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex:0 1 auto
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
若 flex：1 即：一个非负数字，那么 flex-basis 取 0%
若 flex:1 1 即：两个非负数字，那么 flex-basis 取 0%
若 flex:none ===> flex:0 0 auto
若 flex:auto ===> flex:1 1 auto
若 flex:14px/14% 即：取一个长度或者百分比，那么 flex:1 1 14%
若 flex:2 14px/14% 即：取一个非负数字和一个长度/百分比，那么 flex:2 1 14%
align-self: 允许单个项目有与其他项目不一样的对齐方式，默认值为auto，
表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
auto | flex-start | flex-end | center | baseline | stretch;
深度作用选择器
1. less sass
// 当 style 样式标签添加了 scoped 后 父组件的样式就不会影响到子组件的样式
此时就需要用 /deep/ 深度作用选择器来进行穿透连接
/*
1. 使用 v-html渲染的内容不回受 scoped 内的样式影响
2. 子组件不会受父组件scoped内样式的影响
*/
用法：父组件的类名 /deep/ 子组件的类名 需设置的子组件类
2. style
普通的style样式 用 >>> 连接进行穿透即可