Css常用属性

!important 提升指定样式规则的应用优先权

font-weight：

normal  清除h1、h2....

尺寸属性

width:宽度

max-width:最大宽度

min-width:最小宽度

height：高度

溢出处理
overflow: 取值：visible 默认值，溢出部分可见的、hidden溢出部分隐藏、scrol不管是否溢出，x和y轴方向都添加滚动条、auto只有溢出才有滚动条，不溢出没有 、overflow-x设置水平轴滚动、overflow-y 设置垂直轴滚动条
边框

border:width style color;

style 
solid 实线
dotted 点点虚线
dashed 断线虚线
double  双实线

color：
合法的颜色值和transparent[等同于全透明]

边框的倒角(圆角)

border-radius: px

边框的阴影

box-shadow:
取值：h-shadow v-shadow blur spread color inset;
h-shadow 水平方向的阴影偏移
v-shadow 垂直方向的阴影偏移
blur 阴影模糊距离
spread 阴影尺寸
color 阴影的颜色
inset/outset  设置内部阴影和外部阴影

轮廓

在边框外围的一圈线条，被称为边框的边框
outline:width style color;
去除轮廓，去除边框
border:none/0;
outline:none/0;
**框模型，盒子模型**
外边距margin：边框以外的距离，元素与元素之间的距离
内边距padding：边框与内容区域之间的距离font-size   字体大小

外边距溢出

在子元素之间添加一个空的<table></table> 或者overflow: hidden

合并内外边距

box-sizing 取值:border-box content-box box-sizing:border-box的宽高包含内外边距

背景图片

background-image:url(09.png);

背景图片的平铺

background-repeat 取值：1.repeat 默认值 平铺2.no-repeat 不平铺3.repeat-x  水平方向平铺4.repeat-y  垂直方向平铺

背景图片的定位

 background-position:x y;

背景图片的尺寸

background-size:x y

背景图片的固定

background-attachment取值：scroll 默认值，背景图会跟随页面滚动条而滚动/fixed 固定，背景图相对于页面位置固定

文本对齐方式

text-align: 取值 left/center/right/justify

行高

line-height 取值 px为单位的数字

文本的线条修饰

 text-decoration 取值 1.none 默认值，无线条2.underline 下划线3.overline 上划线4.line-through 删除线 项目中使用最多的,a标签去除下划线 textdecoration:none;

首行缩进

text-indent：以px为单位的数字

文本阴影

 text-shadow:h-shadow v-shadow blur color h-shadow 水平偏移v-shadow 垂直偏blur模糊距离color阴影颜色

边框的合并和分离

border-collapse: 取值： separate 默认值，边框分离状态 collapse 边框合并状态

边框的边距

border-spacing:x  y; 取值，以px为单位的数字/前提，边框必须是分离状态，才有效border-collapse: separate

普通流定位 (默认文档流定位)

浮动定位

float 取值：left  right  none

清除浮动效果(清除浮动)

clear 取值：none （不清除）right（右） left（左）  both （左右）需要在浮动元素平级除添加空标签设置clear

显示方式

display:
取值：
1.display:block； 让元素以块级的方式显示
2.display:inline； 让元素以行内的方式显示
3.display:inline-block； 让元素以式显示
4.display:table； 让元素以table的方式显示行内块的方
5.display:none； 让元素隐藏，脱离文档流，不占位置、

显示效果

Visibility 取值：

1.visible 默认值，可见的2.hidden 隐藏

垂直对齐方式

vertical-align table使用 图片使用

关标

cursor: 默认值 default
小手   pointer
十字   crosshair
文本    text
等待    wait
帮助    help

清除ul li样式

list-style-type取值 1.disc 默认值2.none 去掉标识项3.circle4.square

定位position:

取值：
1.static 默认，静态(默认文档流)
2.relative相对定位 .一般作为绝对定位的祖先元素
3.absolute 绝对定位 使用绝对定位需设置父级元素为相对定位，不然会找body，或最近定位元素
 4.fixed     固定定位

相邻兄弟选择器

选择器 + 选择器{} 获取紧紧挨在某元素后面的兄弟元素p+.c1{color:#f00;}

通用兄弟选择器

选择器 ~ 选择器{} 获取元素后面所有符合条件的兄弟#p1~.c1{color:#f00;}

伪类选择器

:link  :visited  :hover  :active  :focus

结构伪类选择器

1.选择器 标签:first-child{} 匹配的元素是属于其父元素的第一个子元素(找大哥)
2.选择器 标签:last-child{} 匹配的元素是是属于其父元素的最后一个子元素(找小弟
3.选择器 标签:nth-child(n)    n从1开始 
:empty 匹配内部没有任何元素标签，包括文本，空格，回车，都不能有
only-child 匹配属于其父元素的唯一子元素
:not(selector) 否定伪类
:first-letter或者 ::first-letter 匹配元素的首行首字符
:first-line 或者  ::first-line 匹配元素的首行

弹性布局

display:flex 要发生弹性布局的子元素，他们的父元素，成为容器需设置display:flex，flex将块级元素设置为容器， inline-flex将行内元素设置为容器 元素设置为flex容器后，容器的text-align，vertical-align失效

设置主轴的方向

flex-direction 取值
row 默认值，主轴是x轴，主轴起点在左端
row-reverse 主轴是x轴，主轴起点在右端
column     主轴是y轴，主轴起点在顶部
column-reverse 主轴是y轴，主轴起点在底部

设置项目的换行

flex-wrap: 取值
默认值  nowrap  空间不够时，不换行，项目会自动缩小
wrap  空间不够时，项目不缩小，换行
wrap-reverse 项目换行，并反转

定义项目在主轴上的对齐方式

justify-content 取值
1.flex-start 默认值，主轴起点对齐
2.flex-end 主轴终点
3.center   主轴中心
4.space-around 每个外边距相同，两端有空白
5.space-between 两端对齐，两端无空白

项目们在交叉轴上的对齐方式

align-items: 取值
1.flex-start 默认值，交叉轴起点对齐
2.flex-end 交叉轴终点对齐
3.center 交叉轴中间对齐
4.baseline 基线，同flex-start类似
5.stretch 项目不写高，充满容器整个高度

css hack
由于不同的浏览器对css的解析认知是不同的，会导致同一份css在不同的浏览器生成的页面效果不同
我们要针对不同的浏览器写不同的css代码
这种写不同css代码的过程，就叫css hack
tmooc有相关的视频
-webkit-
-ms-
-moz-
-o-

指定参与过渡的属性

transition-property  取值  all  所有支持过渡属性都参与，单独写某个css属性，多个属性间用空格分开

指定过渡时长

transition-duration: s/ms 指定多长时间完成此次过渡操作

过渡时间曲线函数

transition-timing-function:
取值：
1.ease  默认值，慢速开始，中间变快，慢速结束
2.linear 匀速
3.ease-in 慢慢开始，一直加速
4.ease-out 快速开始，一直减速
5.ease-in-out 慢速开始，慢速结束，中间先加速再减速

延迟执行

transition-delay:s/ms

过渡代码编写的位置

写在原来的选择器中，过渡效果有去有回
写在hover中，过渡效果有去无回l
text-decoration:none 清除a标签
slice 截取字符串
active 选中
hover 鼠标移入
disabled 禁用值是true或者false
display:none; 隐藏block
placeholder 属性规定一个简短的提示，它描述了表单提示内容
<input type="radio" value="1" checked> radio单选按钮 checked控制是否选择值是true或者false
<input type="checkbox" value="1" checked> checkbox复选框
<select> <option value ="volvo">Volvo</option> </select> 下拉列表

outline:none; 属性规定了表单的默认样式

过渡 重点

让CSS的值在一段时间内平缓的变化
1.指定过渡的属性
Transition

1、指定过渡的属性

transition-property:background-color border-radius**;**all所有支持过渡的属性都过渡
支持过渡的属性有：颜色属性 大多数取值为具体数字的属性 阴影 转换 visibility

2、指定过渡持续时间

transition-duration: 3s; s/ms

3过渡时间曲线函数

transition-timing-function 
值：ease默认慢速开始，中间边快，慢速结束
linear匀速
ease-in 慢慢开始，一直加速  
ease-out 慢慢开始，一直减速
ease-in-out  慢慢开始，慢慢结束，中间先加速再减速
Transform **转换** 重点
改变元素在页面中的位置，大小，角度，形状
2D转换  3D转换
Transform 取值：none默认值，无任何效果 tranform-function转换函数
tranform-function 分为位移 旋转 放大 倾斜 3D旋转

/* 角度转换 */

transform: rotate(45deg);/* rotate转换元素角度 */
transform-origin: right bottom; 转换原点会影响元素旋转的效果 取值上下左右中 数字

2D转换

1、Translate()位移transform: translate(150px,150px); /* 位移 取值translate(x,y)  translateX(x) translateY(y)*/
2、Scale()缩放 transform: scale(0.5,2); scale(x,y) scaleX(x) scaleY(y) scale(n)
3、Rotate()旋转 transform: rotate(45deg);/* rotate转换元素角度 */倾斜
transform-origin: right bottom; 转换原点会影响元素旋转的效果 取值上下左右中 数字
4、skew倾斜 transform: skew(45deg);

3D转换

Perspective:px 透视距离  此属性要写在3D转换元素的父元素上、