前端之CSS盒模型

时间  2019-11-17 标签 前端 css 模型

一 CSS基础选择器

1.统配选择器css

统配选择器是指在html、body下使用，用于显示的标签。html

<!--语法-->
    * {
            样式块
        }

2.标签选择器架构

标签选择器选择的是html文件中标签名与选择器标签名一致的标签。ide

/*语法（以div标签为例）*/
       div{
            样式块
        }

3.class选择器布局

class选择器选择的是html文件中类名与选择器类名一致的标签。spa

/*语法（div为自定义的类名）*/
        .div{
             样式块   
        }

4.id选择器设计

id选择器选择的是html文件中id与选择器id一致的标签。code

/*语法（top为自定义的id）*/
        #top{
            样式块
        }
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*在实际开发中, 尽可能少用或不用标签名来做为选择器*/
        /*标签名做为选择器通常在该标签为最内层(语义|功能)标签*/
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="css/1.css">
    <!--总结: 内联和外联, 相同属性采用下者覆盖上者, 不一样属性叠加-->


    <style>
        /*在css语法中如何来表示class名 => .就表明class*/
        .div1 {
            background-color: cyan;
        }
        .div2 {
            background-color: brown;
        }

        /*问题:css中用什么标识id => #*/
        #did1 {
            background-color: tan;
        }
    </style>
    <style>
        * {
            background-color: yellow;
        }
        /*html和body颜色被改变了, 但全部的div颜色并无改变
        缘由: 不一样的名字(选择器)具备优先级*/
    </style>
</head>
<body>
    <div>1</div>
    <div style="background-color: pink">2</div>
    <!--总结: 行间式属于逻辑最下方, 相同的属性必定会覆盖内联和外联-->
    <div class="div1">3</div>
    <!--问题: 不使用行间式单独操做(可读性差), 那又如何来单独改变其颜色 => 其别名-->
    <div class="div2"></div>
    <!--总结: 用class起名, 分类别, 能够重名 => 用什么方式惟一标识一个标签-->
    <div id="did1"></div>
    <!--给该标签设置惟一标识符 id-->

    <!--了解: 统配选择器 => css符合 => * -->
    <!--控制着: html body 及 body下全部用来显示的标签-->

</body>
</html>
基础选择器

选择器的优先级htm

控制范围越精确，优先级越高，所设置的样式就会覆盖优先级低的相同属性样式。blog

优先级顺序：统配选择器 < 标签选择器 < class选择器 < id选择器 < 行间式 < !important

注意：!import书写在属性值后;前。！import会提升样式的优先级。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>选择器优先级</title>
    <style>
        #div {
            background-color: yellow;
        }

        .div {
            background-color: yellowgreen;
        }

        div {
            background-color: green!important;
        }

        * {
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
        /*!important 优先级要强于行间式, 在属性值与;之间设定*/
    </style>
</head>
<body>
    <div class="div" id="div" style="background-color: red"></div>
    <!--总结: 行间式优先级要高于内连外连全部选择器的优先级, 可是不能高于!important-->
</body>
</html>
选择器优先级例子

二 显示方式display

display的三种方式  inline、block、inline-block

1.inline

/*
1.同行显示
2.只支持部分css样式（不支持宽高）
3.宽高由文本内容撑开
*/

2.block

/*
1.异行显示
2.支持全部css样式
3.设置了宽高就采用设置的值，宽高也就有默认的特性
*/

3.inline-block

/*
1.同行显示
2.支持全部css样式
3.设置了宽高就采用设置的值
*/

总结：标签的显示方式就是用dispaly属性控制的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        span {
            width: 200px;
            height: 50px;
            background-color: yellow;
        }
        p {
            width: 200px;
            height: 50px;
            background-color: red;
        }
        img {
            width: 200px;
            /*height: 50px;*/
        }
    </style>
</head>
<body>
<span>123<i>456</i><b>789</b></span>
<span>123<i>456</i><b>789</b></span>

<p>123<i>456</i><b>789</b></p>
<p>123<i>456</i><b>789</b></p>

<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt="">


<!--结论:
1. 有些标签支持宽高, 有些标签不支持宽高
2. 有些标签同行显示, 有些标签异行显示(独占一行)
3. 有些标签有结束标识, 有些标签没有结束标签(省略了)
-->

<!--
不一样的标签, 在页面中书写的方式不同, 显示效果也不同, 支持的css样式程度也不同
-->

<!--分类-->
<!--1.单双标签的分类-->
<!--
单标签: br|hr|img|meta|link, 功能具体, 不须要内容, 设置为单标签, 单标签结束符在标签尾部, 能够省略
eg: <img /> | <br />
结论: 主功能

双标签: h1|p|span|div, 具备子标签, 包含内容, 设置为双标签, 双标签首尾分离
eg: <h1>内容</h1> | <div>子标签</div>
结论: 主内容
-->

<hr>

<!--
2.经过display属性值进行划分

-->
<style>
    /* dispaly
    what: 控制标签在页面中的显示方式的属性
    why: 经过设置该属性的不一样属性值, 使其在页面中的显示方式达到设定的效果,
    且对于css的样式支持程度也不同
    */
    owen {
        color: blueviolet;
        width: 200px;
        height: 50px;
        background-color: red;
    }
    .o1 {
        display: inline;
        /*
        1.同行显示
        2.只支持部分css样式(不支持宽高)
        3.宽高由文本内容撑开
        */
    }
    .o2 {
        display: block;
        /*
        1.异行显示
        2.支持全部css样式
        3.设置了宽高就采用设置的值, 宽高也就有默认的特性(后面讲)
        */
    }
    .o3 {
        display: inline-block;
        /*
        1.同行显示
        2.支持全部css样式
        3.设置了宽高就采用设置的值
        */
    }
    /*结论:
    1.带有inline的就会同行显示, 带有block的就会支持全部css样式
    2.带有inline的都是与内容相关的标签, 带有block的主要用来搭建架构的
    */

    /*嵌套关系
    why: 页面架构就是由标签一层层嵌套关系造成

    嵌套关系由必定的规则
    1. inline-block类型不建议嵌套任意标签, 因此系统的inline-block都设计成了单标签
    2. inline类型只嵌套inline类型的标签
    3. block类型能够嵌套任意类型标签(注: hn和p只建议嵌套inline类型标签)
    */
</style>
<owen class="o1">123</owen>
<owen class="o1">123</owen>
<hr>
<owen class="o2">123</owen>
<owen class="o2">123</owen>
<hr>
<owen class="o3">123</owen>
<owen class="o3">123</owen>

<hr>

<!--复习-->
<style>
    .div {
        width: 100px;
        height: 100px;
        background-color: orange;
        display: inline-block;
    }
    /*标签的显示方式就是用display属性控制*/
</style>
<div class="div">000</div>
<div class="div">111</div>
</body>
</html>
display的三种类型

三 嵌套关系

在一个页面中，页面的架构就是由标签一层层嵌套关系造成的。

嵌套关系的规则

1.inline-block类型不建议嵌套任意标签，因此系统的inline-block都设计成了单标签。

2.inline类型只嵌套inline类型额标签。

3.block类型能够嵌套任意类型标签（注：h标签和p标签只建议嵌套inline类型标签）

注意

1.inline嵌套block和inline-block，不起任何做用，因此只能嵌套Inline。

2.inline-block能够嵌套其余类型的标签，但必定要结合vertical-align属性操做，左右还有一空格间距。（若是不与vertical-align属性一块儿结合使用的话，因为inline-block布局会受内部文本的影响，即在布局时文本底端会对其其余盒模型的底端，会对咱们的页面布局产生影响，达不到想要的效果）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>嵌套关系</title>
    <style>
        .list {
            display: inline-block;
            vertical-align: middle;
        }
        /*总结: vertical-align
        baseline: 文本底端对齐(默认值)
        top: 标签顶端对齐
        middle: 标签中线对齐
        bottom: 标签底端对齐
        */
        .box {
            width: 80px;
            height: 35px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <!--
    嵌套关系
    why: 页面架构就是由标签一层层嵌套关系造成

    嵌套关系由必定的规则
    1. inline-block类型不建议嵌套任意标签, 因此系统的inline-block都设计成了单标签
    2. inline类型只嵌套inline类型的标签
    3. block类型能够嵌套任意类型标签(注: hn和p只建议嵌套inline类型标签)
    -->
    <div class="list">
        <div class="box">呵呵呵呵呵呵呵呵呵呵呵呵</div>
    </div>
    <div class="list">
        <div class="box" style="height: 60px">呵呵</div>
    </div>

    <!--问题: inline-block布局会受内部的文本影响(文本底端对其)-->
    <!--解决: 什么属性能够控制文本垂直方向的对齐关系 => vertical-align -->

    <!--
    结果:
    1.inline嵌套block和inline-block,不起任何做用, 因此只能嵌套inline
    2.inline-block能够嵌套其余类型标签, 但必定要结合vertical-align属性操做, 左右还有一空格间距
    3.block任何同行显示 ???
    -->
</body>
</html>
嵌套关系

四 盒模型

盒模型由四部分组成   margin + border + padding + content

1.margin：外边距，控制盒子的位置（布局），经过控制top和left控制自身位置，经过控制right和bottom控制兄弟盒子的位置（划区域）。

2.border：给盒子加上边框，参数为样式+宽度+颜色（样式有：solid实线、dashed虚线、dotted点状线）

3.padding：内边距。从现实角度控制文本的显示区域。

4.content：内容区域，由宽 * 高 组成

注意

1.margin,padding参数起始位上，顺时针一次赋值,没有参数的边取对边的值。

2.要作到文本内移，设置padding，若是又想现实区域不变，相应减小content。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型</title>
    <style>
        body {
            margin: 0;
        }

        /*margin | border | padding | content(width x height)*/
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;


            /*padding: 10px 10px 10px 10px;*/
            /*padding: 20px 30px;*/
            /*起始为上, 顺时针依次赋值, 不足边取对边*/

            /*border-style: solid;*/
            /*border-width: 10px;*/
            /*border-color: red;*/
            /*transparent透明色*/
            border: blue dashed 20px;

            /*margin: 100px 50px;*/
            /*起始为上, 顺时针依次赋值, 不足边取对边*/
        }

        .box {
            padding: 10px 0 0 10px;
            width: 190px;
            height: 190px;
            /*margin-left: -80px;*/
            /*margin-top: -80px;*/
            margin-bottom: 100px;
        }
        /*总结:
        盒模型由四部分组成: margin + border + padding + content
        1.margin: 外边距, 控制盒子的位置(布局), 经过左和上控制自身位置, 经过右和下影响兄弟盒子位置(划区域)
        2.border: 边框, 样式/宽度/颜色
        3.padding: 内边距, 从显示角度控制文本的显示区域
        4.content: 内容区域, 由宽 x 高组成

        注意:
        1.margin,padding: 起始为上, 顺时针依次赋值, 不足边取对边
        2.要作到文本内移,设置padding, 若是又想显示区域不变, 相应减小content
        */
    </style>
</head>
<body>
    <div class="box">123</div>
    <div>456</div>
</body>
</html>
盒模型相关代码

五 盒模型布局

'''
1.上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值
2.第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值

解决2:
1.父级设置border-top
2.父级设置padding-top
'''
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型布局</title>
    <style>
        div {
            width: 78px;
            height: 33px;
            background-color: orange;
            border: 1px solid black;
        }
        /*前提: 盒子显示区域 80 x 35*/
        .d1 {}
        .d2 {
            margin-left: 80px;
            margin-top: -35px;
            /*margin-bottom: 35px;*/
        }
        .d3 {
            margin-left: calc(80px * 2);
            margin-top: -35px;
        }
        .d4 {
            margin-left: calc(80px * 3);
            margin-top: -35px;
        }
        .d5 {
            margin-left: calc(80px * 4);
            margin-top: -35px;
        }
        .d6 {
            margin-left: calc(80px * 5);
            margin-top: -35px;
        }
        .d7 {
            margin-left: calc(80px * 6);
            margin-top: -35px;
        }
    </style>
</head>
<body>
    <!--.d${$}*7-->
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
    <div class="d6">6</div>
    <div class="d7">7</div>

    <hr>
    <!--需求: b1 与 b2 上下间接50px-->
    <style>
        .b1 {
            margin-bottom: 50px;
        }
        .b2 {
            margin-top: 50px;
        }
        /*总结: 上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值*/
    </style>
    <div class="b1"></div>
    <div class="b2"></div>

    <!--了解: 左右正常叠加-->
    <style>
        .s1 {
            margin-right: 10px;
        }
        .s2 {
            margin-left: 10px;
        }
    </style>
    <span class="s1">1</span><span class="s2">2</span>

    <hr>

    <style>
        .sup {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*margin-top: 40px;*/
            /*border-top: 1px solid black;*/
            padding-top: 10px;
        }
        .sub1 {
            /*border: 1px solid red;*/
            width: 50px;
            height: 50px;
            background-color: red;
            margin-top: 50px;
        }
        .sub2 {
            width: 50px;
            height: 50px;
            background-color: pink;
            margin-top: 50px;
        }
        /*总结: 第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值*/
        /*解决方案: 1.父级设置border-top | 2.父级设置padding-top*/
    </style>
    <section class="sup">
        <section class="sub1"></section>
        <section class="sub2"></section>
    </section>
</body>
</html>
盒模型布局代码
联系我们 沪ICP备13005482号-10