CSS基础_css消除y轴旋转后空白问题

目录

一、盒子模型

1.1 边框（border）

1.2 内边距（padding）

1.3 外边距（margin）

1.4 清除内外边距

1.5 塌陷问题 

1.6 CSS 3中盒子模型 

1.6.1 指定盒模型

1.6.2 圆角边框 

1.6.3 盒子阴影 

1.6.4 文字阴影 

1.6.5 CSS3滤镜(了解) 

1.6.6 CSS3 calc函数(了解) 

二、浮动

2.1 概念 

2.2 特性 

2.3 应用：一浮动，众应浮

2.4 清除浮动 

2.4.1 清除浮动的方法 

2.4.1.1 额外标签法(隔墙法) 

2.4.1.2 父级添加 overflow 

2.4.1.3 父级添加 :after伪元素法 

2.4.1.4给父级添加双伪元素 

三、定位

3.1定位模式 

3.2边偏移

3.3静态定位-static(了解) 

3.4相对定位-relative(重要) 

3.5绝对定位-absolute(重要) 

3.6固定定位-fixed(重要) 

 3.7粘性定位-sticky(了解)

3.8扩展项

3.8.1子绝父相 

3.8.2固定定位fixed技巧--返回小标签

 3.8.3 定位叠放次序z-index    

3.8.4定位扩展 

四、选择器

4.1后代选择器

4.2子选择器

4.3并集选择器

4.4伪类选择器-链接伪类

4.5伪类选择器-focus伪类选择器 

4.6CSS 3新增选择器

 4.7伪元素选择器 (重点)

五、定义列表

---

一、盒子模型

        盒子包括边框(border)、外边距(margin)、内边距(padding)、实际内容(content)

1.1 边框（border）

        可以设置元素的边框，边框又三个部分：边框宽度，边框样式，边框颜色         

• border-width        定义边框粗细，单位px
• border-style         定义边框样式(solid 实线,dashed 虚线边框,dotted 点线边框)       详情查询手册
• border-color         边框颜色

                            复合写法，无顺序规定

• border-collapse     控制相邻单元格的边框(collapse合并，将相邻两个边框合并)

边框(border)会影响盒子实际大小
解决方法：        

1. 测量时不测量边框
2. 如果测量的时候包含边框，则需要width/height减去边框宽度 

1.2 内边距（padding）

        可以设置内边距，即边框与内容之间的距离 

        padding-left  左内边距                padding-right      右内边距

        padding-top  上内边距                padding-bottom  下内边距
       后面都是跟移动距离，带单位px 

       简写形式
                        padding: 5px;                                一个值，代表上下左右都有5像素内边距
                        padding: 5px 10px;                       两个值，代表上下内边距是5像素，左右10像素
                        padding: 5px 10px 20px;              三个值，代表上内边距5，左右内边距10，下内边距20
                        padding: 5px 10px 15px 20px;     四个值，代表上5，右10，下15，左20.    顺时针

内边距(padding)会影响盒子实际大小

• 如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子
• 如果盒子没有指定宽度和高度，此时再指定内边距，并不会撑大盒子

                      

           如果撑开了，还要保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可
           内边距典型应用：新浪导航范例 （采用不指定宽度，让自动撑开盒子特性）

1.3 外边距（margin）

        可以设置外边距，即控制盒子和盒子之间的距离 

         margin-left  左内边距                margin-right     右内边距

         margin-top  上内边距                margin-bottom 下内边距

          后面都是跟移动距离，带单位px

          简写形式
                        margin: 5px;                                一个值，代表上下左右都有5像素外边距
                        margin: 5px 10px;                       两个值，代表上下外边距是5像素，左右10像素
                        margin: 5px 10px 20px;              三个值，代表上外边距5，左右外边距10，下外边距20
                        margin: 5px 10px 15px 20px;     四个值，代表上5，右10，下15，左20.    顺时针

外边距距典型应用： 块级元素水平居中         (行内元素和行内块元素水平居中给其父元素添加text-align：center即可)
条件:   

1. 盒子必须指定了宽度
2. 盒子左右的外边距都设置为auto

• 常用写法：margin:0 auto; 

1.4 清除内外边距

        (重要，布局前，首先清除下网页元素的内外边距) 

* {
    margin:0;      /*清楚外边距*/
    padding:0;     /*清楚内边距*/
}

1.5 塌陷问题 

        嵌套块元素垂直外边距产生

对于两个嵌套关系(父子关系)的块元素，父元素 有 上外边距 同时子元素 也有 上外边距，此时父元素会塌陷较大的外边距值

解决方案：

1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow：hidden
4. 还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题

注意：    行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
               但是转换为块级和行内块元素就可以了 

1.6 CSS 3中盒子模型 

1.6.1 指定盒模型

CSS3中可以通过 box-sizing 来指定盒模型

• box-sizing:content-box    盒子大小为width+padding+border (以前默认)
• box-sizing:border-box     盒子大小为width ( CSS3新特性 )

如果设置为第二种，那么padding和border则不会撑大盒子(前提：padding和border不会超过width宽度) 

1.6.2 圆角边框 

• border-radius:length;                 属性用于设置元素的外边框圆角

        原理：园与边框的交集形成圆角的效果，参数可以是数值或百分比形式
                

 如果是正方形想要设置为一个圆，把数值修改为高度或者宽度一半，或者写50%

 如果是矩形，设置高度的一半就可以

简写属性，分别代表左上角，右上角，右下角，左下角
分开写为          border-top-left-radius
                        border-top-right-radius
                        border-bottom-right-radius
                        border-bottom-left-radius 

1.6.3 盒子阴影 

box-shadow:h-shadow(必须，水平阴影的位置，可负值) v-shadow(必须，垂直阴影的位置，可负值) blur spread color inset;
                    
                    blur:     可选.模糊距离
                    spread:可选.阴影的尺寸
                    color:  可选.阴影的颜色
                    inset:  可选.将外部阴影(outset)改为内部阴影

                注意:    1.默认的是外阴影(outset)，但不可以写，否则失效
                             2.盒子阴影不占用空间,不会影响其他盒子排列 

1.6.4 文字阴影 

text-shadow:h-shadow(必须，水平阴影的位置，可负值) v-shadow(必须，垂直阴影的位置，可负值) blur color
                    

                 blur:  可选.模糊距离
                 color:可选.阴影的颜色 

1.6.5 CSS3滤镜(了解) 

        filter 属性将模糊或颜色偏移等图形效果应用于元素
                
        filter:函数();
                    

        eg:    filter:blur(5px);    blur模糊处理，数值越大越模糊 

1.6.6 CSS3 calc函数(了解) 

        calc() 此CSS函数让你在声明CSS属性时执行一些计算(括号内可以使用+ - * / 计算)
         

        eg:    width:calc(100%-30px)        无论父盒子怎么变换，子盒子永远小于它30px 

二、浮动

2.1 概念 

        网页布局准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

        浮动的典型应用：可以让多个块元素一行内排列显示 

选择器 {
    float:属性值; 				   
 }

参数值：

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

2.2 特性 

1. 浮动元素会脱离标准流(脱靶)----浮动的盒子不在保留原先的位置
2. 浮动的元素会一行内显示并且元素顶部对齐----浮动的元素是互相贴靠在一起(无缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
3. 浮动的元素会具有行内块元素的特性----如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 

2.3 应用：一浮动，众应浮

一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防引起问题 

2.4 清除浮动 

目的:让子盒子撑开父盒子，有多少孩子，父盒子就有多高
本质: 清除浮动元素造成的影响
        如果父盒子本身有高度，则不需要清除浮动
        清除浮动之后，父级就会根据浮动的子盒子自动检测高度
语法: 选择器 {
                  clear:属性值;             
             }                                    
                                                
属性值:       

left	在左侧不允许浮动元素。(清除左侧浮动的影响)
right	在右侧不允许浮动元素。(清除右侧浮动的影响)
both	在左右两侧均不允许浮动元素。*常用*
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

清除浮动的策略:闭合浮动(把浮动元素闭合在父元素中，浮动产生的影响，只在父元素内)                   

2.4.1 清除浮动的方法 

1. 额外标签法(隔墙法)-W3C推荐
2. 父级添加 overflow 属性
3. 父级添加 after 伪元素
4. 父级添加双伪元素

2.4.1.1 额外标签法(隔墙法) 

        在浮动元素末添加一个空标签，此标签必须为块级元素

<div style="clear:both"></div>

2.4.1.2 父级添加 overflow 

        可以给父级添加 overflow属性，将其属性值设置为hidden、auto、scroll

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

2.4.1.3 父级添加 :after伪元素法 

.clearfix:after {
    content:"";
    display:block;
    height:0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;
}

以上代码在声明部分(在style中) 

调用(给所需要清除浮动的父盒子添加class=.clearfix)

2.4.1.4给父级添加双伪元素 

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

以上代码在声明部分(在style中) 

调用(给所需要清除浮动的父盒子添加class=.clearfix)

三、定位

        定位=定位模式+边偏移

定位模式:用于指定一个元素在文档中的定位方式
边偏移:则决定了该元素的最终位置 

3.1定位模式 

position:参数值

参数值： 

absolute	绝对定位
fixed	固定定位
relative	相对定位
static	默认值。静态定位（没有定位）忽略边偏移和z-index
inherit	规定应该从父元素继承 position 属性的值。

3.2边偏移

top/bottom/left/right:80px

解释：

top	顶部偏移量，定义元素相对与父元素上边线的距离
bottom	底部偏移量，定义元素相对与父元素下边线的距离
left	左侧偏移量，定义元素相对与父元素左边线的距离
right	右侧偏移量，定义元素相对与父元素右边线的距离

3.3静态定位-static(了解) 

静态定位是元素的默认定位方式，无定位的意思
选择器 { position:static; }
特点: 静态定位按照标准流特性摆放位置，它没有边偏移
         布局时很少使用

3.4相对定位-relative(重要) 

相对定位是元素在移动位置的时候，是相对于它原来的位置来说
选择器 { position:relative; }
特点: 它是相对于自己原来的位置来移动
         原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它(不脱标，保留原来位置)

3.5绝对定位-absolute(重要) 

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
选择器 { position:absolute; }
特点: 无祖先元素或者祖先元素无定位，则以浏览器为准单位
         如果祖先元素有定位(相对，绝对，固定)，则以最近一级有固定定位祖先元素为参考点
         绝对定位不在占有原先的位置(脱标)

3.6固定定位-fixed(重要) 

将元素固定与浏览器可视区的位置    使用场景：广告位
选择器 { position:fixed; }
特点:以浏览器的可视窗口为参考点
        跟父元素无关系
        不随滚动条滚动
        固定定位不在占有原先的位置
        固定定位也是脱表的，固定定位可以看作一种特殊的绝对定位

 3.7粘性定位-sticky(了解)

可以被认为是相对定位和固定定位的混合 (sticky 粘性的)
选择器 { position:sticky; }
特点: 以浏览器的可视窗口为参照点移动元素 (固定定位特点)
         粘性定位占有原先的位置 (相对定位特点)
         必须添加top、left、right、bottom 其中一个才有效
         跟页面滚动搭配使用，兼容性较差，IE不支持

3.8扩展项

3.8.1子绝父相 

意思：子级使用绝对定位，父级则需要使用相对定位

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
2. 父盒子需要加定位限制子盒子在父盒子内显示
3. 父盒子布局时，需要占有位置，因此父盒子只能是相对定位

总结：父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

3.8.2固定定位fixed技巧--返回小标签

        固定在版心*右侧*位置--实现返回顶部小标签模块

 小算法:

1. 让固定定位的盒子 left:50%，走到浏览器可视区(也可以看作版心)的一半位置
2. 让固定定位的盒子 margin-left:版心宽度的一半距离  多走版心宽度的一半位置

 3.8.3 定位叠放次序z-index    

在使用定位布局时，可能会出现盒子重叠的情况，可以使用z-index来控制盒子的前后次序
选择器 { z-index:1; }
特点: 数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上
         如果属性值相同，则按照书写顺序，后来居上
         数字后面无单位
         只有定位的盒子才有z-index属性

3.8.4定位扩展 

• 1.绝对定位的盒子居中

                    加了绝对定位的盒子不能通过 margin:0 auto; 水平居中

                     可以通过上面小技巧实现水平和垂直居中。

•  2.绝对定位会完全压住盒子

四、选择器

4.1后代选择器

        元素1 元素2 {样式声明}

ul li {
    color: red;
}

4.2子选择器

        元素1>元素2 {样式声明}

div>a:link {				 	/*未访问链接*/
    color: limegreen;
    text-decoration: none;   	/*取消下划线*/
}

4.3并集选择器

        元素1，元素2 {样式声明} 

ol li,
dl dd,
dl dt {
    color: darkorchid
}

4.4伪类选择器-链接伪类

a:link{ }			/*选择所有未被访问的链接 *常用**/
a:visited{ }		/*选择所有已被访问的链接*/
a:hover{ }			/*选择鼠标指针位于其上的链接 *常用**/
a:active{ }			/*选择活动链接（鼠标按下未弹起）*/

 为了保证生效,请按照 LVHA 的顺序声明:link,visited,hover,active

4.5伪类选择器-focus伪类选择器 

input：focus{ }   	/*用于选取获得焦点的表单元素 */

4.6CSS 3新增选择器

属性选择器--根据元素特点属性来选择元素
注意:元素和属性选择框 [ ] 之间不能有空格
            
            元素 [att] {样式声明}                            选择具有 att 属性的元素
            元素 [att="val"] {样式声明}                 选择具有 att 属性且属性值等于 val 的元素
            元素 [att^="val"] {样式声明}               匹配具有 att 属性且值以 val 开头的元素
            元素 [att$="val"] {样式声明}               匹配具有 att 属性且值以 val 结尾的元素
            元素 [att*="val"] {样式声明}                匹配具有 att 属性中含有 val 的元素

/* 必须是input类型，但是同时具有volue这个属性，选择这个元素 */
input[value] {							
    color: pink;
}
/* 只选择 type=text 文本框的input */
input[type=text] {
    color: pink;
}
/* 选择首先是div，然后，其中class属性，并且属性值必须是icon开头的这些元素 */
div[class^=icon] {
    color: pink;
}
/* 选择首先是div，然后，其中class属性，并且属性值必须是data结尾的这些元素 */
div[class$=data] {
    color: blue;
}
/* 选择首先是div，然后，其中class属性，并且属性值含有fil的这些元素 */
div[class*=fil] {
    color: yellow;
}

结构伪类选择器--主要根据文档结构来选择元素
            
        元素:first-child {样式声明}                 匹配父元素中的第一个子元素
        元素:last-child {样式声明}                 匹配父元素中最后一个子元素
        元素:nth-child(n) {样式声明}             匹配父元素中第N个子元素
        元素:first-of-type {样式声明}             指定类型元素的第一个
        元素:last-of-type {样式声明}             指定类型元素的最后一个
        元素:nth-of-type(n) {样式声明}         指定类型元素的第N个
            
第三个和第六个中的参数n可以是具体数值,关键字或者公式
关键字:    
        even(偶数),odd(奇数)
公式(如果n是公式,则从0计算,每次+1,0元素或者超出元素忽略):    
        2n                             偶数
        2n+1                         奇数
        5n                             5,10,15...
        n+5                         从第五个开始(包含前五个)到最后
        -5+5                         前五个(包含第五个) 

/* 选择ul里面第一个li */
ul li:first-child {
    color: pink;
}
/* 选择ul里面最后一个li */
ul li:last-child {
    color: red;
}
/* 选择ul里面第三个li */
ul li:nth-child(3) {
    color: palegreen;
}

前三个和后三个使用方法同理,但有区别:

1. nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看是否与选择器匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择,先去匹配选择器,然后根据选择器找第n个孩子

4.7伪元素选择器 (重点)

元素::before {content ''}				/*在元素内部的前面插入内容*/
元素::after {content ''}				/*在元素内部的后面插入内容*/

 注意:

1. before和after创建一个元素,但是属于行内元素
2. 新创建的这个元素在文档树中找不到的,所以我们称为伪元素
3. befor和after必须有content属性
4. before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
5. 伪元素选择器和标签选择器一样,权重为1

五、定义列表

<ul>
    <li>这是无序列表</li>
    <li>无序列表之间没有顺序级别之分，是并列的</li>
    <li>格式为ul li</li>
</ul>
		
<ol>
    <li>这是有序列表</li>
    <li>有序列表有顺序级别之分</li>
    <li>格式为ol li</li>
</ol>
		
<dl>
    <dt>用 dt 大头</dt>
    <dd>用 dd 做小节</dd>
    <dd>外框架为 dl</dd>
</dl>

六、CSS-初级 

.a {
    font-family: "times new roman";   /* 定义文本字体系列 */
    font-size: 16px;                  /* 定义字体大小 （注意添加px） */
    font-weight: 400;             	  /* 定义文本字体粗细（400为细，700为粗） */
    font-style: normal;				  /* 定义文本风格（italic斜体，normal正常字体） */
				
    /* 字体复合简写不能随意更换顺序，不需要的可以省略。*/
    /* 必须保留font-size和font-family，否则失效 */
    font：font-style font-weight font-size/line-height font-family;
}

.b {
    color: red 							/* 定义文本颜色 */
    text-align: center;					/* 设置文本内容水平对齐方式 */
    text-decoration: none;				/* 设置文本装饰（none取消装饰，underline添加下划线 */        
                                        /* line-through添加删除线） */
    text-indent: 2em;					/* 设置文本缩进（em为相对单位） */
    line-height: 30px;					/* 设置行间距（行高）（注意带px单位） */
}

.c {
    background-color: red;   			定义元素的背景颜色
    background-image: url(图片位置);	    定义元素的背景图片（none无背景图，url（）使用绝对或相对地址指定图片）
    background-repeat: no-repeat;		设置图片是否平铺（repeat背景在纵向和横向平铺 no-repeat 不平铺）
    background-position: left center;   如果指定两个都是方位名词，前后顺序无所谓，如果只指定一个方位名词，另一个省略，则第二个默认居中对齐
    background-position: 20px 50px;     如果是精准坐标，第一个为X轴，第二个为Y轴，如果只指定一个，一定为X，另一个默认居中对齐
    background-position: 20px center;   混用，第一个为X轴，第二个为Y轴
    background-attachment: fixed;       设置背景图片是否固定或滚动（fixed固定，scroll滚动）
    background: rgba(0,0,0,0.3);		CSS3提供半透明的效果
 
    背景复合简写没有特定的书写顺序，一般习惯约定顺序
    background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
}

.d {
    list-style: none;					/*去掉Li前面的项目符号（小圆点）	*常用**/
    opacity:0.5;                        /*设置盒子透明度*/
    cursor:move                         /*改变光标,参数百度*/
}

6.1CSS引入方式

1. 行内样式表 （很少使用） 
2. 内部样式表  
3. 外部样式表  link连接

6.2元素显示模式 

块元素

1. 独占一行
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度默认是容器的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素 

行内元素

1. 相邻行内元素在一行上，一行可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素 

行内块元素

1. 和相邻行内元素（行内块）在一行，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度（行内元素特点）
3. 高度、行高、外边距以及内边距都可以控制（块级元素特点） 

display: block;						/*转换为块元素*/
display: inline;					/*转换为行内元素*/
display: inline-block; 				/*转换为行内块*/

6.3CSS三特性

层叠性：    样式冲突，遵循就近原则
                  样式不冲突，不会层叠
                    
继承性：    子元素继承父元素样式（text-，font-，line- 这些开头以及color属性可继承）
                    
优先级：    选择器相同，则执行层叠性
                   选择器不同，则根据选择器的权重执行（style > ID > 类 > 元素 > 继承） 

6.4元素的显示与隐藏 

类似网站广告，当我们点击关闭就不见了，刷新又会重新出现

1. display        显示隐藏
2. visbility       显示隐藏
3. voerflow     溢出显示与隐藏 

1.display属性        用于设置一个元素应如何显示
        display: none;         隐藏对象            隐藏后不再占有位置
        display: block;        显示元素
应用及其广泛，搭配JS可以做很多网页特效 

2.visibility可见性    用于指定一个元素是可见还是隐藏
        visibility: visible;         元素可视
        visibility: hidden;        元素隐藏            隐藏后继续占有原来的位置 

3.overflow溢出        指定如果内容溢出，会发生什么
        overflow: visible;             溢出显示(默认)
        overflow: hidden;            溢出隐藏
        overflow: scroll;              不管超出内容否，总是滚动条显示
        overflow: auto;                溢出以滚动条显示，不溢出则无滚动条
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但如果有定位的盒子，请慎用 overflow: hidden;  因为会隐藏多余部分 

七、CSS高级技巧

7.1 精灵图

目的:为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
核心:

1. 精灵技术主要针对于背景图片使用，多个小图整合到一张大图中
2. 移动背景图片位置，此时可以使用 background-position
3. 移动的距离就是这个目标图片的X和Y坐标，注意网页坐标有所不同
4. 一般情况下都是往上往左移动，所以数值是负值
5. 使用精灵图需要精确测量每个背景图片的大小和位置 

7.2 字体图标 

稍后补充，见笔记 

7.3 CSS三角 

div {
    width: 0;
    height: 0;
    line-height: 0;						/* 保证兼容性 */
    font-size: 0;						/* 保证兼容性 */
    border: 50px solid transparent;		/* transparent透明色 */
    border-left-color: pink;			/* 定义一个向右的粉色箭头 */
}

7.4 用户界面 

鼠标样式
        选择器 { cursor: 属性值;}                 设置鼠标指针再对象上移动的形状
属性值:     

default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

表单轮廓线
        选择器 { outline: none;}
                给表单添加 outline:0; 或者 outline:none; 样式后，就可以去掉默认的蓝色边框
提倡写代码之前都去掉轮廓线
                            
防止拖拽文本域 
        extarea {resize: none;}
实际开发中，文本域右下角不可以拖拽
                        
图片或表单(行内块)和文字垂直对齐
        只针对行内元素或者行内块元素
                ertical-align: 参数值;
参数：

aseline	默认，元素放置在父元素的基线上
top	把元素的顶端于行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

                 
BUG:图片底部出现空白缝隙
        原因：行内块元素和文字的基线对齐
解决办法

1. 给图片添加 vertical-align: middle|top|bottom等;  (提倡使用)
2. 把图片转换为块级元素 display:block;

7.5 溢出文字用省略号显示 

7.5.1 单行文本 

{
    /* 先强制一行内显示文本 */
    white-space: nowrap;		(默认normal自动换行)
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 文字用省略号代替超出的部分 */
    text-overflow: ellipsis;
}

 7.5.2 多行文本            (有较大的兼容性问题)

{
    overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
}

7.6 常用的布局技巧(属于效果类型，详细见笔记)

1.margin负值的运用
        因为两个边框相挨，所以变粗，影响美观，我们将盒子向左移动，两个盒子边框重叠，则不会变粗
                margin-left:-1px
        因此引发问题，由于一个边框将一个边框覆盖，则无法完成鼠标放在哪个盒子，哪个盒子四个边变色的效果
        解决办法：
                提高当前盒子层级    (如果没有定位，则加相对定位(保留位置))
                (如果有定位，则加z-index)
                            
2.文字围绕浮动效果
        巧妙利用浮动元素不会压住文字的特性
                            
3.行内块巧妙使用
        制作例如页面导航条，第几页第几页
                            
4.CSS三角形强化
        制作例如京东原价多少，现价多少的价格条 

7.7 CSS3过渡(重点) 

语法: transition:要过度的属性 花费时间 运动曲线 何时开始;
属性: 想要变化的CSS属性，宽度高度，背景颜色，内外边距都可以，如果想要所有属性都变化过度，写all就可以
花费时间: 单位是秒(必须写单位) 如果0.6s
运动曲线: ease(慢开始，然后变快，然后慢结束(默认属性))
                 inear(始终匀速)
何时开始: 单位是秒(必须写单位)，可以设置延迟触发时间，默认为0s 

7.8 CSS3 2D转换 transform 

 可以实现元素的位移，旋转，缩放等效果
        移动(translate)        旋转(rotate)        缩放(scale)

7.9 移动(translate) 

语法:    transform:translate(x,y);
            transform: translateX(n);
            transform: translateY(n);
注意:    

1. 定义2D转换中的移动，沿着X和Y轴移动元素
2. translate最大优点:不会影响到其他元素的位置
3. translate中的百分比单位是相对于自身元素的 translate(50%,50%)
4. 对行内标签没有效果 

7.10 旋转(rotate) 

语法:    transform:rotate(度数)
注意:    

1. rotate里面跟度数，单位是deg，比如rotate(45deg)
2. 角度为正时，顺时针，负时，为逆时针
3. 默认旋转的中心点时元素的中心点

旋转中心点: transform-origin
语法:    transform-origin:x y;
注意:    

1. 注意后面的参数X和Y用空格隔开
2. X Y默认转换的中心点是元素的中心点(50% 50%)
3. 还可以给X Y设置像素或者方位名词(top bottom left right center) 

7.11 缩放(scale) 

语法:    transform:scale(x,y)
注意： 

1. 注意X和Y用逗号分隔开
2. transform:scale(1,1):宽和高都放大一倍，相当于没有放大
3. transform:scale(2,2):宽和高都放大二倍
4. transform:scale(2):只写一个参数，说明第一个和第二个参数相同。
5. transform:scale(0.5,0.5):缩小
6. scale缩放最大的优势，可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子 

7.12 综合性写法 

1. 同时使用多个转换，其格式为:transform:translate() rotate() scale()...等
2. 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
3. 当我们同时有位移和其他属性的时候，***记得要将位移放在最前*** 

CSS3 3D转换 transform 

透视(perspective) 

语法:perspective:数值
注意:

1. 数值的单位是像素
2. 方法是模拟人类视觉位置，安排一双眼睛观察
3. 数值改变物体距离屏幕的距离，所以数值越大，我们看到物体越大 

3D呈现(transfrom-style) 

语法:    transfrom-style:flat;                    子元素不开启3d立体空间(默认)
            transfrom-style:preserver-3d;    子元素开启3d立体空间
注意:    代码写给父级，但是影响的是子盒子 

移动(translate3d) 

 语法:    transform:translate3d(x,y,z);
             transform: translateX(n);
             transform: translateY(n);
             transform: translateZ(n);  
注意:

1. translateZ一般用px单位
2. translate3d中x,y,z是不能省略的，没有请写0

旋转(rotate3d) 

语法:    transform:rotateX(度数)
            transform:rotateY(度数)
            transform:rotateZ(度数)
            transform:rotate3d(x,y,z,度数)    :沿着自定义轴旋转度数（了解）
注意:   

1. 旋转是沿着X轴,y轴,z轴或者自定义轴进行旋转
2. 旋转单位为deg

左手准则:
        X轴:
                左手的拇指指向X轴正方向
                其余手指的弯曲方向就是该元素沿着X轴旋转的方向
        Y轴:
                左手的拇指指向Y轴正方向
                其余手指的弯曲方向就是该元素沿着Y轴旋转的方向(正值) 

CSS3动画(animation) 

1. 先定义
2. 再使用(调用动画) 

/*定义*/
@keyframes 动画名称 {
    0% {
        transform: translate(0, 0);
	}
	100% {
		transform: translate(1000px, 0);
	}
}

动画序列

1. 0% 和 100%等价于from to
2. 0%是动画的开始，100%是动画的结束，这样就规划了一个动画序列

                                
调用动画(必须属性)---后面的动画名称为定位中动画名称
        animation-name: 动画名称;
持续时间(必须属性)
        animation-duration: 2s;
运动曲线
        animation-timing-function: ease;

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。

何时开始
        animation-delay: 1s;
重复次数  （iteration 重复的） （conut 次数）  （infinite  无限） 
        animation-iteration-count: infinite;
是否反方向播放 默认的是 normal  （如果想要反方向 就写 alternate）
        animation-direction: alternate;
动画结束后的状态 （默认的是 backwards  回到起始状态） （停留在结束状态 forwards）
        animation-fill-mode: forwards;
                            
动画简写
        animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状体
        animation: name duration timing-function delay iteration-count direction fill-mode;
        animation: move 2s linear 0s 1 alternate forwards; 

浏览器私有前缀

目的:为了兼容老版本的写法，比较新的版本无须添加
写法：    -moz-:代表firefox浏览器私有属性
               -ms-:代表IE浏览器私有属性
               -webkit-:代表safari、chrome私有属性
               -o-:代表opera私有属性