CSS:1.盒子模型;2.浮动；3.定位。

1.盒子模型

<1>模型图

margin:外边距
border:边界
padding:内边距
<2>内外边距

body {
    
    
            margin: 0;
            padding: 0;
        }

<3>圆角边框

img {
    
    
            /*只输入一个参数时四个角相同；输入四个参数时，作用域为：左上，右上，右下，左下。*/
            border-radius: 100px;
        }

<4>盒子阴影

img {
    
    
            border-radius: 100px;
            box-shadow: 10px 10px 10px #1175ff;
        }

2.浮动

<1>display

span {
    
    
            width: 100px;
            height: 100px;
            border: red solid 1px;
            /*将span变为行内块元素*/
            display: inline-block;
        }

<2>float

div {
    
    
    /*盒子浮动:top:向上浮动；bottom:向下浮动；left:向左浮动；right:向右浮冬*/
    float: top;
}

<3>overflow

div {
    
    
            /*scroll:滚动条；hidden:隐藏滚动条*/
            overflow: scroll;
        }

<4>父级边框塌陷问题
(1)增加父级元素的高度

#box {
    
    
    height: 500px;
}

(2)增加新的div并运用clear属性

<div class="test">

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

(3)父类元素中增加overflow: hidden

#box {
    
    
    border: 1px red solid;
    overflow: hidden;
}

(4)增加一个父类伪类样式：after

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

3.定位

       .test1 {
    
    
            /*相对定位*/
            position: relative;
        }

        .test2 {
    
    
            /*绝对定位*/
            position: absolute;
        }

        .test3 {
    
    
            /*固定定位*/
            position: fixed;
        }