CSS基础知识
1.CSS常用选择器
【选择器命名规范】
1、只能有字母、数字、下划线组成；
2、开头不能是数字。
【选择器优先级】
1、就近原则：近者优先。
2、当作用于同一层时：可有权重计算
权重划分： 标签选择器 1
class选择器 10
id选择器 100
行级样式表style="" 1000
* #ul .li .li2 li{} 优先级权重121
* li .li1 .li2 .lis2 {} 优先级权重31
* #ul #li li{} 优先级201
【通用选择器】
1、写法： *{}
2、作用： 选中页面中的所有HTML标签
3、优先级：最低
【标签选择器】
1、写法： HTML标签名{ }
2、作用： 选中所有对应的HTML标签，并修改其样式
【类选择器 class选择器】
1、写法： .选择器名{}
2、调用： 在需要修改样式的HTML标签上，使用class="选择器名"
3、优先级： 当作用于同一层时，class选择器>标签选择器
【ID选择器】
1、写法： #选择器名{}
2、调用： 在需要修改样式的HTML标签上，使用id="选择器名"
3、优先级：同一层时，id选择器>class选择器
4、ID选择器是唯一的！同一页面严禁出现同名ID！！！
【后代选择器】
1、写法： 选择器1 选择器2 …… 选择器N {}
2、生效规则： 选择器2必须是选择器1的【后代】……以此类推
【子代选择器】
1、写法： 选择器1>选择器2>……>选择器N{}
2、生效规则： 选择器2必须是选择器1的【直接子代】……
【交集选择器】
1、写法： 选择器1选择器2……选择N{}
2、生效规则： 必须同时满足所有选择器，才会生效
【并集选择器】
1、写法： 选择器1,选择器2,……,选择N{}
2、生效规则： 满足任意一个选择器，均可生效
【伪类选择器】
写法：选择器名：伪类状态{}
常见的伪类状态：
：link 未访问 ：visited 已访问 ：hover 鼠标指上状态 ： active激活选定状态
注：当超链接同时具有以上四种状态，则选择器必须按照上述顺序排列。 （visited与link顺序可以互换顺序）
：focus获得焦点
【三种使用CSS的方式】
1、行内样式表：直接在HTML开始标签使用style=""的方式引用；
特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。
2、内部样式表： 在<head></head>中，使用<style type="text/css"></style>方式引用；
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式。
3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特点：实现了CSS与HTML的彻底分离，有利于样式复用及后期维护。
-->
<link rel="stylesheet" type="text/css" href="css/01css.css" />
2.CSS常用文本属性
【颜色常用单位】
* 十六进制：#ffffff
* 颜色名称：red
* RGB颜色:RGB(255,255,255)
* RGBA:第四位数，表示透明度。可选值0~1
【CSS常用文本属性】
* 1、字体、字号：
font-weight:字体的粗细，可选属性值：bold加粗 lighter细体 100~900数值(400正常，700 bold)
font-size:字体大小 **PX **%（浏览器默认字体大小的百分比，绝大部分默认16px）
font-family:字体族，设置字体。
>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）
>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;
font-style:字体样式,正常(normal) 斜体(italic)
* font-variant：small-caps; 将字母转为小型大写字体。
(了解)font缩写形式：font-style font-variant font-weight font-size/line-height font-family
>>> 使用注意事项 ：
① 顺序必须严格按照上述顺序；
② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对用/分割
③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜体 加粗 字号/行高 字体族(微软雅黑，非衬线字体族)
2、字体颜色：
color:字体颜色
opacity:透明度,0~1之间的数字。 调整时控件以及子控件均会透明，而使用rgba调整时， 只会使本控件透明，子控件不会发生透明度变化。
3、行距、对齐等：
line-height:行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同2
>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height
text-align:块级元素中行级元素的水平对齐方式 ：left center right
letter-spacing:字符间距,字与字之间的间距
text-decoration:文本修饰 下划线underline、删除线line-through、上划线overline、none
overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，scroll始终显示滚动条， hidden 超出范围文本隐藏) 可以通过overflow-x overflow-y分别设置水平垂直方向
text-overflow:设置多余文字的显示方式 clip裁剪掉 ellipsis省略号
>>>【重点】让每行多余文字显示省略号：
① white-space: nowrap;设置行末不断行
② overflow: hidden; 设置控件超出范围隐藏
③ text-overflow: ellipsis; 设置多余文本省略号显示
white-space: nowrap; 设置行末不断行显示
word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，会不断行显示， break-all 允许在单词内换行。
text-shadow:文本阴影，有四个属性值：
①水平阴影距离 必选，数值越大，阴影右移
②垂直阴影距离 必选，数值越大，阴影下移
③阴影模糊距离 可选，数值越大，阴影越模糊。默认为0，不模糊
④阴影颜色 可选，默认为黑色
text-indent:首行缩进，可用像素值调整缩进大小
* text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色
3.CSS常用背景属性
【CSS常用背景属性】
line-height: 1.75;">
background-image:背景图,background-image: url(图片地址相对路径);背景图和背景色同时存在时，背景图会覆盖背景色
background-repeat：背景图重复方式 ，no-repeat不平铺 repeat平铺(默认) repeat-x水平平铺 repeat-y垂直平铺
background-size:背景图大小。
【指定宽度高度】
>>> 宽高的写法，第一个属性值为宽度，第二个属性值为高度，可以：①直接写像素 ②写百分比（父容器宽高的百分比）
>>> 当只有一个属性值时，默认为宽度。高度等比缩放。
当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。
【其他属性值】
>>> contain:图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致部分空余区域无法覆盖）
>>> cover:图片等比缩放，使背景图像完全覆盖背景区域。(可能导致背景图部分区域无法显示)
background-position：位置坐标、偏移量
>>> 指定位置：left/center/right top/center/bottom
当只写一个属性值时，另一个默认居中
>>> 填写坐标：水平位置 垂直位置 (像素或百分比形式)
① 当只写一个属性值时，默认写的为水平方向，则垂直居中
② 当使用像素时：图片的左上角往各个方向移动的实际距离
水平方向：正数右移 负数左移 垂直方法：正数下移 负数上移
(左负有正 上负下正)
③ 当使用百分数时，一般只能是正数。代表去掉图片后，剩余空白距离的分布比例。例如 background-position：30%; 水平方向去掉图片后，剩余区域3:7分
4.CSS盒子模型
【margin 外边距】
margin属性值最多有四个
①只写一个值：四个方向的margin均为这个值
②写两个值：上，右两个方向，下默认=上，左默认=右
③写三个值：上，右，下三个方向，左默认=右
④写四个值：上，右，下，左四个方向
⑤写三个值+auto：控件居右显示
margin：50px 30px 20px auto；距离浏览器右侧20px
⑥margin：0 auto 设置控件在父容器中水平居中
*/
margin: 50px 30px 50px 30px;
【border 边框】
border 有三个属性值：宽度width 样式style 颜色color
原则上，三个属性都需要手动指定（颜色不指定时默认为黑色）
border: 10px solid green;
【pading 内边距】
使用方式，同margin①~④
注意：使用pading会将整个控件撑大，使用时需注意控件可视区域的实际大小
padding: 10px 10px ;
【border-radius 圆角】
1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
* 例如：border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
3、只写一个数，默认8个值均相等。
【box-shadow 盒子阴影】
* 1、六个属性值，空格分割：
* x轴阴影距离：(必选) 可正可负，正——右移 负——左移
* y轴阴影距离：(必选) 可正可负，正——下移 负——上移
* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小
* 阴影颜色：(可选) 默认为黑色
* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
*/
box-shadow: 0px 0px 10px 0px blue inset;
【border-image 图片边框】
1、十个属性：
① 图片路径：url()
② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会 把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
*写的时候，不能带px单位
③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
* 写的时候，必须带px单位
④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
【铺满和平铺区别】
平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
【border-image 图片边框】
* 1、十个属性：
* ① 图片路径：url()
* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
* 写的时候，不能带px单位
* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
* 写的时候，必须带px单位
* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
*
* 2、属性值写法：border-image: ① ②/③px ④;
* 第②部分可以只写1个、2个、3个，判断方式同margin
*/
border-image: url(../img/QQ图片20170314110053.png) 27 27 27 27/10px 10px 10px 10px round
}
</style>
</head>
<body>
<div>
这是div中的文字
</div>
</body>
</html>
5.CSS定位方法
【相对定位 relative】
1、使用position: relative; 设置元素为相对定位的元素；
2、定位机制：
① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。
3、使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
position: relative;
left: 50px;
top: 50px;
【绝对定位 absolute】
1、使用position: absolute;设置元素为绝对定位元素。
2、定位机制：
① 相对于第一个非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)进行定位。
② 如果所有祖先元素均未定位，则相对于浏览器左上角定位；
③ 使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有；
【固定定位 fixed】
1、position: fixed; 是一种特殊的绝对定位，父容器无法使用relative锁住
2、定位机制：永远相对于浏览器进行定位。
【z-index 属性】
1、作用：设置定位元素的Z轴层叠顺序
2、使用要求：① 必须是定位元素才能使用。relative/absolute/fixed
② 使用z-index需要考虑父容器的约束。
*如果父容器为z-index:auto，则子容器的z-index可以不受父容器的约束；
*如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素，仍可以通过自己的z-index调整层叠关系)。
3、z-index:auto & z-index:0 的异同：
① z-index:auto为默认值，与z-index:0处于同一平面。
② z-index:auto,不会约束子元素的z-index层次，而z-index:0，会约束子元素必须与父元素处于同一平面。
4、z-index相同(处于同一平面的定位元素)的层叠关系：后来者居上
【实现块级元素在块级元素中水平垂直居中】
① 设置子容器为定位元素；
② left:50%; margin-left:-width/2;
top:50%; margin-top:-height/2;
6.CSS3新增属性
【transform定义变换】
常用变换：tanslate 平移
scale 缩放
rotate 定义旋转
transform可同时进行多种变换，多种变换之间空格分隔
例如：transform：scale（1.8,3.0） translateY（0px） rotate（）
transform-origine:定义变形起点
可选值：left/center/right top/center/bottom
或者，直接写X Y轴坐标点
例如：tansform：rotate(180deg)
transform-origine:right bottom
表示绕右下角旋转
【transition属性：定义过渡】
① 参与过渡的属性，可单独指定某个CSS属性，也可以all/none
② 过渡开始到完成的时间：.3s .5s
③ 过渡的样式函数 常选 ease 其余参考帮助文档
④ 过渡开始前的延迟时间，可省略
transation属性可以同时定义多个过渡效果，用逗号分隔
例如：translation:color .3s ease,border .5s linear;
【display属性】：设置元素的级别
none：隐藏元素，元素所占空间释放
block：设为块级元素
inline：设为内联元素（行级元素）
inline-block：设为内联块级元素（本身为行级元素，但是具有块级元素所特有的各种属性，比如宽，高，text-align等）
