zoukankan      html  css  js  c++  java
  • 前端之CSS盒模型

    一 CSS基础选择器

    1.统配选择器

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

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

    2.标签选择器

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

    /*语法(以div标签为例)*/
           div{
                样式块
            }

    3.class选择器

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

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

    4.id选择器

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

    /*语法(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>
    基础选择器

    选择器的优先级

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

    优先级顺序:统配选择器 < 标签选择器 < 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- 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>
    盒模型布局代码
  • 相关阅读:
    js数组删除数组元素!
    ASP.NET安全问题--ASP.NET安全架构
    片滚动插件myScroll
    JS 回车提交,兼容IE、火狐、Opera、Chrome、Safari
    poj_2386_dfs
    poj_1852_Ants(复杂问题简单化)
    File Mapping
    Creating a File View
    next_permutation
    Creating a File Mapping Object
  • 原文地址:https://www.cnblogs.com/846617819qq/p/10278818.html
Copyright © 2011-2022 走看看