• 前端(七)—— 盒模型之display、overflow、隐藏、border、margin、样式支持,层级结构


    display、overflow、隐藏、border、margin、样式支持,层级结构

    一、盒模型之display

    1、三种样式

    block
    inline 内联/行内
    inline-block 内联块

    2、block、inline、inline-block的区别

    (1)display:block

    • block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度
    • 可以设置宽高,宽默认适应父级,高默认由子级或内容撑开
    • 设置宽高后,一定采用设置的宽高

    (2)display:inline

    • 同行显示,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
    • 不支持宽高

    (3)display:inline-block

    • 同行显示,之间有间距
    • 支持宽高,宽高由内容撑开
    • 设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放

    3、嵌套规则

    • 块可以嵌套所有类型(p一般只允许嵌套内联)
    • 内联一般只嵌套内联
    • 内联块一般只作为最内层级

    div的display默认为block

    4、案例

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>display</title>
        <!-- 默认值 -->
        <style type="text/css">
            /*块:1.独行显示 2.支持宽高,宽默认适应父级,高默认由子级或内容撑开 3.设置宽高后,一定采用设置的宽高*/
            /*内联:1.同行显示 2.不支持宽高*/
            /*内联块:1.同行显示,之间有间距 2.支持宽高,宽高由内容撑开 3.设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放*/
    
            /*嵌套规则:*/
            /*块可以嵌套所有类型(p一般只允许嵌套内联)*/
            /*内联一般只嵌套内联*/
            /*内联块一般只作为最内层级*/
            div {
                /**/
                display: block;
                /*自适应父级可用content的宽度*/
                /* auto;*/
                /*默认0*/
                /*height: 0px;*/
            }
            span {
                /*内联*/
                display: inline;
                /*不支持宽高*/
            }
            img {
                /*内联块*/
                display: inline-block;
                width: auto;
                height: auto;
            }
        </style>
        <!-- 验证宽高设置 -->
        <style>
            .sup {
                /* 100px;*/
                /*height: 100px;*/
                background-color: orange
            }
            .sub {
                width: 200px;
                height: 200px;
                background-color: cyan
            }
            .s1, .s2 {
                width: 200px;
                height: 200px;
                background-color: brown
            }
            img {
                /* 350px;*/
                height: 350px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <span></span>
        <img src="./img/icon.jpg" alt="">
        <img src="./img/icon.jpg" alt="">
    
        <div class="sup">
            <div class="sub"></div>
        </div>
        <span class="s1">123</span>
        <span class="s2">456</span>
    
    </body>
    </html>
    display案例

    二、盒模型之overflow

    在display:block的大环境之下

    1、功能

    用于调整显示区域,当父级区域太小,不能在父级的区域内完全显示子级的内容,课通过overflow来调整显示结果

    2、显示方式

    auto / scroll 以滚动的方式允许子级所有内容显示
    hidden 只显示在父级区域中的内容,不在该区域中的内容不显示

    3、案例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>voerflow</title>
        <!-- 由父级大小决定 -->
        <style type="text/css">
            /*子级区域大于父级*/
            .sup {
                width: 100px;
                height: 100px;
                /*默认值*/
                /*border: 3px none black;*/
                /*清除边框*/
                /*border: 0;*/
                /*border: none;*/
                /*最简单的设置*/
                border: solid;
            }
            .sub {
                width: 200px;
                height: 200px;
                background-color: red
            }
            /*对父级进行overflow设置*/
            .sup {
                /*以滚动的方式允许子级所有内容显示*/
                overflow: auto;
                /*overflow: scroll;*/
    
                /*只运行子级在父级所在区域的部分显示,超出的部分影藏*/
                /*overflow: hidden;*/
            }
        </style>
    </head>
    <body>
        <!-- display: block大环境下 -->
        <!-- <div class="sup">
            <div class="sub"></div>
        </div> -->
        <div class="sup">
            呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿
        </div>
    </body>
    </html>
    overflow案例

    三、盒模型之隐藏

    1、三种隐藏的方式

    .d1 {
        background-color: red;
        /*1. 以背景颜色透明度隐藏,不推荐*/
        /*盒子还在,内容或子级标签均会被显示*/
        background-color: transparent;
    }

    .d2 { background-color: orange; /*2. 以盒子透明度隐藏:0~1*/ /*盒子真正意思上透明,但盒子区域占位还在*/ opacity: 0; }

    .d3 { background-color: cyan; /*3. 盒子从文档中移除,盒子的区域占位消失*/ /*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/ display: none; }

    2、应用

    鼠标悬浮在某一个区域,才显示内容,否则内容隐藏

    /*鼠标悬浮在.d3标签上才显示隐藏的内容*/
    /*注意display是根据隐藏内容的方式确定显示内容的方式*/
    .body:hover .d3{
             display:block;
    }

    3、案例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>隐藏</title>
        <style type="text/css">
            /*盒子间会相互影响*/
            div {
                width: 100px;
                height: 100px;
            }
            .d1 {
                background-color: red;
                /*以背景颜色透明度隐藏,不需要掌握*/
                /*盒子还在,内容或子级标签均会被显示*/
                background-color: transparent;
            }
            .d2 {
                background-color: orange;
                /*以盒子透明度隐藏:0~1*/
                /*盒子真正意思上透明,但盒子区域占位还在*/
                opacity: 0;
            }
            .d3 {
                background-color: cyan;
                /*盒子从文档中移除,盒子的区域占位消失*/
                /*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/
                display: none;
            }
            .d4 {
                background-color: yellow;
            }
            /*需求:通过悬浮body让d3重新显示*/
            /*1.明确控制的对象 2.确定对该对象的修饰 3.找出修饰与对象的关系*/ 
            /*body:hover .d3*/
            .d1:hover ~ .d3 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="d1">内容</div>
        <div class="d2">内容</div>
        <div class="d3"></div>
        <div class="d4"></div>
    </body>
    </html>
    隐藏显示的案例

    四、盒模型之border

    可以通过对border四个方位的调整显示各种规则,例如调整各个方位的是否透明(transparent),可以实现获取三角形、梯形

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>border</title>
        <!-- 画梯形 -->
        <style type="text/css">
            .bd {
                width: 100px;
                height: 100px;
                background-color: transparent;
            }
            .bd {
                /*border: 50px solid orange;*/
                border-top: 50px solid orange;
                border-right: 50px solid cyan;
                border-bottom: 50px solid yellow;
                border-left: 50px solid blue;
                /*border-right: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 50px solid transparent;*/
            }
        </style>
        <!-- 画三角形 -->
        <style type="text/css">
            .bd {
                width: 0;
                height: 0;
            }
            .bd {
                border-top: 50px solid orange;
                border-right: 50px solid cyan;
                border-bottom: 50px solid yellow;
                border-left: 50px solid blue;
            }
            /*吃球球的小球*/
            /*.bd {
                border-radius: 50%;
                border-right: 50px solid transparent;
            }*/
        </style>
    </head>
    <body>
        <div class="bd"></div>
    </body>
    </html>
    案例

    五、盒模型之margin

    /*需求1:父级sup左上右顶格显示*/
    html, body {
        /*body默认具有margin: 8px*/
        margin: 0;
    }
    .sup {
        width: auto;
        height: 200px;
        background-color: red;
    }
    .sub {
        width: 100px;
        height: 100px;
        background-color: orange;
    }

    /*需求2:子级sub在父级sup的水平中央显示*/ .sub { /*上下0,左右auto*/ /*auto:左右auto,自适应(平方)剩余可布局空间*/ margin: 0 auto; }

    /*需求3:sub在sup的垂直中央显示*/ /*垂直会遇到margin父子坑*/ .sup { height: 100px; padding: 50px 0; } /*.sup { height: 100px; border-top: 50px solid red; border-bottom: 50px solid red; }*/


    /*需求4:sub在sup的水平居右显示*/ .sub { margin-left: auto; /*margin-right: 0;*/ margin-right: 10px; }

    六、盒模型之样式支持

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>样式支持</title>
        <!-- 认识a标签一般怎么操作 -->
        <!-- 需求:具有页面转跳功能的图片 -->
        <style type="text/css">
            a {
                color: #333;
                text-decoration: none;
                display: block;
            }
        </style>
        <!-- 需求:图片在sup水平垂直中央显示 -->
        <!-- part1 -->
        <style type="text/css">
            .sup {
                width: 500px;
                /*height: 500px;*/
                background-color: red;
            }
            /*水平居中*/
            /*display对margin的支持*/
            /*block支持所有margin布局*/
            /*inline与inline-block只支持margin上下布局*/
            .sub {
                display: block;
                margin: 0 auto;
            }
            /*垂直居中*/
            .sup {
                /*去除高度设置*/
                padding: 50px 0;
            }
        </style>
        <!-- part2 -->
        <style type="text/css">
            .box {
                width: 500px;
                height: 500px;
                background: url('img/icon.jpg') no-repeat center orange;
            }
        </style>
    </head>
    <body>
        <!-- 认识a标签一般怎么操作 -->
        <!-- 需求:具有页面转跳功能的图片 -->
        <!-- <a href="">
            <img src="img/icon.jpg" alt="">
        </a> -->
    
        <!-- 需求:图片在sup水平垂直中央显示 -->
        <!-- part1 -->
        <div class="sup">
            <img class="sub" src="img/icon.jpg" alt="">
        </div>
        <!-- part2 -->
        <div class="box"></div>
    </body>
    </html>

    七、盒模型之层级结构

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>层级结构</title>
        <style type="text/css">
            .d5 {
                width: 200px;
                height: 100px;
                background: red;
            }
            .d2, .d3, .d4 {
                width: 80px;
                height: 40px;
                background: orange
            }
            /*.d4 {
                margin-left: 160px;
                margin-top: -80px;
            }*/
            .d3 {
                margin-left: 80px;
                margin-top: -40px;
            }
            .d4 {
                margin-left: 160px;
                margin-top: -40px;
            }
            /*没有层级结构情况下:*/
            /*1.盒子布局间相互影响程度很大*/
            /*2.要严格遵循从上至下布局顺序进行布局*/
            /*问题点:牵一发动全身*/
        </style>
        <style type="text/css">
            .menu {
                width: 200px;
                height: 100px;
                background: red;
            }
            .html, .css, .js {
                width: 80px;
                height: 40px;
                background: orange
            }
            .nav {
                width: calc(80px * 3);
                height: 40px;
            }
            .css {
                margin-top: -40px;
                margin-left: 80px;
            }
            .js {
                margin-top: -40px;
                margin-left: 160px;
            }
            /*menu的布局只与nav有连带关系,与实际显示内容的html,css,js不具有任何连带关系*/
        </style>
    </head>
    <body>
        <!-- 无层次结构 -->
        <!-- <div class="d1">w3c</div>
        <div class="d2">html</div>
        <div class="d3">css</div>
        <div class="d4">js</div>
        <div class="d5">menu</div> -->
        
        <!-- 有层次结构 -->
        <div class="title">w3c</div>
        <div class="nav">
            <div class="html">html</div>
            <div class="css">css</div>
            <div class="js">js</div>
        </div>
        <div class="menu">menu</div>
    </body>
    </html>
  • 相关阅读:
    文件上传及文件大小限制_学习笔记
    Java后台及Jsp前端的简单分页_学习笔记
    Java过滤器Filter的原理及配置_学习笔记
    Jsp入门EL表达式_学习笔记
    关于forName()、newInstance()、getMethod()、getClass()等区别的简略说明
    SQL语句查询某字段不同数据的个数(DISTINCT 的使用)
    C# 中delegate和event的区别
    java面试题(转)
    Servlet中的几个重要的对象(转)
    Spring 注解注入的几种方式(转)
  • 原文地址:https://www.cnblogs.com/linagcheng/p/9702619.html
Copyright © 2020-2023  润新知