凉城旧巷
Python从入门到自闭，Java从自闭到放弃，数据库从删库到跑路，Linux从rm -rf到完犊子！！！
前端（七）—— 盒模型之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的宽度*/
            /*width: auto;*/
            /*默认0*/
            /*height: 0px;*/
        }
        span {
            /*内联*/
            display: inline;
            /*不支持宽高*/
        }
        img {
            /*内联块*/
            display: inline-block;
            width: auto;
            height: auto;
        }
    </style>
    <!-- 验证宽高设置 -->
    <style>
        .sup {
            /*width: 100px;*/
            /*height: 100px;*/
            background-color: orange
        }
        .sub {
            width: 200px;
            height: 200px;
            background-color: cyan
        }
        .s1, .s2 {
            width: 200px;
            height: 200px;
            background-color: brown
        }
        img {
            /*width: 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>

 

posted on 2018-09-25 19:09  凉城旧巷  阅读(672)  评论(0)  编辑  收藏  举报

Copyright © 2024 凉城旧巷
Powered by .NET 9.0 on Kubernetes Powered By博客园