标签（空格分隔）： HTML和CSS
[toc] html css
li.active表示对ul下的li有classname的.active有作用
ul>li.active{
background-color: deeppink;
border-right-color:red;
}
<ul>
<li></li>
<li class="active"></li><!--对这个li有作用-->
</ul>
禁止选中
onselectstart="return false;"禁止选中，不会出现蓝色遮罩
word-break
word-break: normal|break-all|keep-all;
- normal：使用浏览器默认的换行规则
- break-all:允许在单词内换行
- keep-all:只能在半角空格或连字符处换行。
伪类
E:first-line 表示E元素中的第一行 E:first-letter 表示E元素中的第一个字符 E::selection表示E元素在用户选中文字时 E::before 生成内容在E元素前
浏览器前缀
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
属性选择器
- E[attr]只使用属性名，但没有确定任何属性值
- E[attr="value"]指定属性名，并指定了该属性的属性值
- E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
- E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
- E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
- E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）,value的值不能多个
盒模型解析
box-sizing 盒模型解析模式 content-box 标准盒模型 width/height=border+padding+content border-box 怪异盒模型 width/height=content
倒影
box-reflect 倒影
direction 方向 above|below|left|right; 距离 -webkit-linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%) 渐变（可选） 例如：
-webkit-box-reflect: below 0px -webkit-linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%);
自由缩放
resize 自由缩放 both 水平垂直都可以缩放 horizontal 只有水平方向可以缩放 vertical 只有垂直方向可以缩放 注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放
div{
width: 100px;
height: 100px;
border: 1px solid red;
resize: vertical;
overflow: auto;
}
文本处理方式
Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号
注意配合overflow:hidden和white-space:nowrap一块使用 例如：
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis;
}
6.background
background-size
- background-size:100% 100%
- cover 放大 一定铺满整个容器，但是图片不一定显示完整
- contain 缩小 不一定会铺满整个容器，但会保证图片比例正常并显示完整
background-origin
- background-origin ： border | padding | content
- border-box： 从border区域开始显示背景。
- padding-box： 从padding区域开始显示背景。
- content-box： 从content区域开始显示背景
background-repeat
平铺是铺满整个容器，包括border 不平铺是从border以里开始显示
background-clip
- border-box： 从border区域向外裁剪背景。
- padding-box： 从padding区域向外裁剪背景。
- content-box： 从content区域向外裁剪背景。
- no-clip
遮罩
IE浏览器不支持，webkit内核的浏览器(包括chrome、safari、IOS、android)需要添加-webkit-前缀 Mask-image Mask-position Mask-repeat
div{
width: 640px;
height: 500px;
border: 10px solid pink;
background:url(img/4.jpg) no-repeat;
-webkit-mask: url(img/bg.png);
-webkit-mask-position: 0 0;
-webkit-mask-repeat: no-repeat;
transition: 5s;
}
div:hover{
-webkit-mask-position: 640px 500px;
}
H5表单控件
email : 电子邮箱文本框，跟普通的没什么区别 当输入不是邮箱的时候，验证通不过 移动端的键盘会有变化 tel : 电话号码 url : 网页的URL http:// https:// search : 搜索引擎 chrome下输入文字后，会多出一个关闭的X range : 特定范围内的数值选择器 min、max、step( 步数 )
number : 只能包含数字的输入框 color : 颜色选择器 datetime-local : 显示完整日期，不含时区 time : 显示时间，不含时区 date : 显示日期 week : 显示周 month : 显示月
弹性盒模型display:flex
flex-direction 设置项目排列方向即主轴方向
- row 从左向右排列(默认值)
- row-reverse 从右向左排列
- column 从上往下排列
- column-reverse 从下往上排列
justify-content 主轴对齐方式
- flex-start (默认) 元素在开始位置 富裕空间占据另一侧
- flex-end 富裕空间在开始位置 元素占据另一侧
- center 元素居中 富裕空间 平分左右两侧
- space-between 富裕空间在元素之间平均分配
- space-around 富裕空间在元素两侧平均分配
align-items 侧轴对齐方式
- flex-start (默认) 元素在开始位置 富裕空间占据另一侧
- flex-end 富裕空间在开始位置 元素占据另一侧
- center 元素居中 富裕空间 平分左右两侧
flex-wrap 换行
- nowrap (默认)
- wrap 换行
- wrap-reverse 反向换行
flex-flow
- flex-flow 是 flex-direction 和 flex-wrap 的缩写(主轴方向和换行)
- flex-flow: [flex-direction] [flex-wrap]
align-content 堆栈伸缩行
- align-content 会更改 flex-wrap 的行为。
- 它和 align-items 相似，但是不是对齐伸缩项目，它对齐的是伸缩行。
- flex-start (默认) 元素在开始位置 富裕空间占据另一侧
- flex-end 富裕空间在开始位置 元素占据另一侧
- center 元素居中 富裕空间 平分左右两侧
- space-between 富裕空间在元素之间平均分配
- space-around 富裕空间在元素两侧平均分配
order 显示顺序（从小到大排列，可以是负数）
flex 伸缩性
align-self 侧轴对齐
- flex-start (默认) 元素在开始位置 富裕空间占据另一侧
- flex-end 富裕空间在开始位置 元素占据另一侧
- center 元素居中 富裕空间 平分左右两侧
