首页 > 其他分享> > 五十、前端之CSS

五十、前端之CSS

2019-05-30 18:45:06 作者：互联网

一、盒子模型

    盒子模型
        margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)
        border:盒子的包装厚度(边框)
        padding:内部物体与盒子之间距离(文本与边框之间的距离)
        content:物体大小(文本内容)

        ①margin外边距
            .c {
                 margin-top:10px;
                 margin-right:20px;
                 margin-bottom:30px;
                 margin-left:40px;
                        }
            简写：
                .c {margin: 10px 20px 30px 40px;}  顺序：上右下左
                .c {margin: 10px 20px;}  10:上下，20：左右

            常见居中：
                .c {margin: 0 auto;}

        ②padding内填充
            .c {
                padding-top: 5px;
                padding-right: 10px;
                padding-bottom: 15px;
                padding-left: 20px;
                }
            简写：
                .c {padding: 5px 10px 15px 20px;}  顺序：上右下左
            补充padding的常用简写方式：
                        提供一个，用于四边；
                        提供两个，第一个用于上－下，第二个用于左－右；
                        如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
                        提供四个参数值，将按上－右－下－左的顺序作用于四边；

盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0;
        }

        .c1 {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 40px;
        }

        .c2 {
            width: 20px;
            height: 20px;
            border: 3px solid green;
            margin: 10px 20px 30px 40px;
        }

        .c3 {
            width: 200px;
            height: 200px;
            border: 3px solid yellow;
            padding: 10px 20px 30px 40px;
        }
    </style>

</head>
<body>

<div class="c1"></div>
<div class="c2">div</div>
<div class="c3">div</div>

</body>
</html>

View Code

二、浮动

1、浮动

    浮动：
        在 CSS 中，任何元素都可以浮动。
        只要是页面布局 都会用到浮动

    关于浮动的两个特点：
        浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
        由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

    三种取值
        left：向左浮动
        right：向右浮动
        none：默认值，不浮动

下面的案例一个往左浮动，一个往右浮动

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body {margin: 0;}

    .c1 {
        width: 50px;
        height: 50px;
        background-color: red;
        display: inline-block;
        float: left;
    }

    .c2 {
        width: 50px;
        height: 50px;
        background-color: green;
        display: inline-block;
        float: right;
    }
    </style>

</head>
<body>

<div>

    <div class="c1"></div>
    <div class="c2"></div>

</div>

</body>
</html>

View Code

2、浮动页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin: 0;}

        .c1 {
            width: 20%;
            height: 500px;
            background-color: red;
            float: left;
        }

        .c2 {
            width: 80%;
            height: 500px;
            background-color: green;
            float: right;
        }

    </style>

</head>
<body>

    <div class="c1"></div>
    <div class="c2"></div>

</body>
</html>

View Code

3、浮动带来的影响以及解决措施

三、溢出

四、圆形头像

五、定位

1、相对定位

2、绝对定位

3、固定定位

标签：浮动,right,前端,padding,10px,20px,margin,CSS,五十
来源： https://www.cnblogs.com/zhangguosheng1121/p/10951307.html