WEB前端demo5

结构伪类构造器

1.li标签单行设置样式

设置li列表的第一列样式，用first-child

li:first-child{

    color: aqua;

}

设置li列表的最后一列样式，用last-child

li:last-child{

    color: red;

}

设置li列表，第n行样式，

li:nth-child(2){

    background-color: yellow;

}

2.li标签多行设置样式

按照一下规则，设置多行样式。

li:nth-child(填入信息)

注意:n从0开始循环

  /* n从0开始循环 */

/* 偶数  2n */

/* 奇数2n+1 */

/* 找到5的倍数  5n */

/* 找到第五个后的标签  n+5 */

/* 找到第五个前的标签  */

li:nth-child(-n+5){

   background-color: yellowgreen;

}

3.伪元素选择器

(添加装饰性作用)

div{

    width: 100px;

    height: 100px;

    background-color: pink;

}

div::before{

    /* 宽度，高度不生效，宽度高度由内容扩展 */

    content: "<";

    display: block;

    width: 20px;

    height: 20px;

    background-color: #fff;

}

div::after{

    /* 必须设置content 属性，没有 content，伪元素选择器不生效 */

    content: ">";

}

盒子模型

1.盒子模型属性:

宽度

高度

背景色

背景图(背景图位置，平铺，缩放背景图，固定)

边框线属性(border):宽度，边线样式(虚线 实线 点线) 颜色

内边距属性(padding):宽度

外边距属性(margin):宽度

2.样式

外边距 内边距都可以单独设置四个方向属性

eg:内边距盒子内部上方

padding-top

padding-right

padding-bottom

padding-left

边线样式

eg: border-top

其他样式参考上边

外边距样式

eg: margin-top

4.复合样式(对margin padding border均适用)

 /* 内边距四个方向均为 */

 padding: 10px ;

/* 内边距  上下   左右 */

padding: 10px 10px;

/* 内边距  上  左右  下 */

padding: 10px 10px 10px;

/* 内边距 上  下  左  右 */

padding: 10px 10px 10px  10px;

5.注意以上操作(除了margin外边距)会撑大盒子，

所以一般用内减模式。

即:

*{

           box-sizing: border-box;

｝

6.圆角样式

border-radius

 div{

        width: 900px;

        height: 40px;

        background-color: pink;



        margin: 50px    auto;

        border: 1px solid  black;

        padding-top: 20px;

        padding-left: 20px;

        /* border-radius: 20px; */

        /* 从左上角顺时针转圈,

        没有取值的角与对角取值一样 */

        border-radius: 10px 10px;

    }

    img{

        border-radius: 10px;

    }

7.阴影效果

background-shadow

        div{

            margin: 50px auto;

            width: 100px;

            height: 100px;

            background-color: pink;

            /* x轴偏移量  y轴偏移量  模糊半径  扩散半径  颜色  内外阴影 */

            /* x y 必须写。

            默认外阴影。内阴影需添加insert */

            box-shadow: 2px 5px  10px 1px wheat  ;
            /* box-shadow: 2px 5px  10px 1px wheat   inset; */
        }

版心居中

在设置web样式时，常在网页中心显示

   div{

        width: 200px;

        height: 200px;

        background-color: pink;

        /* margin不会撑大盒子

        其他效果与padding类似 */

        /* 版心居中 */

        /* 要求:盒子要有宽度 */

        margin: 0px auto;

    }

用margin 左右宽度 auto

自动调整居中效果

清楚默认样式

一般系统自带的标签会有自带的属性，会影响代码书写

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

/* 去掉项目符号 */

li{

    list-style: none;

}

   

元素溢出

1.当元素内容溢出盒子时，有三种样式

div{

    width: 200px;

    height: 200px;

    background-color: pink;



    /* 元素溢出 */

    /* hidden  溢出隐藏 */

    /* scroll 溢出滚动  无论是否溢出,都显示动条 */

    /* auto 溢出滚动  溢出才显示滚动条位置 */

    overflow: hidden;

}

外边距合并与塌陷问题

1.当连续两行用外边距，设置不同外边距。

他们之间间距取得最大值。

比如第一行下外边距50，第二行上外边距30。则他们之间的间距为50，而不是80。

2.外塌陷问题

   <style>

        /* 父子级标签，子级的添加 上外边距会产生塌陷 */

        .father{

            width: 300px;

            height: 300px;

            background-color: pink;

             /*1.  推荐 规避问题 */

            /* 取消子级margin，，，父级设置padding */

            /* padding: 10px;

            box-sizing: border-box; */

            /* 2.内容溢出会隐藏，，找到父级原始边框位置，裁剪多余位置

            overflow: hidden; */

            /* 3.边框线 ，，，找到父级原始边框位置 裁剪多余位置*/

            border-top: 1px solid #000;

        }

        .son{

            width: 100px;

            height: 100px;

            background-color: orange;

            margin-top: 20px;

        ｝

    </style>

行内元素添加padding 和margin属性，无法生效。