前端三剑客之css 后续

补充小点：
    队列去除自带的样式：
        在样式里通过 list-style-type 来设定


ol {
            list-style-type: none;
        }


 ul {
            list-style-type: none;
        }

1、盒子模型

存在四个参数：
    margin:用于控制元素与元素之间的距离
    padding:用于控制内容与边框之间的距离
    border:围绕在内边距和内容外的边框
    content:盒子的内容，显示文本和图像


1.1 margin

.c1 {
      margin-top:5px;
      margin-right:5px;
      margin-bottom:5px;
      margin-left:5px;
    }

推荐简写： .c1 {margin: 5px 5px 5px 5px;}

顺序：上右下左

居中快捷方式：      .c1 { margin:0 auto;}

注：  0是上下， auto是左右   ， 达到元素处在左右居中的效果。

.c1 {margin:auto auto;}   这一步却无法达到上下左右都居中的效果，只是左右居中！



1.2 padding
同样存在四个方位：

.c2 {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

简写：  .c2 {padding :5px 10px 15px 20px}
顺序：上右下左

常用的简写方式：
   提供一个，用于四边；
   提供两个，第一个用于上－下，第二个用于左－右；
   如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
   提供四个参数值，将按上－右－下－左的顺序作用于四边； 

困惑点：

 <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin-left: 0;
            margin-top: 0;
            font-size: 20px;
            color: mediumorchid;
        }
        .c1 {
            border: 4px solid lightpink;
             200px;
            height: 200px;
        }
        .c2 {
            /*padding: 10px;*/
            
            margin: 46px auto;
            border: 4px solid  blue;
             100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">div2</div>
</div>
</body>
</html>


当改变内容与边框的距离时，即解注 padding: 10px;   发现边框也随之改变  ？？？

2、float  浮动

在 CSS 中，任何元素都可以浮动。且该元素浮动后，会生成一个块级框。
浮动的特点：
    浮动的框可以选择向左或右移动，直到其外边框碰到包含框或另外一个浮动框的边框为止
    浮动框不在文档的普通流中。 因为不在普通的文档流里，会导致后面的标签去占据其空间！

三种取值：
    float: left;  左浮
    float:right;右浮
    float: none; 默认值，不浮动

浮动会带来父标签的塌陷问题

塌陷的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            margin: 0 ;
        }
        #i1 {
            border: 10px solid #000000;
        }
        .c1 {
             50px;
            height: 50px;
            background-color: dodgerblue;
            float: left;
        }
        .c2 {
             50px;
            height: 50px;
            background: mediumseagreen;
            float: left;
        }
        .c3 {
            border: 4px dotted ;
             50px;
            height: 50px;
            background-color: #6f453e;
        }
    </style>


</head>
<body>
<div id="i1">
    <div class="c1"></div>
    <div class="c2"></div>
<!--    <div class="c3"></div>-->
</div>
</body>
</html>

　　解决的方案

方案一：固定高度

即在id=i1 的div 标签内在定义一个div元素即可

<div id="i1">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</div>

方案二： 伪元素清楚法   推荐使用

<style>

.clearfix： after {
            content: '';
            display: block;
            clear: both;
        }

</style>

<body>
<div class="c clearfix" >
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>


即:在定义一个类 clearfix,继承它就行    clearfix的写法是通用的

3、溢出

注：只出现在块级标签内

overflow:visible;  默认值，不修剪
overflow:hidden;  隐藏多出的内容
overflow:scroll; 内容被修剪，滚动条
overflow:auto; 内容被修剪，滚动条
overflow:inherit  规定从父元素继承overfloat的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border: 4px solid pink;
            width:400px;
            height: 400px;
            border-radius: 50%;
            overflow: hidden;
            background-color: darkcyan;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="https://i02piccdn.sogoucdn.com/325e119a756ef059" alt="">
</div>
</body>
</html>

美眉圆形头像示例

4、定位 position

position: static;       默认值 无定位
position: relative;     相对定位
position: absolute;    绝对定位
position: fixed;         固定


relative:
  相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。


absolute:
  定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

  重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

  另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
  

fixed:
  fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
    在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
    

    脱离文档流与否：
        脱离：
              绝对定位
              固定定位
        不脱离：
              相对定位

　5、设置对象的层叠顺序 z-index

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用


.c1 {z-index；999；}

6、rgba 与 opacity

rgba 是背景颜色的透明效果从0到1 逐渐增强；

opacity是背景，字体都透明，从0到1逐渐增强。

浮动、定位导致的不在文档流情况图示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
             30%;
            background-color:lightpink ;
            height: 60px;
            float: left;
        }
        .c2 {
             40%;
            background-color: #4cae4c;
            height: 100px;
        }
    </style>
</head>
<body>

<div class="container">

    <div class="c1">hah</div>
    <div class="c2">enen</div>
</div>
</body>
</html>