HTML——CSS的基础语法2

一、盒模型

1-1、什么是盒模型？

HTML5盒模型包括：内容(content)、填充(padding、也叫做内边距)、边框(border)、边界(margin，也叫做外边距)。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

（来自百度百科，本人稍做修改，如图：）

1-2、margin 外边距

1、只写一个值:表示四周的外边距均为指定的值；
2、写两个值：第一个数为上下外边距 第二个数为左右外边距；
3、写三个值：分别表示上、右、下三个方向，左边默认等于右边；
4、写四个值：表示上、右、下、左四条边顺时针方向；
 5、margin：0 auto;设置块级元素，在父容器中水平局中！

1-3、padding 内边距

设置方式：与margin完全相同

注意：设置padding将会导致div区域被撑大！使用时必须注意div实际的宽高为多少。

1-4、border 边框

1、设置边框需要三个属性：宽度 样式 颜色
原则上三个元素缺一不可，顺序可以随便更改；
2、可以使用top、right、bottem、left分别设置四个边

如：

#div{
　　width: 200px;
　　height: 200px;
　　background-color: red;

　　margin: 0 auto;

　　border: 10px dotted #0000FF;
}

div网页局中显示、蓝色虚线边框：

[border-radius 圆角]

1、border-radius可以接受8个属性值，分别表示：
 X轴（左上、右上、右下、左下）/Y轴（左上、右上、右下、左下）

如：

border-radius:10px 20px 30px 40px/10px 20px 30px 40px;

2、缩写形式：
只写X轴，Y轴默认等于X轴
 四个角写不全，默认对角相等
只写一个值，默认8个数均等

如：

boeder-radius:50px 20px;

或者

border-radius:50px 20px 50px 20px;

或者

border-radius:50px 20px 50px 20px/50px 20px 50px 20px;

3、当圆角弧度>=正方形长一半，将会显示为圆形。

[border-image 图片边框]

1、bordre-image:一共可以放10个属性值：
①图片的路径：url();
 ②图片的切片宽度：4个值，分别代表上、右、下、左四条边；
 通过4条切线分割，可以将图片分为9宫格。9宫格四个角分别对应边框的四个角（不会进行任何拉伸），
 9宫格四个边分别对应四条边框（会根据设置进行拉伸/铺完/重复等动作）
注意：写的时候必须不能带px单位！！！！！！
③边框的宽度：4个只分别代表上右下左四条边框的宽度
注意：写的时候，必须带px单位，与切片宽度用/分割！！！
④边框的重复方式：stretch（拉伸）、round（铺满）、repeat（重复）

[round和repeat的区别]
round：会对4条边进行适当的拉伸压缩，确保四条边可以重复整数次；
rapeat：会保持每条变的长度比例不变，可能导致四角处，无法显示一条完整的边；

2、属性值的写法： border-image：① ②/③px ④

如：

-webkit-border-image: url(img/border.png) 27/27px repeat;

3、border-image在webkit内核的浏览器后中，把你需带-webkit-前缀 。

---

*小问题*

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

---

[box-shadow 盒子阴影]

1、6个属性值，用空格分隔：
①X轴阴影距离（必选）：可正可负，左负右正；
 ②Y轴阴影距离（必选）：可正可负，上负下正；
③阴影模糊半径（可选）：只能为正数，默认为0.数值越大，阴影越模糊
 ④阴影扩展半径（可选）:可正可负，默认为0.数值增大，阴影扩大，数值减小，阴影减小。
 ⑤阴影颜色（可选）：默认为黑色
 ⑥内外阴影（可选）：默认为外阴影。 inset表示内阴影

---

outline 外围线

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

---

[盒子模型分类]

1、标准盒子（w3c盒子）：我们设置的宽度和高度，仅仅包含content部分；再添加padding或border，会导致盒子变大
2、IE盒子（怪异盒子）：我们设置的宽度和高度，包含content+padding+border；
再添加padding或border，会压缩content区域，但盒子总大小不变；

[手动设置盒子类型]

box-sizing: border-box; 怪异盒子；
 box-sizing: content-box; 标准盒子； 默认效果。

---

二、CSS浮动

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

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

3、由于第二条的原因，可以给受影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响

clear可选值：

left——清除左浮动影响

right——清除右浮动影响

both——同时清楚左右浮动影响（常选）

4、父盒子没有指定高度。如果子盒子 没有浮动，则父盒子的高度可以被子盒子撑开

如果，父盒子中的所有子盒子都浮动，则父盒子高度将变为0；

 [解决所有子盒子浮动，父盒子高度塌陷的问题]
 ①给父盒子也添加浮动
 ②给父盒子也添加overflow属性； 推荐使用！！！overflow: hidden;
 ③在父盒子最后添加一个高度为0的空div，给这个div添加clear：both;属性，清除掉浮动效果
 ④可以将第三条的div，用伪对象选择器::after实现：

　　#div4::after{
        display：block；
        content："";
        height: 0px;
        clear: both;
    }

---

三、CSS定位

3-1、相对定位realative

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，而且只能作用于定位元素。

3-2、绝对定位  absolute

1、使用position：absolute; 设置元素为绝对定位；
2、定位机制：
①相对于第一个非static定位（已经定位）的祖先元素进行定位。
（即，相对于使用了relative、absolute、fixed定位的祖先元素进行定位。）
 ②如果所有的祖先元素都未定位，则相对于浏览器左上角进行定位。
 ③使用absolute的元素会从文档流中完全删除。原有空间会被释放。

3-3、固定定位  fixed

1、使用position：fixed； 设置固定定位；
 固定定位，是一种特殊的绝对定位！！！只是祖先元素无法使用定位锁住
2、定位机制：
 永远相对于浏览器的左上角进行定位，而且不随滚动条的滚动而滚动。

3-4、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；不会约束子元素的层次。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1-1{
                width: 200px;
                height: 200px;
                background-color: red;

                position: relative;
                top: 100px;
                left: 100px;
                right: 200px;
                z-index: -1;
            }
            #div1-2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*position: relative;*/
                /*z-index: 10;*/
            }

            #div1-3{
                width: 200px;
                height: 200px;
                background-color: green;
                position: relative;
                bottom: 200px;
                left: 200px;
                z-index: -2;
            }
    </style>
    </head>

    <body>

        <div id="div1-1">
            这是一个div
        </div>

        <div id="div1-2">
            这是一个div
        </div>

        <div id="div1-3">
            这是一个div
        </div>
        </body>
</html>    

---

四、CSS负边距的使用

4-1、实现块级元素在父容器中水平垂直居中

设置子容器为定位元素；
left：50%； margin-left： -width/2;
top：50%; margin-top: -height/2;

4-2、使用负边距增大元素的宽度

①子容器的宽度不指定；只指定高度，或者由内容撑开高度
②margin：0px -50px; 可以使左右两边，均超出父容器50px；

---

五、CSS新增属性

[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>标签的fongt-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：背景图左上角从边框内缘开始
>>>content-box：背景图左上角从文字内容区域开始

3、background-origin不会改变的背景图显示区域的大小，只是决定背景图的左上角从哪里开始定位
background-clip只负责裁切出显示区域，但是并不关心背景图定位在哪

4、background-attachment：背景图的附着方式
>>>scroll:背景图跟随区域滚动，默认效果
>>>fixed：背景图充满整个区域，并且背景图是固定的，不随滚动条个滚动

5、baccground 缩写形式：
background：background-color background-image background-reapeat background-atachment background-position;

[transition: 过度属性，接受四个属性值]

①设置哪个CSS属性，参与过度；可以直接指定all/none
②过度多少时间完成，通常.3s .5s
③过度的样式效果。通常选ease
④过度延时几秒后再开始。可以省略不写

transition属性可以同时定义多个过渡效果，用逗号隔开

【transform 定义变换属性】
1、常用的变换函数
>>>translate（）， 平移，第二个不写默认为0
>>>scale（）， 缩放，第二个不写，默认等于第一个
>>>rotate（），旋转，默认绕Z轴转，可以使用ratateX（）等
>>>skew（），扭曲，水平、垂直方向扭曲多少度

2、变换transform可以实现多种变换，用空格分隔
transform: skew(20deg) scale(1.5) translate(100px);

3、transform-origin：定义变换起点，常用于旋转变换。
可选值：left/center/right bottom/center/top
也可以直接指定X、Y轴 坐标点，第一个数为X轴

[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表示下一次将逆向播放(100%-0%)
Animation-fill-mode：规定对象动画时间之外的状态。表示动画结束后，停留在何种状态，要使用这个属性，动画的执行次数必须是有限次。
(forwards：表示动画停留在结束状态，backwards：表示动画停留在初始状态，默认效果)

>>>Animation-name和Animation-duration必须要设置，其他的选填
>>>animation可以同时设置多个动画，多个动画动画之间用逗号分隔
　　animation：frame1 1s，frame2 2s……