第二部分----CSS的基础语法

时间:2023-01-18 04:25:24

PART-1 CSS的基础常识


一、什么是CSS?

W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading Style Sheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言。


 二、CSS应用的三种方式:

1. 行内样式表

第二部分----CSS的基础语法

行内样式表将CSS样式与HTML代码完全杂糅在一起,不符合W3C关于内容与表现分离的的基本规则,且不利于网站的维护。但是行内样式表在样式测试方面提供了便利,且优先级最高。不推荐使用。

2. 内部样式表

第二部分----CSS的基础语法

内部样式表在一定程度上将CSS样式与HTML代码分离,但是分离不够彻底,无法实现样式复用。(样式复用:多个网页共享同一样式。)内部样式表的优先级要低于行内样式表。

3. 外部样式表

第二部分----CSS的基础语法

外部样式表实现了CSS样式与HTML代码的彻底分离,方便样式复用和网站的维护,符合W3C规范。外部样式表的优先级低于内部样式表。在后续开发中,首推外部样式表。

[导入CSS文件的两种方式]
             *    ① 在<head>标签中,使用link链接:
             *      <link rel="stylesheet" type="text/css"
             *            href="css/02-CSS.css" />
             *    ② 在<style>标签中,使用@import导入:
             *      @import url("css/02-CSS.css");
             *
             *       [两种导入方式的区别]
             *    ① link属于标准的HTML标签,而@import不是标准标签;
             *    ② link可以兼容所有低版本浏览器,而@import只在CSS2之后能用;
             *    ③ link是将两个文件链接起来,起桥梁作用; 而@import相当于将CSS文件复制到HTML文件中;
             *    ④ link会在HTML文件边加载的过程中,边链接CSS文件;
             *      @import会在HTML文件全部加载完以后,再导入CSS文件;
             *
             *    综上所述,我们使用link链接的方式,加载CSS文件。

4. 注意

①除行内样式表,内部样式表与外部样式表的链接均写于HTML的HEAD部分中。

②导入外部样式表时,除type属性可选写外,rel与href属性必须出现。


  PART-2 CSS的常用选择器


1. 选择器的命名规则

①只能由字母、数字、下划线组成,不能有任何特殊字符;

②开头不能是数字,只能由下划线或者字母开头。

2. 常用选择器

2.1 标签选择器

写法:HTML标签名{}

作用:选中页面中所有的对应标签。

第二部分----CSS的基础语法

2.3 Class选择器

写法:.选择器名称{}

作用:需要改变样式的标签上使用class="选择器名称"来调用对应选择器。

第二部分----CSS的基础语法

2.4 Id选择器

写法:#选择器名称{}

作用:需要改变样式的标签上使用id="选择器名称"来调用对应选择器。

第二部分----CSS的基础语法

2.5 通用选择器

写法:*{}

作用:选中页面中所有标签。

第二部分----CSS的基础语法

2.6 后代选择器

写法:选择器1 选择器2 选择器3...{}

作用:比如说 div .li{}就表示满足div里面的class="li"的元素样式,其中选择器之间允许隔代。

生效规则: 只要满足,后一选择器是前一个选择器的后代,即可成效。(后代包括子代、孙代、重孙代。。。)
             *
             * 通俗的讲:只要后一个选择器,在前一个选择器里面即可。

第二部分----CSS的基础语法

2.7 子代选择器

写法:选择器1>选择器2>选择器3...{}

作用:用法大致与后代选择器相同,但要注意的是,选择器之间不允许隔代。

第二部分----CSS的基础语法

2.8 并集选择器

写法:选择器1,选择器2,选择器3...{}

作用:比如说 .li,#li{} 表示具备class="li"或者id="li"的形式便可生效,相当于数学逻辑中的“或”。

生效规则: 多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。

第二部分----CSS的基础语法

2.9 交集选择器

写法:选择器1选择器2选择器3...{}

作用:比如 .li,#li{} 表示必须同时具备class="li"和id="li"的形式可生效,相当于数学逻辑中的“且”。

生效规则: 多个选择器取交集,则必须满足所有选择器的要求,才能生效

第二部分----CSS的基础语法

2.10 伪类选择器

写法:选择器名称:伪类状态{}

常见的伪类状态:①link 未访问状态;②visited 已访问状态;③hover 鼠标指上状态;

④active 激活选定状态;⑤focus 获得焦点时状态(input常用)。

超链接多种伪类共存时的顺序: link/visited→visited/link→hover→active

第二部分----CSS的基础语法

第二部分----CSS的基础语法

3. 选择器的优先级

3.1 第一原则:近者优先!最内层选择器>>>>>>>外层!!!

例如:div ul li > div #ul

li在ul内层,所以li标签选择器能覆盖外层id选择器

3.2 当作用在同一层时:ID选择器>class选择器>标签选择器!!!

例如:div #li > div .li > div li

只要最后一个选择器都作用于li上,那无论之前有多少层

选择器嵌套,均没有远近关系。

3.3 当作用于同一层,且最后一层为同等选择器。

例如: div ul .li > div li

作用范围越精准,则优先级更高。

3.4 当优先级完全相同时,写在后面的选择器会覆盖前面的选择器 。


  PART-3 CSS的属性单位


1. 长度单位:像素px,在某些情况下可以使用百分比。

2. 颜色:

2.1 十六进制写法:#XXXXXX (X:1-F)。

2.2 颜色的英文名称。

2.3 RGB写法:(0-255,0-255,0-255)  三者由前到后分别对应红、绿、蓝三种颜色的比例。

2.4 RGBA写法:(0-255,0-255,0-255、0-1) 前三者同RGB写法,最后为透明度,此透明度 只会使当前控件变透明,并不会影响其子控件。


  PART-4 CSS的常用文本属性


1、 字体、字号类:                                                                                    
         *   ① font-weight: 字体粗细。 bold-加粗、normal-正常、lighter-细体
         *     也可以使用100-900数值,400表示normal,700表示bold
         *
         *   ② font-style: 字体样式。 italic-倾斜、normal-正常
         *
         *   ③ font-size: 字号。 可以写px单位,也可以写%
         *     200%表示浏览器默认大小(16px)的两倍=32px
         *
         *   ④ font-family: 字体系列(字体族)。
         *     >>> 可以直接写字体名,也可以写字体系列名。
         *     >>> 常用字体系列:serif-衬线体    sans-serif-非衬线体;
         *     >>> font-family可以接收多个值,用逗号分隔。表示优先使用第一个,如果没有这个字体,依次向后使用。 通常,最后一个值放字体系列名;
         *         eg: font-family: "黑体","微软雅黑",sans-serif;
         *     
         *   ⑤ font缩写形式:
         *     >>> 顺序必须是:
         *         font-weight font-style font-size/line-height font-family
         *     >>> 不同属性之间,用空格分隔;
         *     >>> font-size/line-height必须一组,用/分隔;
         *     >>> font-family多个字体之间,用逗号分隔
         *     >>> eg: font: bold italic 32px/50px "微软雅黑",serif;
         *
         * 2、 字体颜色
         *   ① color: 字体颜色  可以使单词、十六进制、RGB等
         *
         *   ② opacity: 透明度,可选值0-1
         *     [opacity和RGBA的区别](重点)
         *     >>> RGBA本身可以设置颜色,而opacity必须配合其他颜色属性来用;
         *     >>> rgba仅仅是让当前元素设置的颜色透明;
         *         而opacity,会让当前元素里面的所有文字、背景、子元素都透明;
         *
         *
         * 3、行距、对齐、其他类
         *   ① line-height: 行高。 可以写px单位、可以直接写数字(表示默认行距的几倍)、可以写% (表示默认行距的百分比)
         *

>>> 行高重要作用: 让单行文字在div中垂直居中?
         *         设置行高等于div的高度,即可让单行文字垂直居中
         *
         *   ② text-align:设置区域内的行级元素水平对齐方式left/center/right
         *
         *   ③ letter-spacing: 字符间距,字与字之间的距离
         *
         *   ④ text-decoration: 文本修饰;
         *     underline-下划线、overline-上划线、line-through-删除线、none-去下划线
         *
         *   ⑤ overflow: 设置超出区域文字的显示方式。
         *     >>> overflow: hidden; 超出区域的文字隐藏不显示;
         *       >>> overflow: scroll; 无论文字多少,都会显示水平垂直滚动条
         *       >>> overflow: auto; 自动。文字多显示滚动条,文字少,不显示滚动条。
         *       >>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
         *             overflow-y: scroll; overflow-x: hidden;
         *
         *   ⑥ text-overflow:设置行末多余文字的显示方式;
         *     >>> clip-多余文字裁剪掉(默认效果)   ellipsis-多余文字省略号显示
         *     >>> 显示省略号,需要配合white-space: nowrap;使用
         *     >>> 【重点】 设置行末显示省略号(三行代码,缺一不可)
         *          overflow: hidden;
         *            white-space: nowrap;
         *            text-overflow: ellipsis;
         *
         *   ⑦ white-space: nowrap; 设置中文行末,不断行显示
         *
         *   ⑧ text-indent: 首行缩进。
         *
         *   ⑨ -webkit-text-stroke: 0.5px blue; 文字描边。
         *     -webkit-表示只有webkit内核浏览器生效、常见的有chrome、safari
         *
         *   ⑩ text-shadow: 文字阴影,有四个属性值,空格分隔;
         *     >>> 水平阴影距离,正数表示阴影右移,负数左移;
         *     >>> 垂直阴影距离,正数表示阴影下移,负数上移;
         *     >>> 阴影模糊距离, 0表示阴影一点不模糊;
         *     >>> 阴影的颜色;
         *     >>> eg:text-shadow: 20px -10px 2px blue;
         * &nbsp; 文字加空格

怎样让每行多余的文字显示文省略号?

         1.white-space:nowrap 如果是中文,则需要设置行末不断行;

         2.overflow:hidden 设置超出控件范围隐藏;

         3.text-overflow:ellipsis;


以下举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS常用文本属性</title>
<style type="text/css">
.div1 {
width: 200px;
height: 200px;
background-color: rgb(177,0,0);
font-weight: 900px;
font-style: italic;
font-size:50px ;
color: #CCCCCC;
opacity: 0.7;
line-height: 100px;
letter-spacing: 10px;
text-decoration: line-through;
overflow: hidden;
text-shadow: 1px 1px 20px green;
text-indent: 20px;
-webkit-text-stroke: 1px red;
white-space: nowrap;
text-overflow: ellipsis;
/*font:italic bold 75%/1.8 'Microsoft Yahei',sans-serif;*/
}
</style>
</head>
<body>
<div class="div1">
嘿嘿嘿
<br />哈哈哈哈哈
</div>
</body>
</html>

效果图如下:

第二部分----CSS的基础语法


  PART-5 CSS的常用背景属性


1、background-color: 背景颜色
         * 2、background-image:背景图片。使用url("")选择背景图片。背景图片和背景色同时存在
         * 时,背景图片会覆盖背景色。
         * 3、background-repeat:设置背景图的重复方式,no-repeat:不平铺、repeat-平铺、repeat-x-x轴平铺、repeat-y-y轴平铺
         * 4、background-size: 背景图的大小    
         * [指定宽度高度]
         *  有两种写法:
         * >>>宽度 高度的指定,可以写px,也可以写%(父容器宽高的百分比)
         * >>>当写两个属性时,分别表示宽度和高度;
         *    当写一个属性时,表示宽度高度将会等比例缩放。
         * [其他属性值]
         *>>>contain:图片等比缩放,直到宽或者高较大的一边缩放到100%为止;(可能导致较短的一边小于100%,图片无法覆盖全部区域。)
         *>>>cover:图片等比缩放,直到宽或者高较小的一边缩放到100%为止;(可能导致较大的一边大于100%,图片无法覆盖全部区域。)
         * 5、background-position:背景图偏移量
         * >>>指定位置:left\center\right  top\center\bottom
         *    当只写一个值时,另外一个默认居中。
         * >>>指定坐标:两个属性分别表示水平位移、垂直位移
         *    ①坐标的值可以是像素单位px,也可以是百分数。
         *    ②当写像素单位px时,水平方向正数向右移动,负数向左移动。垂直方向,正数向下移动,负数向上移动。
         *      (左负右正,上负下正)
         *    ③当写%百分数时候:
         *      一般只能是正数。表示的是,去掉图片的宽高,剩余空白区域的分布比。
         *    eg:background-position:30%;水平方向去掉图片宽度,剩余区域3:7分。
         * 6.list-syle:修改小黑点的样式
         *   none:去掉小黑点;
         *   url():可以使用url()来导入图片,作为列表的标识符号。
         *   float:left/right浮动  可以实现块级元素在一行中显示。(常用于网站首页上部选择区)
         *
         * 《《重点》》
         *
         *
         * 【display属性可以设置元素以何种状态显示;】
         * 可选值:   none:隐藏元素   
         *        block:显示为块级元素
         *        inline:显示为行级元素
         *        inline-block:显示为内联块级元素 ,本身将是一个行级元素 。但是拥有块级元素的所有属性比如宽度、高度、 padding、 margin等。
          *【常见的inline-block标签 】
          * <img />   <input />     <textaarea></textarea>   <td></td>
        
          *
          * 【隐藏一个元素的方式】
          * 一、宽度或者高度设置为0px,配合使用overflow:hidden;属性。
          * 二、display:none;显示display:block;
          * 三、opacity:0;设置为全透明。但是元素仍旧占据空间。
          * 四、visibility:hidden; 隐藏元素,但是元素仍旧占据空间。与opacity很像。
                     * 显示visibility隐藏的元素:visibility:visible;

以下举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一张名片</title>
<style type="text/css">
#div1{
background-color:#18242C ;
width: 450px;
height: 320px;
}
.div2{
height: 240px;
width: 400px;
}
.h2{
color: white;
padding-top: 30px;
margin-left: 30px;
margin-right: 20px;
padding-bottom: 20px;
border-bottom: gray solid 1px;
}
.li{
color: white;
list-style: none;
background-image: url(img/QQ20170301171904.png);
background-repeat: no-repeat;
text-indent: 30px;
line-height: 20px;
width: 20px;
height: 20px;
margin-bottom: 15px;
}
.li1{
background-position: 0px 0px;
white-space: nowrap;
}
.li2{
background-position: -20px 0px;
white-space: nowrap;
}
.li3{
background-position: -40px 0px;
white-space: nowrap;
}
.li4{
background-position: -60px 0px;
white-space: nowrap;
}
.li5{
background-position: -80px 0px;
width:360px
}
</style>
</head>
<body>
<div id="div1">
<h2 class="h2">联系我们</h2>
<div class="div2">
<ul>
<li class="li li1">总机:0427-3293318</li> <li class="li li2">传真:0427-3293318</li> <li class="li li3">售后:0427-3293318</li> <li class="li li4">邮箱:lpei@lpei.com.cn</li> <li class="li li5">地址:辽宁省盘锦市兴隆台区高新技术产业园公园街</li>
</ul>
</div>
</div>
</body>
</html>

效果图如下:

第二部分----CSS的基础语法

  


PART-6 CSS的盒模型


图片示例:

第二部分----CSS的基础语法

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

四、border-radius 圆角
            
1、可以接受八个属性值。分别表示  X轴(左上、右上、右下、左下) /Y轴(左上、右上、右下、左下)
                    2、缩写形式;
                         * 只写X轴,Y轴将默认等于X轴。
                         * 四个角写不全,默认对角相等
                         * 只写一个数,默认八个数均等。
                         * eg: border-radius:50px 20px;
                         *    = border-radius:50px 20px 50px 20px;
                         *    = border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
                  3、当圆角弧度>=正方形的一半,将显示为圆形。

以下举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div2{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50px 50px 50px 50px/50px 50px 50px 50px;
}
</style>
</head>
<body>
<div class="div2"></div>
</body>
</html>

效果图如下:

第二部分----CSS的基础语法


、盒子模型相关问题:

Question-1  :当父盒子包裹子盒子,给子盒子添加margin-top时,子盒子和父盒子的上边线并不能分开,而是会导致两个盒子同时下来。
             【解决办法:】
             *1、给父盒子添加一点点像素 ,但是不推荐使用,会使得父盒子结构多出一点像素。
             *2、给父盒子添加1px的border-top,同样不推荐使用,会导致1px的多余空间。
             *3、给父盒子或者子盒子添加浮动,这种方式可能会由于浮动在一定程度影响页面布局。
             *4、给父盒子添加overflow属性,推荐使用。

            第二部分----CSS的基础语法

Question-2 相邻盒子之间的兼具问题:

1、水平排放的盒子,水平间距是两个margin的累加

第二部分----CSS的基础语法

2、垂直排放的盒子,垂直间距是合并的取最大值

第二部分----CSS的基础语法

、【border-image】图片边框:

1、十个属性值:

图片路径: url

图片的切片宽度 :4个值,分别代表上,右,下,左四条切线。

通过四条切线切割后,会把图片分成九宫格,四个角分别对应边框的四角,四个边分别对应边框的四边。

【不会进行任何拉伸】【根据设置进行拉伸,平铺,铺满】【写的时候不能带像素单位】

图片边框的宽度:4个值,分别代表上右下左四条边框。【写的时候必须带像素单位】

背景重复方式:3个属性值,stretch(拉伸),round(铺满),repeat(平铺)

第二部分----CSS的基础语法

                 * 【round与repeat的区别】
                 * round 会对四条边进行适当的拉伸与压缩,确保四条边可以重复整数次。
                 * repeat会保持每条边的宽度长度比列不变,所以可能会导致四角处无法显示出一条完整的边。
                 2、属性值的写法:
                 * border-image:① ②/③px 四;
                 3、border-image在webkit内核浏览器中,必须带上-web-kit-前缀。

以下举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div4{
width: 200px;
height: 200px;
background-color: red;
border-image: url(img/QQ图片20170303142611.png) 27/27px repeat;
}
</style>
</head>
<body>
<div class="div4"></div>
</body>
</html>

效果图如下:

第二部分----CSS的基础语法


【box-shadow 盒子阴影】
                 1、有6个属性值,空格分隔。
                  *   ①、X轴阴影距离(必选),可正可负,正数--右移  负数--左移
                  *   ②、Y轴阴影距离(必选),可正可负,正数--下移  负数--上移
                  *   ③、阴影模糊半径(可选值);只能是正数,默认为0,数值越大,阴影越模糊。
                  *   ④、阴影的扩展半径(可选值),可正可负,默认为0,数值越大,阴影扩大;数值减小,阴影变小。
                  *   ⑤、阴影颜色(可选值):默认为黑色。
                  *   ⑥、内外阴影(可选值);默认为外阴影,inset:内阴影;
                  *    outline :外围线
                  *    显示在边框border外侧,并且不会占据空间。可能会覆盖四周的内容。
   以下举例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div3{
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 0 auto;
box-shadow: 0px 0px 50px 25px greenyellow inset;
border-radius: 50px 50px 50px 50px/50px 50px 50px 50px;
}
</style>
</head>
<body>
<div class="div3"></div>
</body>
</html>

效果图如下:

第二部分----CSS的基础语法

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


PART-7 CSS的浮动与定位


一、【CSS中的浮动问题】

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

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

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

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

二、【CSS中的定位问题】

[相对定位 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定位的祖先元素进行定位)
                 *    ② 如果所有的祖先元素都未定位,则相对于浏览器左上角进行定位;

 [固定定位 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中的四个值, 上、下两个值得距离都是从上边量取; 左、右两个值都是从左边量取;


PART-8 CSS中负边距的使用


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

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

负边距第二个作用的应用 解决div中多个li之间间隙的问题


PART-9 CSS3新增属性


 一、各浏览器前缀类型:

1、-webkit-:Chrome/Safari浏览器
2、-moz-:火狐浏览器
3、-ms-:IE浏览器
4、-o-:欧朋浏览器

二、CSS长度单位:

1、px:表示像素。长度是固定的。表示占分辨率的几个像素点。
2、 %: 表示相对于默认值的百分比。(默认字体十六号字。)
3、Em:长度与元素的字号挂钩。
4、Rem:表示与根元素的字号挂钩。即,与HTML标签的font-size挂钩,如果不设置则默认字号为16px;
   [Em与Rem的区别]
   ①、em是与当前元素自身的font-size挂钩,如果当前元素没有设置,则向上查找最近的祖先元素字号直到根字号;
   ②、rem与当前元素字号无关,直接与根元素字号挂钩。
   
/*height:2em;(表示高度为fontsize字号高度的2倍。)*/
 /*html{    fontsize:48px;    }修改根元素字号大小。*/
 
三、CSS3背景属性:

1、[ 背景图的裁切属性]
    background-clip:设置背景图或者背景色的显示或者裁切区域。
                    》》border-box:从边框外缘开始显示;
                    》》padding-box从边框内缘开始显示;
                    》》content-box 从文字内容区域开始显示;
                    》》如果不在显示区域的背景图或者背景色,会被裁切掉不显示;
 2、  [背景图 的定位属性]         
    background-origin:设置背景图从哪里开始定位。
                     》》border-box:从边框外缘开始;
                    》》padding-box从边框内缘开始;
                    》》content-box 从文字内容区域开始;
 
  3、background-origin:不会改变背景图显示区域的大小,只能决定背景图左上角从哪里开始定位。
    background-clip:只负责裁切出显示区域,但是并不会关心背景图定位在哪里。
 
  4、 [背景图 的附着方式]
    background-attachment:背景图的 附着方式。
                    》》scroll:背景图跟随区域进行滚动。默认效果。
                    》》 fixed:背景图充满镇个区域,不随着滚动条滚动。
                    
  5、[背景图 的附缩写形式]
    background的缩写形式:
    background:  background-color   background-image   background-repeat  background-attachment  background-position
 
  6、[transition  背景图的过渡属性]
    transition:过渡属性:接受四个属性值。
    ①、设置哪个CSS属性,参与过渡。可以直接指定all/none;
    ②、过度多少时间完成,通常为.3s .5s。
    ③、过渡样式效果。通常为ease。
    ④、过渡延时几秒后再开始,一般不写。
    trasition属性可以同时定义多个过渡效果,用逗号隔开。
    eg:
      transition: width .5s ease , height .3s ease;
 
  7、[transform  定义变换属性]
 
            一、常用的变换函数:

》》translate:(10px,10px) 平移,第二个不写默认为0.
          》》scale:(1.1) 缩放,第二个不写默认等于第一个。
           》》rorate:(90deg) 旋转,默认绕Z轴转,可以单独设置rorateX()等。
           》》skew(20deg,20deg)扭曲,水平、垂直方向扭曲多少度。
           
          二、transform可以同时实现多种变换效果,用空格分隔开;
          
          三、transform-origin:定义变换起点,常用于旋转变换。
          可选值:left\center\right\top也可以直接指定X、Y轴的坐标点,第一个数为X轴。
          例如:transform:rotate:(90deg)
         transform-origin:right bottom;
                     表示绕右下角旋转90度。

四、CSS3动画的使用:

1、声明一个关键帧(动画)
   @keyframes name{
       from{}
       to{}
   }
     阶段的写法:
   ①、可以直接使用from-to的写法;
   ②、可以设置0%-100%的写法,但是开头结尾必须是0%、100%;
2、在CSS选择器中使用animation来调用声明好的动画。   
  【animation的缩写形式】
  Animation-name:动画名称,就是我们声明的关键帧name。
  Animation-duration:动画持续时间
  Animation-timing-function:动画速度曲线 ,常选ease。
  Animation-delay:动画开始的时间,延迟时间。
  Animation-iteration-count:动画播放次数,默认为1.无线次数循环:infinite;
  Animation-direction:动画在下一个是否逆向播放,默认为normal表示不进行逆向播放。alternate表示下一次要进行逆向播放。
  Animation-fill-mode:表示动画结束后停留在什么状态,要使用这种属性,动画的执行次数必须是有限次。
                         forwards:表示动画停留在结束状态;
                         backwarks:表示动画停留在初始状态;默认效果。
   >>Animation-name与 Animation-duration必须要设置,其他的选填。
   >>Animation可以同时设置多个动画,多个动画之间用,分隔开。 eg:Animation:frame1 1s,frame2 1s,frame3 1s....