五十、前端之CSS

2019-05-30 18:45:06 阅读：238 来源： 互联网

标签：浮动 right 前端 padding 10px 20px margin CSS 五十

一、盒子模型

    盒子模型
        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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

五十、前端之CSS