CSS基础知识点

<一>样式

<div style="width:'10px' height:'10px' background:'pink'"></div> //行内样式
<style> a{
     text-decoration:none; color:red;} </style>  //内部样式

text-aligin:center  //让容器内部元素水平居中
margin:auto  //让容器本身水平居中
padding:0px 20px 20px 10px  //内边距
background-color:#ccc  //设定背景颜色
font-size:24px   //设定字体大小
color:#000       //设定文字颜色
font-family:" 华文中宋"      //字体类型
font-width:bold  //文字加粗
font-style:italic   //文字倾斜
text-indent:60px    //首行缩进
text-decoration:underline/none   //文本修饰
line-height:100px   //行高
-webkit-appearance:none     //取消复选框外观
box-shadow:3px 1px 5px 2px black inset  //阴影 3px水平偏移、1px垂直偏移、5px模糊值、2px扩大范围、black阴影颜色、inset默认向外 添加此属性方向向内
background:linear-gradient(to bottom, #d3d3d3,#9e9e9e)  //渐变背景to bottom/to top/to right/to left、#d3d3d3(开始颜色)、#9e9e9e(结束颜色)
background-image:url(imgs/dong.gif);     //添加背景图
background-repeat:no-repeat        //不平铺；
background-positon:center center   //让图片垂直水平居中；
display:block/inline/inline-block  //block：表示块元素、inline：表示内联(行内)元素、inline-block：表示内联块元素
position:relative/absolute  //relative：相对定位(放在父元素上)、absolute：绝对定位(放在子元素上)
position:fixed   //fixed：固定定位；
.sxm:hover{
      }    //hover: 鼠标划入的效果；
resize:both/none/vertical/horizontal   一般用于调整文本框大小，both：(默认)随意调整大小、none：不可调整、vertical：仅垂直可调整、horizontal：仅水平可调整；
cursor:auto/crosshair/pointer/move  auto：(默认)根据浏览器决定、crosshair：十字线、pointer：一只小手、move：十字箭头；
outline:#f40 solid 10px  input框光标显示
outline-offset：-27px  表示outlie的偏移量；
vertical-aligin:middle  调整对齐方式  这个属性必须作用于inline-block元素；

<二>CSS选择器
权重：
行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）；

id=" "  #box   //id选择器（id表示身份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素）
div   //标签选择器（根据标签名，选择对应的所有标签）
.nav  //类别选择器（选择拥有该类别的多个元素）
*     //通用选择器（针对页面上所有的标签都生效）
xxx:nth-of-type(index)  //伪类选择器(index表示同类型兄弟元素中的排名)
xxx[attr=val] 或 xxx[href $=val] 或 xxx[class ^='top']  //属性选择器(attr表示属性名称、val表示属性值、$表示属性的结尾、^表示属性的开头)
xxx:first-child   //选择第一个xxx元素
xxx:nth-of-type(even)   //选择序号(同类型)为偶数的xxx元素
xxx:nth-of-type(odd)    //选择序号(同类型)为奇数的xxx元素
xxx:nth-child(n)  //选择序号(自然排序)为n的xxx元素
input[type='checkbox']:checked{
      }  //只能选择所有被勾选的checkout
xxx::after{
     content:" "...}  //伪元素

<三>浮动
浮动元素会脱离网页文档，与其他元素发生重叠，但是，不会与文字内容发生重叠；
【注】
1.浮动元素在排列时，只参考前一个元素位置即可；
2.浮动元素不会覆盖文字内容；
3.浮动元素不会覆盖图片内容（因为图片本身也属于文本，可以图片看作是一个特殊的文字）；
4.浮动元素不会覆盖表单元素（输入框、单选按钮、复选框、按钮。下拉选择框等）；

float:left/right  //左/右浮动；
overflow:auto     //清除浮动的影响；
clear:left/right/both  //清除左/右/左右浮动的影响；

<四>flex弹性布局
【注】
1.在flex布局中，float失效，vertical-align失效；

display:flex   //flex：弹性容器；
flex-direction:row/column  //row：主轴水平、column：主轴垂直；
justify-content:flex-start/flex-end/center/space-between/space-around   //flex-start：开始对齐、flex-end：尾部对齐、center：中心对齐、space-between：两端对齐、space-around：自动分配间隔；
flex-wrap:nowrap/wrap/wrap-reverse  //内部元素换行方式；
align-items:stretch/center/flex-start/flex-end/baseline  //交叉轴对齐方式；
flex-grow:数字；
flex-shrink:数字；

<五>BFC
如何出发一个元素的BFC规则？
BFC规则具体表现：
1.父子元素的上下边距不再合并；
2.父元素的高度会将浮动元素计算在内；

1.float:left/right;  //元素浮动
2.position:absolute/fixed;  //元素绝对定位
3.display:inline-block/tabl-cell...；//元素类型为inline-block等
4.overflow:auto/hidden...；//overflow不等于默认值(visible)

<六>兼容
-webkit-appearance:none webkit是谷歌浏览器的内核名称；

<七>过渡、动画、缩放、旋转、3D、帧动画

transition:width 1s ease-in 2s  //过渡  width要过渡的属性、1s过渡时间、ease-in过渡方式、2s延迟时间；
transform:translateX(10px)/translateY(10px)/translateZ(10px)  //位移效果  跟position:relative一样，元素相对于自己改变位置，不脱离文档流translate位移时，默认原点是元素的中心位置；
transform-origin:20%/50%  //如何改变变形原点的位置；
transform:scale(1)/scaleX(3)/scaleY(2)  //如何对元素进行缩放;
transform:rotateX(10deg)/rotateY(20deg)/rotateZ(30deg)  //如何对元素进行旋转；
transform:perspective(500px)  //透视(观察)距离，必须写前面哦，要不然谷歌不支持；
帧动画：
@keyfrom beat{
     
30%:{
     transform:scale(1.3); }
100%:{
     traansform:scale(1); }
}
span.heart{
      animation:beat 1.5s  }  //beat表示动画名称、1.5s表示动画时长；

<八>响应式布局(媒体查询)、rem布局

 @media screen and (max-width:640px){
      ... }   媒体查询； 
html{
      font-size:20px; } 1rem = 20px  rem布局；
适配问题：
1.利用百分比解决手机端网页适配  =>  .item{
      width:25%; }
2.利用媒体查询解决手机端网页适配  => .item{
      width:25%;  }
3.利用rem单位解决手机端网页适配 => .html{
     font-size:100px;} .item{
     width:0.6rem}