前端基础——CSS 列表、背景、盒子模型、浮动、定位和z-index

列表样式

• 可以更改列表中点的样式或者去掉点
  复习之前内容

#nav{
            width: 300px;
        }
        .title{
            font-size: 18px;
            font-weight: bold;
            text-indent: 1em;
            line-height: 35px;
        }
        ul li{
            height: 30px;
            /*列表的点
             none：去除 
             circle：空心圆
              decimal：数字123. 
              square正方形*/
            list-style: none;
            text-indent: 1em;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            color: orange;
            text-decoration: underline;
        }

背景

• 背景颜色、图片
• 渐变背景

 div{
         width: 1000px;
         height: 700px;
         border: 1px solid red;
         /*设置背景：默认为平铺*/
         background: image("xxx/xxx.jpg");
         /*横向平铺和纵向平铺不平铺*/
         background-repeat: repeat-x;
         background-repeat: repeat-y;
         background-repeat: no-repeat;
       /* 放置no—repeat的图片的位置*/
         background-position: 200px 500px;
     }

• Grabient是一个在GitHub上开源的项目，可以获取各种渐变背景的CSS代码。

盒子模型

• 元素大小=margi+border+padding+内容

• 盒子模型
  
  margin：外边距
  padding：内边距
  border：边框

• border

• 在最上方选择body标签可以进行边距、字体等的初始化

/*body是自带默认边距的，设置边距为0 初始化*/
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        from{
            background: blue;
        }
        #box{
            /*border:粗细，样式，颜色*/
            width: 300px;
            border: 1px solid red;
            /*外边距*/
            padding: 0;
        }
        /*结构伪类选择器搭配子类选择器*/
        /*border: solid实线，dashed虚线*/
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed black;
        }
        div:nth-of-type(3) input{
            border: 3px dashed black;
        }

• margin&padding
• 可以用来居中

    #box{
            /*可以是1、2、4个参数，1个参数代表上下左右边距一样
            2个参数则分别为上下、左右边距，4个分别为上、下、左、右
            auto即可设置自动居中 也可使用margin-xxx分别单独设置上下左右属性*/
            /* 要求：块元素  且块元素有固定的宽度*/
            margin: 0 auto;
        }

• 圆角边框
• 实现按钮等元素的圆角
• 绘制圆形扇形

	div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        /*边框圆角大小：一个参数则四个角相等
        两个参数则左上右下一样，剩下两个一样
        四个参数则从左上开始顺时针*/
        border-radius: 50px 20px 10px 5px;
        /*可以用来画圆，当圆角大小大于（高宽的一半加上边框粗细）就是圆*/
        border-radius: 60px;
        /*扇形需要三个角为0，另一个圆角大小为（两倍边框粗细加上div的边长）*/
        
    }
    img{
    border-radius: 25px;   /* 改变图片轮廓形状（头像）*/
}

• 盒子阴影

div{
         width: 100px;
         height: 100px;
         border: 10px solid red;
         box-shadow: 10px 10px 100px yellow;

浮动

• 块级元素：独占一行 h1~h6 p div 列表…

• 行内元素：不独占行 span a img strong…

• 行内元素可以被包含在块级元素中，反之则不可以。

• display和float

 div{
            width: 100px;
            height: 100px;
            border: 1px red;
            /*display: xxx; inline:变为行内元素 block：变为块元素
             inline-block 块元素但是可以内联，在一行*/
            display: inline;
            /*浮动：float 左右浮动*/
            float: right;
            /*clear：不允许有浮动元素 both：两侧 right、lefe：左、右
            none 默认 允许*/
            clear: right;
         }

• 父级边框塌陷问题
  • 增加父级元素的高度：固定了父元素高度，就会被限制
  • 在父级元素内最底部增加一个空的div块，清除两侧浮动：简单，但代码中应该尽量避免空div
  • 在父类添加一个伪类：稍微复杂，没有副作用，推荐使用

  #father{
            border: 1px #000 solid;
            height: 800;
        }

  .clear{
            padding: 0;
            margin: 0;
            clear: both;
        }

#father:after{
            content: '';
            display: block;
            clear: both;
        }

• overflow
  • 如果块内内容大小超过了块所规定的大小，可以使用overflow来控制隐藏超出部分或者添加块内滚动条。
  • 其中overflow：hidden；放在父元素中，可以用来解决父级边框塌陷的问题。但是下拉的一些场景避免使用。

  #content{
            width: 200px;
            height: 100px;
            /*overflow: ; hidden:超出部分隐藏 scroll：滚动条*/
            overflow: hidden;
        }

定位

相对定位

 - 相对定位：position: relative;
 -  相对于自己原来的位置进行指定的偏移，但是，在标准文档流中，仍然处在原来的位置不变（比如说最后一个div进行向下的偏移，并不会使得父级元素的大小向下扩展）

   div{
            /*相对于自己原来的位置移动*/
            position: relative;
            /*上下左右移动*/
            top: -20px;
        }

绝对定位

定位：基于xxx定位，上下左右

• 若没有父级元素定位，基于浏览器定位
• 如果父级元素有绝对或者相对定位，则基于父元素定位
• 在标准文档流中，原来的位置会被改变

div{
        position: absolute;
        right: 100px;
    }

固定定位

• fixed：相对于窗口定位

  div{
            /*固定定位fixed*/
            position: fixed;
            bottom: 300px;
            left: 50px;
        }

z-index

• 图层堆叠

    div{
            /*设置图层，默认是0，在最底层*/
            z-index: 10;
            /*设置透明度 此下两句等价*/
            opacity: 0.5;
            filter: alpha(opacity=50);
        }