css基础语法三

【】伪类选择器】
 1、写法： 伪类选择器，在选择器后面，用:分隔，紧接伪类状态；
 eg ： .a:link
 2、 超链接的伪类状态：
 :link - 未访问状态 :visited - 已访问状态
 :hover - 鼠标指上状态 :active - 激活选定状态(鼠标点下未松)
 注意：当超链接多种伪类状态同时存在时，必须按照link-visited-hover-active的顺序，否则会导致部分选择器不生效；
 3、 input的伪类状态：
 :hover :focus - 获得焦点状态 :active
 注意input的多种状态同时存在时，必须按照上面的顺序；
 4、 其他标签，基本只用:hover事件

【盒子模型】

margin 外边距：
 1、只写一个值： 表示四周的外边距均为指定的值；
 2、写两个值： 第一个数为上下外边距 第二个数为左右外边距；
 3、写三个值： 分别表示上、右、下三个方向，左边默认等于右边；
 4、写四个值： 表示上、右、下、左 四条边顺时针方向；
 5、 margin:0 auto; 设置块级元素，在父容器中水平居中！！！！
 padding 内边距：
 设置方式，与margin完全相同；
 注意：设置padding，将会导致div区域被撑大！！！使用时必须注意div实际的宽高为多少！！！！！
 边框
 1、设置边框需要三个属性： 宽度 样式 颜色
 原则上，三个属性缺一不可，顺序可以随便修改；
 2、可以使用top、right、bottom、left分别设置四个边

 当父盒子包裹子盒子，给子盒子添加margin-top时，子盒子与父盒子的上边线并不能分开，而是会导致，两个盒子同时下来。
 [解决办法]
 1、给父盒子添加一点padding-top； 不推荐使用，会导致父盒子结构多余1pxpadding；
 2、给父盒子添加1px的border-top； 同样会导致1px的多余空间，不推荐使用；
 3、给父盒子或者子盒子添加浮动； 可能会由于浮动，一定程度的影响页面的布局；
 4、给父盒子添加overflow属性； 推荐使用的方式。

 [border-radius 圆角]
 1、border-radius可以接收8个属性值,分别表示：
 X轴(左上、右上、右下、左下角)/Y轴(左上、右上、右下、左下角)
 eg: border-radius:10px 20px 30px 40px/10px 20px 30px 40px
 2、缩写形式：
 只写X轴，Y轴将默认等于X轴；
 四个角写不全，默认对角相等；
 只写一个值，默认8个数均等；
 eg: border-radius:50px 20px;
 = border-radius:50px 20px 50px 20px;
 = border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
 3、当圆角弧度>=正方形边长一半，将会显示为圆形。

 [border-image 图片边框]
 1、border-image:一共可以放10个属性值：
 ① 图片的路径： url();
 ② 图片的切片宽度： 4个值，分别代表上、右、下、左四条边；
 通过4条切线切割，可以将图片分为9宫格。 9宫格四个角分别对应边框的四个角(不会进行任何拉伸)，9宫格四个边分别对应四条边框(会根据设置进行拉伸/铺完/重复等操作)
 注意： 写的时候，必须不能带px单位！！！！
 ③ 边框的宽度： 4个值，分别代表上、右、下、左四条边框的宽度；
 注意： 写的时候，必须带px单位，与切片宽度用/分隔！！！
 ④ 边框的重复方式： stretch(拉伸)、round(铺满)、repeat(重复)
 [round和repeat的区别]
 round: 会对四条边进行适当的拉伸压缩，确保四条边可以重复整数次；
 repeat：会保持每条边的长度比例不变，可能导致四角处，无法显示一条完整的边；
 2、 属性值写法： border-image: ① ②/③px ④;
 3、 border-image在webkit内核的浏览器中，必须带-webkit-前缀。

 [box-shadow 盒子阴影]
 1、 6个属性值，空格分隔：
 ① x轴阴影距离(必选): 可正可负，正——右移，负——左移；
 ② y轴阴影距离(必选): 可正可负，正——下移，负——上移；
 ③ 阴影模糊半径(可选)： 只能为正，默认为0.数值越大，阴影越模糊；
 ④ 阴影扩展半径(可选)： 可正可负，默认为0.数值增大，阴影扩大；数值减小，阴影缩小；
 ⑤ 阴影颜色(可选)： 默认为黑色
 ⑥ 内外阴影(可选)： 默认为外阴影。 inset表示内阴影；

outline 外围线：
 显示在border外面，并且不会占据空间。 可能会覆盖四周的内容。

【浮动】

1、标准流中的块级盒子，宽度将会自动伸展为100%；
而浮动的块级盒子，宽度不会自动伸展，而是由内容撑开

2、 当一个盒子浮动， 标准流中未浮动的其他盒子，将视浮动盒子不存在而占据浮动盒子原来的位置。(浮动盒子，会盖在这个盒子的上方)
 但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响。(未浮动盒子中的内容，不会被浮动盒子盖住)

3、由于第二条的原因。
可以给受影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响。
clear可选值：left-清除左浮动影响， right-清除右浮动影响；
both-同时清除左右浮动影响 ，常选；

4、 父盒子没有指定高度。 如果子盒子没有浮动，则父盒子的高度可以被子盒子撑开。
 如果，父盒子中的所有子盒子都浮动，则父盒子高度将变为0；
 [解决所有子盒子浮动，父盒子高度塌陷的问题]
 ① 给父盒子也添加浮动；
 ② 给父盒子添加overflow属性； 推荐使用！！！
 ③ 在父盒子最后，添加一个高度为0的空div。 给这个div添加clear: both;属性，清除掉浮动效果。
 ④ 可以将第三条的div，用伪对象选择器：：after实现：
 #div4 ::after{
 display:black;
 content:""；
 height：0px；
 clear：both；
 }

[盒子模型分类]
 1、 标准盒子(W3C盒子)： 我们设置的宽度和高度，仅仅包含content部分； 再添加padding或border，会导致盒子变大；
 2、 IE盒子(怪异盒子)： 我们设置的宽度和高度，包含content+padding+border； 再添加padding或border，会压缩content区域，但盒子总大小不变；
 [手动设置盒子类型]
 box-sizing: border-box; 怪异盒子；
 box-sizing: content-box; 标准盒子； 默认效果。

【定位】

[相对定位 relative]
 1、 使用position:relative; 设置元素为相对定位元素；
 2、 使用top、right、bottom、left调整元素的位置。当left和right同时存在时，left生效； top和bottom同时存在时，top生效。
 3、 定位机制：
 ① 相对定位是相对于自己原来的位置定位。当top等属性不指定时，元素位置不会发生改变；
 ② 相对定位，不会释放掉元素在原有文档流中的位置。 不会影响其他文档流元素的位置；
 4、 关于元素Z轴重叠：
 ① 定位元素，默认的Z轴高于普通文档流元素。
 ② 同为定位元素，"后来者居上"。后面的盖住前面的。
 ③ 可以使用z-index手动调节定位元素的上下层z轴顺序；
 z-index默认为0，而且只能作用于定位元素。

[绝对定位]
 1、 使用position: absolute; 设置元素为绝对定位；
 2、 定位机制：
 ① 相对于第一个非static定位的祖先元素进行定位。
 (即，相对于第一个使用了relative、absolute、fixed定位的祖先元素进行定位)
 ② 如果所有的祖先元素都未定位，则相对于浏览器左上角进行定位；
 ③ 使用absolute的元素，会从文档流中完全删除。原有空间会被释放。
 [固定定位 fixed]
 1、使用position: fixed; 设置固定定位；
 固定定位，是一种特殊的绝对定位！！只是祖先元素无法使用定位锁住；
 2、 定制机制：
 永远相对于浏览器的左上角进行定位，而且不随滚动条的滚动而滚动；

[z-index 属性]
* 1、作用： 根据z-index属性设置的数值，决定元素在Z轴方向上的层叠次序；
* 2、使用要求：
* ① z-index 只能给定位元素调整层叠次序。
* relative、absolute、fixed
* ② 元素的z-index属性，要考虑父容器z-index的约束；
 >>> 如果父容器设置了z-index属性，则子容器的所有元素，将不能脱离父容器层次的约束。(即，父容器设置了z-index，则子容器只能以父容器的数值为准。再给子容器设置z-index，只能调整子容器在父容器层次之内的层叠次序)
 >>> 如果父容器没有设置z-index，或者设置为z-index:auto； 则子容器调整z-index将不受父容器层次约束。
 3、 z-index:auto; & z-index:0; 异同；
 ① z-index:auto;是默认值，与z-index:0;处于同一平面；
 ② z-index:0;会约束子元素必须与父容器在同一平面；
 z-index:auto;不会约束子元素的层次；

[clip 属性]
 1、作用： clip属性用于裁切图片标签，显示图片的指定区域；
 2、使用要求： clip属性，只能作用于有absolute或fixed定位的图片标签上；
 3、 clip属性，接受一个rect()函数，函数传入四个值，分别表示上、右、下、左四条切线的位置；
 注意： 与其他属性不同的是， rect中的四个值， 上、下两个值得距离都是从上边量取； 左、右两个值都是从左边量取；

【负边距的使用】

[1、实现块级元素在父容器中水平垂直居中]
 ① 设置子容器为定位元素；
 ② left: 50%; margin-left: -width/2;
 top: 50%; margin-top: -height/2;

[2、使用负边距增大元素的宽度]
 ① 子容器的宽度，不指定； 只指定高度、或者由内容撑开高度；
 ② margin:0px -50px; 可以使左右两边，均超出父容器50px;

【新增属性】

display 属性
 可以设置元素以何种状态显示，可选值：
 none: 隐藏元素；
 block：显示为块级元素；
 inline： 显示为行级元素；
 inline-block: 显示为内联块级元素。 本身将是一个行级元素，但是，拥有块级元素的所有属性。 比如宽度、高度、margin、padding等。。。
 [常见的inline-block级别的标签？]
 <img /> <input /> <textarea></textarea> <td></td>
 [隐藏一个元素的方式]
 1、宽度或高度设为0px； 配合overflow:hidden; 属性
 2、 display:none; 显示display:block;
 3、 opacity: 0; 设为全透明。 但是元素的空间会占据；
 4、 visibility: hidden; 隐藏元素，但是元素所在空间依然会占据。 与opacity: 0;效果很像；
 显示visibility隐藏的元素，visibility: visible;

【CSS3 新增的属性前缀】
 1、 -webkit- : Chrome/Safari浏览器；
 2、 -moz- : 火狐浏览器；
 3、 -ms- : IE浏览器；
 4、 -o- : Opera 欧朋浏览器
 【CSS 长度单位】
 1、 px： 表示像素。长度是固定的，表示占分辨率的几个像素点；
 2、 % ： 表示相对于默认值的百分比；
 3、 em： 长度与元素的字号挂钩。表示几倍的字号。
 4、 rem: 与根元素的字号挂钩。即，与<html>标签的font-size挂钩，如果不设置则默认字号为16px;
 [em与rem区别]
 em是与当前元素自身的font-size挂钩，如果当前元素没有设置，则向上查找最近的祖先元素字号，直到跟字号；

rem与当前元素字号无关，直接与根元素字号挂钩。

【CSS3 背景属性】
 1、background-clip : 设置背景图或背景色的裁切显示区域。
 >>> border-box从边框外缘开始显示；
 >>> padding-box从边框内缘开始显示；
 >>> content-box从文字内容区域开始显示;
 >>> 如果不在显示区域的背景图或者背景色，会被裁切掉不显示；
 2、 background-origin： 设置背景图从哪开始定位。
 >>> border-box: 背景图左上角从边框外缘开始；
 >>> padding-box: 背景图左上角从边框内缘开始；
 >>> contentbox: 背景图左上角从文字内容区开始；
 3、 background-origin不会改变背景图显示区域的大小，只是决定背景图的左上角从哪里开始定位；
 background-clip 只负责裁切出显示区域，但是并不关心背景图定位在哪；
 4、 background-attachment： 背景图的附着方式；
 >>> scroll: 背景图跟随区域滚动。默认效果；
 >>> fixed: 背景图充满整个区域，并且背景图是固定的，不随滚动条滚动；
 5、background 缩写形式：
 background:background-color background-image background-repeat background-atachment background-position;

transition: 过渡属性，接受四个属性值
 ① 设置那个CSS属性，参与过渡； 可以直接指定all/none
 ② 过渡多少时间完成。 通常 .3s .5s
 ③ 过渡的样式效果。 通常选ease；
 ④ 过渡延时几秒后再开始。 可以省略不写；
 transition属性可以同时定义多个过渡效果，用逗号隔开。
 eg:transition: width .5s ease,height 1.5s ease;

[transform 定义变换属性]
 1、常用的变换函数：
 >>> translate(10px,10px) 平移,第二个不写默认为0
 >>> scale(1.1) 缩放，第二个不写，默认等于第一个
 >>> rotate(90deg) 旋转，默认绕Z轴转可以使用rotateX()等
 >>> skew(20deg,30deg) 扭曲，水平、垂直方向扭曲多少度；
 2、transform可以同时实现多种变换，用空格分隔
 eg: transform: skew(20deg) scale(1.3) translate(100px);
 3、transform-origin： 定义变换起点，常用于旋转变换。
 可选值： left/center/right bottom/center/top
 也可以直接指定X、Y轴坐标点，第一个数为X轴；
 例如：transform: rotate(90deg);
 transform-origin:right bottom;
 表示：绕右下角旋转90度。