CSS所有属性集合

css写法
css语法规则：css写在标签里，标签里
外联式：      css写在一个单独的 .css文件中（可以用 link 引入html中）
行内样式：  可以在标签里加入 style="css"

---

基础选择器
1，标签选择器，也可以叫做元素选择器（以标签名命名的选择器，选中所有同名标签）
2，类选择器 （在标签里加入 class="自定义类名"）    .自定义类名:{}
3，id选择器（一个标签上只能有一个id属性值，id="自定义名"）     #自定义名:{}
4，通配符选择器（给页面中所有元素都添加css样式） *{}

---

文字样式
font-weight:400px;                         （正常粗细）
font-weight:normal;                        （正常粗细）
font-weight:bold;                            （加粗）
font-weight:700px;                         （数字加粗）
font-style:italic                                （倾斜状态）
font-family:                                     （字体样式）
font-size:1px;                                 （字体大小）

---

css的单位
px 是固定单位，像素
em 是相对单位,相当于当前文字的大小,如果没有就找父元素
rem 也是相对单位,相对于html的fontsize的大小

---

文本对齐方式
text-indent                       （文本缩进）
text-align:left;                   （左对齐）
text-align:center;              （居中对齐）
text-align:right;                 （右对齐）

---

文本修饰线
text-decoration:underline;         （下划线）
text-decoration:line-through;     （删除线）
text-decoration:overline;           （上划线）
text-decoration:none;                （无装饰线）
line-height:10px;                        （行高，单位px）
line-height:10px;                       （垂直居中，设置自身高度=行高，文字只有一行生效）

---

css选择器
后代选择器：空格隔开
子代选择器：>
并集选择器：使用逗号隔开，作用是选择多组标签，设置相同的样式
交集选择器：选择器1紧挨着选择器2
伪类选择器：  :hover 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停

css选择器优先级，不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的样式
!important > 行内样式 > id选择器 > 类/属性/伪类选择器 > 伪元素/标签选择器 > 通配符* > 继承

---

背景-背景图位置
background-image         （背景图）
background-repeat         （水平垂直平铺）
no-repeat                       （不平铺）
repeat-x                         （沿着水平方向平铺）
repeat-y                         （沿着垂直方向平铺）
属性名：        background-position（bgp）
属性值：        background-position：水平方向位置+空格+垂直方向位置；
取值为正数：向右或者向下移动，负数则向左向上移动

---

元素显示模式
块级元素
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的100%宽度，高度和宽度都可以设置
代表标签：div \ p \ h1-h6 \ ul \ li  \ dl \ dt \ dd等
行内元素
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：
a、span 、b 、u、i、s、strong、ins、em、del....
行内块元素
1.一行可以显示多个
2.可以设置宽高
代表标签：
input、textarea、button、select........
特殊情况：img标签有行内块元素特点，但是chrome调试工具中显示结果是inline。
 

---

显示模式-转换
目的：改变元素默认的显示特点，让元素符合布局要求！
语法：
display：block  转换成块级元素（较多）
display：inline-block 转换成行内块元素（较多）
display：inline 转换成行内元素（较少）

标签嵌套的原则与生活类似，以大标签来套小标签

---

css特性
1.继承性
特性：子元素有默认继承父元素样式的特点
可以继承的常见属性:
文字控制属性都可以继承
height:100%;  
width:100%;

2.层叠性
特性：
1.给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
注意点：
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果,

---

盒子模型

css中盒子由：content（内容区） padding（内边距） border（边框区） margin（外边距区）
border线类型：solid（实心线）dashed（虚线） dotted（点线）
border-left,border-right,border-top,border-bottom,（给盒子的边单独设置）

盒子模型-内减方法，内边距和外边距一样
解决方法1：手动减去撑大内容像素
解决方法2：给盒子设置属性box-sizing：border-box；即可
浏览器会自动计算多余大小，自动在内容中减去
清除默认样式
*{
    margin：0；
    padding：0；
}

版心居中
 margin：0 auto；（自动水平居中）
写css的技巧
1.找它 ：选择器
2.摆它 ：盒子模型，宽度，高度，背景色；
3.改它：调位置，文字样式。

ul属性去掉列表的原点代码是：list-style：none；
外边距合并
垂直布局的块级元素，上下的margin（外边距）会合并。
最终两者距离为margin的最大值边距。
解决方法：（只给其中一个盒子设置margin即可）

外边距-塌陷现象
互相嵌套的块级元素，子元素的margin-top会作用在父元素上
解决方法：
1.给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
2.给父元素设置overflow：hidden ※
3.转换成行内块元素（display：inline-block；）
4.设置浮动

---

伪类选择器
E:first-child { } (匹配父元素中第一个子元素，并且是E元素)
E:last-child { } (匹配父元素中最后一个元素，并且是E元素)
E:nth-child（n） { } (匹配父元素中第n个子元素，并且是E元素)
E:nth-last-child（n） { } (匹配父元素中倒数第n个子元素元素，并且是E元素)
：nth-child（N）公式写法中，N的值从0开始
奇数、偶数、5的倍数对应的公式（n为）
1，奇数：2n+1或者2n-1
2，偶数：2n \ even
3，5的倍数：5n

---

伪元素
::before      在父元素内容的最前面加一个伪元素
::after         在父元素内容的最后添加一个伪元素

---

浮动
float：left；（最左边浮动）float：right；（最右边浮动）
浮动-特点（浮动的标签是顶对齐）浮动后的标签具备行内块儿特点
1.浮动元素会脱离标准流，在标准流中不占位置
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素有特殊的显示效果，一行可以显示多个，可以设置宽高
注意：浮动的元素不能通过text-align：center；或者margin：0 auto； 居中
overflow:hidden; 属性添加给浮动的父元素
 

---

定位
定位的使用步骤，先设置定位方式
属性名：position 
static（静态定位 ） （不定位）

relative（相对定位）
1.占有原来的位置 
2.仍然具备标签原有的显示模式特点 
3.改变位置参照自己原来的位置
4.如果left和right都有，以left为准；top和bottom都有，以top为准

absolute（绝对定位）
1.先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位。
2.如果有父级，但是父级没有定位，以浏览器窗口为参照进行定位
3.脱标  不占位
4.改变标签的显示模式特点：具备了行内块儿特点（在一行共存，宽高生效）

fixed（固定定位）
1.脱标，不占位置
2.改变位置参考浏览器窗口
3.具备行内块特点

定位-子绝父相
1.父级相对定位；子级绝对定位-- 子绝父相
2.绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器为参考
定位-居中
1.绝对定位的盒子不能使用左右margin：0 auto居中
2.如果是水平居中 left：50%，整个盒子移动到浏览器中间偏右的位置，取值为margin为宽度的负一半宽度就可以中心水平居中，垂直也是同理
位移居中
第一个百分之50是水平，第二个是垂直
transform：translate（-50%，-50%）
位移：自己宽度高度的一半，如果写了定位，会转换为行内块元素，具有宽高生效，一行显示，如果不加宽度，宽度就是内容的大小，所以宽度一定要加，与父级的宽度一样，width：父级的宽度，或者width：100%
定位-显示层级
1.在默认情况下，定位的盒子，后来者居上
2.z-index:整数；取值越大，显示顺序越考上，z-index的默认值是0
3.2. 注意：z-index必须配合定位来使用

---

光标类型，属性名：cursor
设置鼠标光标在元素上显示的样式
default        （默认值，通常是箭头）
pointer        （小手效果，提示用户可以点击）
text             （工字型，提示用户可以选择文字）
move          （十字光标，提示用户可以移动）

---

装饰-圆角
border-radius:10px/10%
四个值：左上  右上  右下  左下 --从左上顺时针转一圈
取盒子尺寸的一半为圆形
圆角形式：border-radius: 50%;
设置一个长方形 ，border-radius：盒子取高度的一半为胶囊样式

---

溢出显示效果-overflow（超出父级的内容）
属性名：overflow
visible（默认值，溢出部分可见）
hidden（溢出部分隐藏）
scroll（无论是否溢出，都显示滚动条）
auto（根据是否溢出，自动显示或隐藏滚动条）

显示隐藏-基本使用（标签的隐藏）
占为隐藏：visibility：hidden；
不占位隐藏：display：none

盒子阴影
属性名：box-shadow
过渡
让元素的样式慢慢的变化，配合hover使用，增强网页交互体验
属性名：transition
谁变化谁加过渡属性
如果变化属性多，直接写all，表示所有

标签：
1. title：网页标题标签
2. description：网页描述标签
3. keywords：网页关键词标签

溢出显示效果，属性名：overflow（超出父级的内容）
visible      （默认值，溢出部分可见）
hidden     （溢出部分隐藏）
scroll       （无论是否溢出，都显示滚动条）
auto         （根据是否溢出，自动显示或隐藏滚动条）

显示隐藏-基本使用（标签的隐藏）
占为隐藏：visibility：hidden；
不占位隐藏：display：none
盒子阴影，属性名：box-shadow

---

背景颜色设置
渐变背景
background-image：linear-gradient（颜色） 
透明度
background:transparent      （背景完全透明，不能设置透明度）
background:rgba(0,0,0,0)    （让背景出现透明效果，但上面的文字不透明，可以调整透明度）
opacity: 0;  指定不透明度，从0.0（完全透明）到1.0（完全不透明）
该属性具有继承性，会使容器中的所有元素都具有透明度

---

平面转换（transform）
位移（translate)  ，translateX()  translateY()，向下是正数，默认值是 0px 
旋转（rotate)   ，旋转一半（180deg）
缩放（scale)   也是x和y
过渡，属性名：transition   transition:1s  （动作的执行时间）
:hover（鼠标悬停触发）
让元素的样式慢慢的变化，配合hover使用，增强网页交互体验谁变化谁加过渡属性，
如果变化属性多，直接写all，表示所有

多重转换：旋转放到最后，旋转会改变坐标轴的轴向

透视效果：perspective: 1000px;  （取值范围800px-1200px）这个加到父元素上
transform: translateZ(400px);
 

---

flex弹性盒子布局

解决元素居中问题，自动弹性伸缩，合适适配不同大小的屏幕，和移动端。
1. flex-direction      （主轴方向）
row（默认值）：     主轴为水平方向，起点在左端。
row-reverse：          主轴为水平方向，起点在右端。
column：                 主轴为垂直方向，起点在上沿。
column-reverse：    主轴为垂直方向，起点在下沿。
2. flex-wrap             （主轴一行满了换行）
nowrap                    (默认值) 不换行压缩宽度
wrap                        换行
wrap-reverses         反向换行
3. flex-flow                （1和2的组合）
4. justify-content      （主轴元素对齐方式）
flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end                   靠着main-end对齐//参考常见术语(一般是右方向)
center                     靠着主轴居中对齐//一般就是居中对齐
space-between       两端对齐，靠着容器壁，剩余空间平分
space-around          分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly          平均对齐，不靠着容器壁，剩余空间平分
5. align-items           （交叉轴元素对齐方式//单行）
flex-start：        交叉轴的起点对齐。
flex-end：        交叉轴的终点对齐。
center：           交叉轴的中点对齐。
baseline:         项目的第一行文字的基线对齐。
stretch：        （默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content        （交叉轴行对齐方式//多行）
flex-start                 (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end                （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center                     (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between      (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around        (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch                  (每一行)伸缩，占满整个高度