CSS 02:提升

一.盒子模型

1.边框

边框有大小和样式后，才会有颜色

div {
      height: 200px;
      width: 200px;
      background-color: skyblue;
      /*边框 大小 样式 颜色*/
      /*border: 10px solid teal;*/
      /*颜色*/
      border-color: green;
      /*大小*/
      border-width:10px;
      /*样式*/
      border-style: dashed;
      /*上边框*/
      border-top: 5px solid red;
      /*左边框*/
      border-left:5px solid green;
      /*有边框*/
      border-right:5px solid darkgray;
      /*下边框*/
      border-bottom:5px sol purple;id
      /*边框弧度*/
      border-radius: 20px;
      }

（1）上下左右边框颜色

{
    /*上边框*/
    border-top: 5px solid red;
    /*左边框*/
    border-left:5px solid green;
    /*有边框*/
    border-right:5px solid darkgray;
    /*下边框*/
    border-bottom:5px solid purple;
}

（2）边框弧度

边框弧度如果设定为 50% 则是一个圆形

{
     /*边框弧度*/
     border-radius: 20px;
}

{
	border-radius: 50%;
}

2.内边距（padding）

<style>
         div {
             height: 200px;
             width: 200px;
             background-color: skyblue;
             border: 5px solid green;
             /*内边距*/
             padding: 20px;
             /*上内边距*/
             padding-top: 20px;
             /*右内边距*/
             padding-right: 20px;
             /*左内边距*/
             padding-left: 20px;
             /*下内边距*/
             padding-bottom: 20px;
            }
    </style>

如果 padding 后有一个参数，则表示上下左右

如果 padding 后有两个参数，则表示上下，左右

如果 padding 后有三个参数，则表示上，左右，下

如果 padding 后有四个参数，则表示上，右，下，左

3.外边距（margin）

外边距同上，两个盒子的距离取外边框较大的一方

<style>
        .div1 {
            height: 200px;
            width: 200px;
            background-color: skyblue;
            /*边框*/
            border: 5px solid green;
            /*内边距*/
            padding: 20px;
            /*外边距*/
            margin-top: 50px;
            margin-right: 50px;
            margin-left: 50px;
            margin-bottom: 50px;
        }
        
    </style>

二.CSS 浮动

浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流。

例如，有不同颜色的盒子排列成一行，令其中一个盒子悬浮，就会使排列在它之后的盒子向前移动。而从上帝视角看，移动到悬浮盒子之下的盒子就会被悬浮的盒子遮住，从而看不到下面的盒子。

1.浮动（ float ）

加上浮动后，盒子由块级元素变为内敛块级元素

（1）向左浮（left）

.div1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .div2 {
            height: 100px;
            width: 100px;
            background-color: black;
        }
        .div3 {
            height: 100px;
            width: 100px;
            background-color: green;
        }

因为第一个盒子浮动，第二个盒子向前进补位，以至于看不到第二个盒子，只能看到第一个和第三个。

（2）向右浮（ right ）

.div1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: right;
        }
        .div2 {
            height: 100px;
            width: 100px;
            background-color: black;
            float: right;

        }
        .div3 {
            height: 100px;
            width: 100px;
            background-color: green;
            
        }

2.浮动坍塌

父元素不设置高度的情况下，靠子元素撑起的高度；当所有子元素都浮动的情况下，子元素脱离文档流，父元素没有高度

3.解决高度坍塌问题

（1）给父元素加高度

但因为给父元素加了高度后，之后再添加元素就会产生限制，所有不可取。

.box {
            height: 400px;
            width: 400px;
        }

（2）超出部分隐藏（overflow）

overflow: hidden;

（3）加一个空盒子撑起高度

.div5 {
            height: 100px;
        }

（4）加伪元素

默认伪元素为行内元素

/*伪元素 默认加伪元素是行内元素*/
        .box:after {
            display: block;
            content: '';
            clear: both;
        }

display 是转化为块级元素
content 是测试内容
clear 是清空浮动

三.CSS 定位

1.静态定位（static）

	/*静态定位*/
	position: static;
	/*偏移量 上下左右*/
	top: 100px;

2.相对定位（ relative ）

    /*相对定位 : 以本身之前的位置做参照*/
    position: relative;
    /*偏移量 上下左右*/
    left: 50px;
    bottom: 50px;

3.绝对定位（ absolute ）

进行绝对定位的元素会脱离文档流

	/*绝对定位*/
    position: absolute;
    top:50px;
    left:30px;

4.固定定位（ fixed ）

元素进行固定定位后，无论别的元素怎么移动，固定定位的元素都不会改变位置。（例如小说页面的小广告）

/*固定定位*/
            position: fixed;
            top:50px;
            left:50px;

四.层级

当几个盒子重叠时，为盒子设置层级，即可在上层显示。

li {
            width: 100px;
            height: 100px;
            list-style: none;
        }
        .li1 {
            background-color: red;
            position: absolute;
            z-index: 2;
        }
        .li2 {
            background-color: purple;
            position: absolute;
            z-index: 3;
        }
        .li3 {
            background-color: green;
            position: absolute;
            z-index: 4;
        }

因为在以上图片中，li3 层级最高，所有会优先显示 li3 盒子。

附（今日份学习）：




浮动：



静态定位：

相对定位：

绝对定位：


固定定位：

层级：