CSS：布局与样式

1. 引用方式

<!-- 内联式 -->
<p style="color: red; font-size: 30px;">我是内联样式的方案</p>

<!-- 内部样式 -->
<style>
    p {
        color: red;
        font-size: 30px;
    }
</style>

<!-- 外部样式 -->
<link rel="stylesheet"  href="url">

2. 选择器

常见选择器特异性：ID 高于类，类高于元素；完整层叠还受来源、重要性、层叠层和声明顺序影响。

3. 字体属性

颜色：color:red|#ff0000|rgb(255,0,0)|rgba(255,0,0,0.5);
文本大小：font-size:20px;
文本的粗细：font-weight:bold(粗体)|bolder(更粗)|lighter(更细)|100-900;
字体样式：font-style:normal(默认)|italic(斜体字)
字体：font-family:"Microsoft YaHei","Simsun","SimHei";

4. 背景属性

背景颜色：background-color:red;
背景图片：background-image:url("xxx.jpg");
背景图片显示位置：background-position:left(左中右) top(上中下);
背景图片如何填充：background-repeat:repeat(默认)|repeat-x(水平平铺)|repeat-y(垂直平铺)|no-repeat(不平铺);
背景图片大小：background-size:100px(宽) 100px(高)|cover(充满裁剪，保持横纵比)|contain(显示完整，保持横纵比);

5. 文本属性

对齐方式：text-align:left|center|right;
文本修饰：text-decoration:underline(下划线)|overline(上划线)|line-through(删除线)
文本大小写控制：text-transform:capitalize(单词开头大写)|uppercase(全部大写)|lowercase(全部小写);
文本缩进：text-indent:20px;

6. 表格属性

边框：border:10px(边框大小) solid(边框线样式) red(线颜色);
折叠边框：border-collapse:collapse;
宽和高：width,height
文字水平对齐：text-align:left|center|right
文字垂直对齐：vertical-align:top|middle|bottom;
表格填充：padding:30px;
背景颜色：background-color:red;
文本颜色：color:red;

7. 关系选择器

后代选择器：E F{}	(选择所有被E元素包含的F元素)
ul li{
    color:red;
}
子代选择器：E>F{} (选择所有作为E元素的直接子元素F，对更深一层的元素不起作用)
div>a{
    color:red;
}
相邻兄弟选择器：E+F{} (选择相邻的第一个兄弟元素，向下)
h1+p{
    color:red;
}
通用兄弟选择器：E~F{} (选择E元素之后的所有F元素,作用多个)
h1~p{
    color:red;
}

8. 盒子模型

外边距：margin 边框：border 内边距：padding 实际内容：content
参数：上下左右;
参数：上下 左右;
分开表示:margin-top|bottom|left|right:20px;

9. 弹性盒模型

概念：弹性容器通过设置display属性的值为flex将其定义为弹性容器

<style>
    /* 父元素上的属性 */
    .container{
        width: 400px;
        height: 400px;
        background-color: gray;
        /* 容器里开启弹性盒 */
        display: flex;
        /* 定义子元素在父容器中的位置：row(左对齐)|row-reverse(反转横向对齐)|column(纵向排列)|column-reverse(反转纵向排序) */
        flex-direction: row-reverse;
        /* 主轴对齐：justify-content:flex-start|flex-end|center，主轴方向由 flex-direction 决定 */
        justify-content: flex-start;
        /* 交叉轴对齐：align-items:flex-start|flex-end|center */
        align-items:flex-end;
    }
    /* 子元素上的属性 */
    .box1{
        width: 100px;
        height: 100px;
        background-color: green;
        /* flex(按比率分配空间) */
        flex: 2;
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: blue;
         /* flex(按比率分配空间) */
        flex: 1;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
         /* flex(按比率分配空间) */
        flex: 1;
    }
</style>

<div class="container">
    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

</div>

10. 文档流

概念：文档流是文档中可显示对象在排列时所占用的位置或空间影响：高矮不齐，底边对齐

脱离文档流三种方式：浮动、绝对定位、固定定位

1.浮动
    属性 float：left|right; 使元素变成左右方向浮动，增加层级，脱离文档流
2.定位
    属性 position:relative(相对定位)|absolute(绝对定位)|fixed(固定定位)
    提示：设置定位之后，relative 相对自身原位置偏移；absolute 相对包含块定位，常见包含块来自最近的定位祖先
    与left、right、top、bottom相结合
    相对定位
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        left: 100px;
    }
    绝对定位
     .box4 {
            width: 400px;
            height: 400px;
            background-color: blue;
        position: relative;
        }
    .box5 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 100px;
        top: 100px;
    }
     <div class="box4">
        <div class="box5"></div>

    </div>

    固定定位：固定在页面的某位置后不应页面滚动而改变
    .box6 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            right: 100px;
            bottom: 100px;
        }
3.层级堆叠顺序
属性 Z-index:1;

浮动副作用：浮动元素会造成父元素高度塌陷，后续元素受到影响

清除浮动

1.父元素设置高度
2.受影响的元素添加clear属性
    clear:both;
3.overflow清除浮动(父级塌陷，并且同级元素也受到影响，不能设置高度)
    父级标签样式添加：overflow:hidden;
4.伪对象方式

11. CSS3新特性

1.圆角属性：border-radius
    参数(4)：左上 右上 右下 左下;(顺时针设置数值)
    参数(3)：左上 右上左下 右下
    参数(2)：左上右下 右上左下
    参数(1)：四个角值相同
2.阴影属性：box-shadow:h-shadow(必选，水平位置) v-shadow(必选，垂直) blur(可选，模糊距离) color(可选，阴影颜色)

12. 动画

概念：使元素从一种样式逐渐变化为另一种样式的效果，用百分比规定变化发生的时间0%开始到100%结束（或用 from、to 关键字）

@keyframes(创建动画) name {
        0%{css样式}
        50%{css样式}
        100%{css样式}
    }
属性 animation(执行动画):name(动画名称) duration(动画持续时间) timing-function(动画效果速率) delay(开始时间延时执行) iteration-count(动画循环次数，infinite无限) direction(动画播放方向);
    timing-function(动画效果速率)参数值：ease(默认)|linear(匀速)|ease-in(加速)|ease-out(减速)|ease-in-out(先加后减)
    direction(动画播放方向)参数值:normal(默认向前)|alternate(首轮正向，之后交替反向和正向)
属性 animation-play-state(播放状态):running(播放)|paused(停止)
.box7 {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: test 3s linear 0s infinite;
}
@keyframes test {
    0%{
        background-color: red;
    }
    50%{
        background-color: blue;
    }
    100%{
        background-color: green;
    }
}
鼠标移上去就暂停
div:hover{
    animation-play-state:paused;
}

13.媒体查询

概念：能使页面在不同设备比例下达到不同的效果

在<head>标签里添加<meta>标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
参数解释
1.width=device-width:宽度等于当前设备的宽度
2.initial-scale：初始的缩放比例，默认为1
3.maximum-scale：限制最大缩放比例；通常不设置，保留用户缩放能力
4.user-scalable：用户是否可以手动缩放
媒体查询语法
    /* 手机设备 */
    @media screen and (max-width:768px) {
        body{
            background-color: red;
        }
    }
    /* 平板设备 */
    @media screen and (min-width:769px) and (max-width:992px) {
        body{
            background-color: blue;
        }
    }
    /* 电脑设备 */
    @media screen and (min-width:992px) {
        body{
            background-color: green;
        }
    }

14. CSS Sprite(CSS精灵图)

.span1 {
    display: block;
    width: 125px;
    height: 140px;
    background-image: url(2.jpg);
    border: 1px solid red;
    background-position: -126px 0px;
}

.span2 {
    width: 125px;
    height: 140px;
    display: block;
    background-image: url(2.jpg);
    background-position: -126px -141px;
}
<span class="span1"></span>

<span class="span2"></span>