CSS3学习笔记

1.font综合设置字体样式

选择器 {font : font-style font-wight font-size/line-height font-family}

使用font属性时，必须按上面的语法格式书写，不能更换顺序，其中不需要设置的属性可以省略，但是必须保留font-size和font-family，否则不生效

2.链接伪类选择器

:link /*未访问的链接*/
:visited /*已访问的链接*/
:hover /*鼠标移动到链接上*/
:active /*选定的链接*/

3.一般设置a标签为

a{
    color:gray;
    font-size: 16px;
}
a:hover{
    color:;
}

4.结构（位置）味蕾选择器

:first-child：选取属于其父元素的首个子元素的指定选择器

:last-child：选取属于其父元素的最后一个子元素的指定选择器

:nth-child：匹配属于其父元素的第n个子元素，不论元素的类型，偶数（even）奇数（odd），n从0开始

:nth-last-child(n)：选择器匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数，n可以是数字，关键词或公式

5.目标伪类选择器

:target 目标伪类选择器可用于选取当前活动的目标元素。

6.letter-spacing 文字间距

7.word-spacing 单词间距

8.text-shadow 文字阴影

9.text-indent:2em 首行缩进两个汉字

10.行内元素特点

和相邻行元素在一行上
高、宽无效，但水平方向的padding和margin可以设置，垂直无效
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素（a特殊）

11. 块级元素特点

总是从新行开始
高度、行高、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块元素

12.行内块元素（inline-block）特点：有块级元素特点也有内联元素特点，可以设置宽高，比如input元素

13.属性选择器：选取标签带有某些特殊属性的选择器，支持简单正则比如：

css:

div[class^=font] {
    color : red;
}

html：

<input type="text">123</input>
<input type="button">123</input>

css:

input[type=text]{
    color:red;
}

14.伪元素选择器：

e::first-letter 文本的第一个单词或字（如中文、日文、韩文）
e::first-line 文本第一行
e::selection 可改变选中文本的样式

p::first-letter{
    font-size: 20px;
    color:red;
}
p::first-line{
    color:skyblue;
}
p::selection{
    color:orange;
}

15.e::before 和 e::after 在e元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::before {
    content:"开始";
}
div::after {
    content:"结束";
}

16.背景简写：

background: transparent url(image.jpg)  center center no-repeat;  //背景图居中

17.背景图缩放

background-size : cover; //铺满，等比例缩放
background-size : 50%; 
background-size: contain//自动调整缩放比例，保证图片完整

18.凹凸文字

div{
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;     //凸文字
}
 
div{
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;    //凹文字
}

19.表格的细线边框：

table { border-collapse : collapse; }

20.清除元素的默认内外边距

* {
    margin: 0;
    padding: 0;
}

注意：行内元素只有左右外边距的，是没有上下外边距的，也没有宽度和高度，在ie等低版本浏览器也有会问题。

21.嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素上外边距会与子元素的上边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上边距为0，也会发生合并。

解决办法：①给父元素加个边框②给父元素添加overflow: hidden;

注意：如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子的大小。

22.ccs3盒模型

css3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分为两种情况：

1、box-sizing: content-box; 盒子大小为width + padding + border ，content-box:此值为默认值，其让元素维持W3C的标准Box Mode。

2、box-sizing:border-content; 盒子大小为width，就是说padding和border是包含到width里面的。

23.盒子阴影

box-shadow：水平位置，垂直位置，模糊距离，阴影尺寸，阴影颜色，内/外阴影;

img{
    border: 1px solid orange;
    box-shadow: 3px 3px 5px 4px rgba(255,255,255,0.4);
}

24.清除浮动的本质：主要是为了解决父元素因为子级浮动引起内部高度为0的问题。

<style>
    .father1 { width: 480px;}
    //.father不设置高度，由子元素填充
    .son1{width:100px; height: 100px; float: left;}
    .son2{width:100px; height: 100px; float: left;}
    //此时浮动的话，.father1 的高度为0，.father2会上移和.son1和.son2重叠
</style>
<div class="father1">
    <div class="son1">123</div>
  <div class="son2">456</div>
</div>
<div class="father2">789</div>

25.清除浮动的方法：

①额外标签法：

<style>
    .father1 { width: 480px;}
    .father2 { width: 480px;}
    .son1{width:100px; height: 100px; float: left;}
    .son2{width:100px; height: 100px; float: left;}
        .clear{ clear: both;}
</style>
<div class="father1">
  <div class="son1">123</div>
  <div class="son2">456</div>
//在浮动的盒子后面添加一个空盒子
    <div class="clear"></div>
</div>
<div class="father2">789</div>

②父级添加overflow属性方法

<style>
    .father1{width:480px; overflow: hidden;}    //可以触发bfc，bfc可以清除浮动
    .father2 { width: 480px;}
   .son1{width:100px; height: 100px; float: left;}
   .son2{width:100px; height: 100px; float: left;}
</style>
<div class="father1">
  <div class="son1">123</div>
  <div class="son2">456</div>
</div>
<div class="father2">789</div>

③使用:after伪元素清除浮动

<style>
.clearfix:after{ content:'.'; display: block; height: 0; visibility: hidden; clear: both; }
.clearfix {*zoom: 1;} //IE6、7专用
</style>
<div class="father1 clearfix">
  <div class="son1">123</div>
  <div class="son2">456</div>
</div>
<div class="father2">789</div>

④使用before和after双伪元素清除浮动

.clearfix:before, .clearfix:after {
    content: "",
    display:table;    /*这句话可以触发bfc，bfc可以清除浮动*/
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom: 1;
}

26.定位（position）：在ccs中，position属性用于定义元素的定位模式

值	描述	是否脱标	是否可以边偏移	移动位置基准
static	自动定位（默认定位方式）	不脱标	不可以	正常模式
relative	相对定位，相对于其原文档流的位置进行定位	不脱标	可以	相对自身位置移动
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位	脱标	可以	相对定位父级移动位置
fixed	固定定位，相对于浏览器窗口进行定位	脱标	可以	相对浏览器移动位置

加了绝对定位的盒子，margin 左右auto 就无效了。

27.叠放次序（z-index）：当多个元素同时设置定位时，定位元素之间有可能发生重叠。

注意：①z-index默认值是0，取值越大，定位元素在层叠元素中越居上。

②如果取值相同，则根据书写顺序，后来居上。

③后面数字一定不能加单位。

④只有相对定位、绝对定位、固定定位由此属性，其余标准流，浮动，静态属性都无此属性，亦可指定其属性。

⑤定位后，元素模式会发生转变，变成行内块模式。跟float类似。

28.元素的显示与隐藏

①display

display:none; //隐藏元素，隐藏之后不保留位置，但元素一直存在

display:block; //显示元素

②visibility

visibility: hidden; //隐藏元素，但是保留位置

visibility: visible; //显示元素

③overflow

visibile：不剪切内容也不添加滚动条

auto：超出自动显示滚动条，不超出不显示滚动条

hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll：不管超出内容是否，总是显示滚动条

!important 属性:用来提升属性的权重。其属性的权重为无穷大。

!important提升的是属性的权重，不是选择器的权重。

语法格式：属性：值 !important;

color: #f00 important;

}

30.样式冲突：如果一个标签内的多个类名设置的样式一样的话，就会出现样式冲突，那么是以css中的代码作为标准，谁写在后面就以谁作为标准，与html位置无关。

<style>
.cls2 {
    color: "red";
}
.cls1 {
    color: "white"    ;
}
</style>
<body>
    <p class="cls1 cls2">我是皮皮虾</p>            // 会显示为红色
</body>

CSS高级技巧：

1.鼠标样式：cursor：pointer || default || move || text || default

2.轮廓：outline：outline-color | outline-style | outline-width

outline: 0; 或者 outline: none; //取消轮廓线

3.防止文本域拖拽： resize：none；

4.垂直对齐：vertical-align：baseline || middle || top || bottom ；

注意：对于块级元素无效，只针对于行内元素或行内块元素，通常用来控制图片和表单与文字的对齐。

css:

textarea{
    height: 300px;
    width: 200px;
    vertical-align: top;
}

html:

用户留言：<textarea></textarea>

5.去除图片底侧空白缝隙：低版本浏览器会出现这种情况

有个很重要的特性，图片或者表单等行内块元素，他的底线会和父盒子的基线对齐，这样会造成一个问题，就是图片底部会有一个空白缝隙。

解决办法：1.给img vertical-align：middle | top ；等等，让图片不要和基线对齐。2.给img添加属性display：block；

6.溢出的文字隐藏：

①word-break ：自动换行（主要处理英文单词）

normal：默认换行规则

break-all：允许在单词内换行

keep-all：只能在半角空格或连字符处换行

②white-space：

normal：默认处理方式

nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

③text-overflow：文字溢出

text-overflow：clip || ellipse；

clip：不显示省略标记（...），而是简单的剪切

ellipse：当对象内文本溢出时显示省略标记。

注意：一定要首先强制一行内显示，再次和overflow属性搭配使用。overflow：hidden；

7.精灵图（sprite）:一般只用于背景小图

div{
    width: 17px;
    height: 13px;
    background: url(images/jd.png) no-repeat;
    backgroud-position: 0 -388px;    //背景图片往上移动所以是负值
}

8.字体图标

字体图标网站：icomoon.io

selection.json可以追加新图标

9.滑动门：就是利用css精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同字数的导航栏。

css:

a{
    display:inline-block;
    height: 33px;     //千万不能给宽度
    background: url(image/logo.png) no-reapeat;
    padding-left: 15px;
}
a span{
    height: 33px;
    display: inline-block;
    padding-right: 15px;
    background: url(image/logo.png) no-reapeat right;
}

html:

<li>
    <a href="#">
        <span>导航栏内容</span>
    </a>
</li>

总结：①a设置背景左侧，padding撑开盒子宽度。

②span设置背景右侧，padding 撑开合适宽度剩下由文字继续撑开宽度。

③之所以a包含span就是因为整个导航都是可以点击的。

10.过渡：transition：要过渡的属性花费的时间运动曲线何时开始；

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性	3
transition-property	规定应用过渡的CSS属性名称	3
transition-duration	定义过渡效果花费的时间，默认是0	3
transition-timing-function	规定过渡效果的时间曲线，默认是“ease”	3
transition-delay	规定过渡效果何时开始，默认是0	3

css:

div{
    width: 200px;
    height: 100px;
   
    transition: width 0.6s ease 0s, height 0.3s ease-in 1s;            //写在这里的话，鼠标放上去移下来都有效果，卸载hover中的话，鼠标移出就没有效果了。
    transition: all 0.6s;
}
div:hover{
    width: 600px;
    height: 300px;
}

11.2D变形（transform）：可以实现元素的位移、旋转、倾斜、缩放甚至支持矩阵方式，配合过渡和动画，可以取代大量之前的flash效果。

translate（移动）：

div{
    width: 100px;
    height: 100px;
   
    transition: all 0.5s;
}
div:active{
    transform: translate(50px, 50px);
    transform: translateX(50px);    //只移动x轴
    transform: translate(50%);    //走自己宽度的的一半即走50px，并非走浏览器窗口的一半。
}

水平垂直居中：

div{
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

scale（缩放）：

transform: scale(0.8, 1);

transform: scaleX(1);

div{
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 100px auto;
}
div:hover{
    transform: scale(1.2, 1.5);
    transform: scale(2);    //宽度，高度都缩放
}

rotate（旋转）：

div{

transform-origin: left top;

transform: rotate(180deg); //设置旋转点

}

skew（倾斜）:

transform: skew(300deg, 0deg);

12.3D变形（CSS3）transform

rotateX：沿着x立体旋转

img{

transition: all 0.5s ease 0s;

}

img:hover{

transform: rotateX(180deg);

}

透视（perspective）：一般设置给父元素，作用于3 D转换的子元素。

div{

perspective: 500px; //近大远小，数值小更明显

}

可以简写成

transform: translate3d(x, y, z);

backface-visibility：当下元素不面向屏幕时，是否可见

div{

margin: 0;

padding: 0;

background-color: pink;

}

div img{

z-index: 1;

backface-visivility: hidden; //不是正面面向屏幕就隐藏

}

13.动画（CSS3）animation

div{
    height:100px;
    width:100px;
    background-color: pink;
    animation: go 2s ease 3 infint;
}
@keyframes go {
    from{
        transform: translateX(0);
    }
    to {
    transform: translateX(600px);
    }
}

@keyframes go{
    0% {
        transfrom: translate3d(0,0,0);
    }
    25%{
        transform: translate3d(800px, 0 , 0);
    }
    50% {
        transform: translate3d(800px, 400px, 0);
    }
    75% {
        transform: translate3d(0, 400px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

汽车来回跑动小动画demo：

<style>
img{
    animation: car 5s;
}
@keyframes car{
    0%{
        transform: translate3d(0,0,0);
    }
    50%{
        transform: translate3d(1000px,0,0);
    }
    51%{
        transform: translate3d(0,0,0) rotate(180deg);    //如果有多组变形，都属于transform那我们用空格隔开就好
    }    
    100%{
        transform: translate3d(0,0,0， rotate(180deg));
    }
}
</style>
<html>
　　<body>
　　　　<img src="image/1.jpg" width="100px" />

　　</body>

</html>

图片无缝滚动demo：

<style>
*{
    padding:0;
    margin: 0;
}
ul{
    list-style: none;
}
nav{
    width: 882px;
    height: 86px;
    border: 1px solid #000;
    margin: 0 auto;
    overflow: hidden;
}
nav li{
    float: left;
}
nav ul{
    animation: moving 5s linear infinite;
}
nav:hover{
    animation-play-state: paused;         //鼠标放上去暂停动画
}
@keyframes moving {
from { transform: translateX(0);}
to{transform: translateX(-882px);}
}
</style>
<nav>
    <ul>
        <li><img src="images/1.kpg" ></li>
        <li><img src="images/2.kpg" ></li>
        <li><img src="images/3.kpg" ></li>
        <li><img src="images/4.kpg" ></li>
        <li><img src="images/5.kpg" ></li>
    </ul>
</nav>

14.伸缩布局

主轴：flex容器的主轴主要是用来配置flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

<style>

section{

80%;

height:200px;

border: 1px solid pink;

margin: 100px auto;

display: flex;

min- 500px; //最小宽度

}

section div{

height: 100%;

}

section div:nth-child(1){

flex: 1;

}

section div:nth-child(2){

flex: 2;

}

section div:nth-child(3){

background-color: pink;

flex: 3;

}

</style>

</setction>

①属性：justify-content：调整主轴对齐（水平对齐）

值	描述	白话文
flex-start	默认值，项目位于容器的开头。让子元素从父容器的开头排序	让子元素从父容器的开头排序
flex-end	项目位于容器的结尾	让子元素从父容器的后面开始排序
center	项目位于容器的中心	让子元素在父容器的中间显示
space-between	项目位于各行之间留有空白的容器内	左右的盒子贴近父盒子，中间的平均分布空白间距
space-around	项目位于各行之前、之间、之后都留有空白的容器内	相当于给每个盒子添加了左右margin 边框

②属性：align-items：调整侧轴对齐（单行，垂直对齐）

值	描述	白话文
stretch	默认值，项目被拉伸以适应容器	让子元素的高度拉伸适用父容器（子元素不给高度的前提下）
center	项目位于容器的中心	垂直居中
flex-start	项目位于容器的开头	垂直对齐开始位置
flex-end	项目位于容器的结尾	垂直对齐结束位置

③属性：flex-wrap：控制是否换行

值	描述
nowrap	默认值，规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示。强制一行显示
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

④属性align-content 堆栈（由flex-wrap产生的独立行）对齐：针对flex容器里面多轴（多行）的情况，align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex; ，并且设置排列方式为横向排列 flex-direction:row; ，并且设置换行，flex-wrap: wrap; 这样这个属性才能起作用。

值	描述
stretch	默认值，项目被拉伸以适应容器
center	项目位于容器的中心
flex-start	项目位于容器的开头
flex-end	项目位于容器的结尾
space-between	项目位于各行之间留有空白的容器内
space-around	项目位于各行之前、之间、之后都留有空白的容器内

ps：flex-flow ：row wrap；=== （flex-direction： row； flex-wrap： wrap；）

⑤属性：order：控制子项目的排列顺序，正序方式排列，从小到大

用css来控制盒子的前后顺序，默认是0

div{

background: pink;

order: 1;

}

------内容来自于多年前自己的学习笔记