CSS盒子模型(border、padding、margin设置)、行内块或行内元素水平居中、去除li小圆点、圆角、盒子阴影、文字阴影

1. 盒子模型的组成

1. border边框

    
    test title

    

        div {
            width: 300px;
            height: 300px;
            border: 5px dotted red;
            border-right: 10px dashed yellow;
        }



    



盒子一

参数说明如下：

• border3个参数分别是border-width、border-style、border-color, 其中border-style的值可以是none(默认)、solid、dashed(虚线)
• 还可以设置border-top、border-left、border-bottom
• border会使盒子实际尺寸变大

显示效果如下：

1.1 border-collapse: collapse

    
    test title

    

        table {
            border-collapse: collapse;
        }


        th,td {
            border: 1px solid red;
        }


    




    
        
            姓名
            年龄
        
    

    
        
            张三
            18
        
        
            赵四
            19
        

    

• 设置border-collapse: collapse可以使表格之间的间隙没有，而且设置的border相邻的部分会被合并

显示效果如下：

2. padding内边距

    
    test title

    

        div {
            width: 300px;
            height: 300px;
            padding: 40px 30px 20px 10px;
        }

        P {
            padding: 40px 30px 20px 10px;
        }


    




    
段落一

• 当padding值为1个时，则表示周围4块。当padding值为两个时，则第一个表示上下，第二个表示左右。当padding值为4个，则分别表示上、右、下、左
• 也可以用padding-left、padding-right、padding-top、padding-bottom单独指定

如果盒子指定了width/height，再指定padding值，padding会使盒子变大

如果盒子没有指定width/height，但指定padding值，padding不会使盒子变大

3. margin外边距

    
    test title

    

        * {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 10px auto 30px auto;
        }
        
    



盒子一

说明：

• 因为浏览器会给不同盒子设置不同的margin和padding，为了统一，需要将margin和padding设置为0
• 当margin值为1个时，则表示周围4块。当margin值为两个时，则第一个表示上下，第二个表示左右。当margin值为4个，则分别表示上、右、下、左
• 也可以用margin-left、margin-right、margin-top、margin-bottom单独指定
• 块元素水平居中的条件：
  1. 块元素设置了width
  2. 块元素左、右margin设置为auto

显示效果如下：

3.1 margin-top塌陷问题

如果父盒子和子盒子都有margin-top，则会引起盒子塌陷问题

    
    test title

    

        * {
            margin: 0px;
            padding: 0px;
        }

        .outer {
            width: 300px;
            height: 300px;
            background-color: red;
            overflow: hidden;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: yellow;
            
        }

        div {
            margin-top: 10px;

        }


    




    
盒子一

正常显示效果如下：

如果不加overflow: hidden;，显示效果如下：

4. 行内块或行内元素水平居中

    
    test title

    

        * {
            margin: 0px;
            padding: 0px;
        }

        div {
            text-align: center;
        }

    




    行内元素
    

只需给父元素添加text-align: center;即可

显示效果如下：

5. 去除li小圆点

    
    test title

    

        li {
            list-style: none;
        }


    




    
元素一
    
元素二
    
元素三

显示效果如下：

6. border-radius圆角

    
    test title

    

        div {
            width: 800px;
            height: 300px;
            background-color: red;
            border-radius: 10px 50% 50% 40px;
        }


    



盒子一

参数说明如下：

• 百分比的长度, 为长和宽最大的百分值
• 当border-radius值为1个时，则表示4个圆角。当border-radius值为两个时，则第一个表示左上角和右下角，第二个表示右上角和左下角。当border-radius值为4个，则分别表示左上角、右上角、右下角、左下角
• 也可以用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius单独指定

显示效果如下：

7. 盒子阴影box-shadow

    
    test title

    

        div {
            width: 800px;
            height: 300px;
            background-color: red;
            box-shadow: 10px 20px 5px 3px rgba(0,0,0,0.8);
        }


    



盒子一

参数说明如下：

• 盒子阴影不占用空间，不影响其它盒子排列
• 第一个参数h-shadow，必选，表示阴影偏移x的位置，大于0往右偏，小于0往左偏
• 第二个参数v-shadow，必选，表示阴影偏移y的位置，大于0往下偏，小于0往上偏
• 第三个参数blur，表示阴影模糊的程度，默认为0px不模糊，数值越大越模糊
• 第四个参数spread，表示阴影的大小，数值越大，阴影越大

显示效果如下：

8. 文字阴影

    
    test title

    

        h4 {
            text-shadow: 3px 6px 2px rgba(0, 0, 0, 0.8);
        }


    



我是有阴影的文字

参数说明如下：

• 第一个参数h-shadow，必选，表示阴影偏移x的位置，大于0往右偏，小于0往左偏
• 第二个参数v-shadow，必选，表示阴影偏移y的位置，大于0往下偏，小于0往上偏
• 第三个参数blur，表示阴影模糊的程度，默认为0px不模糊，数值越大越模糊

显示效果如下：