HTML/CSS盒子模型 display，overflow的作用

一  display

            /* 把块元素 转为 行元素 */
            /* display: inline; */
            /* 元素隐藏 none */
                display: none;
            /* 把行元素 转为 块元素 */
            /* display: block; */
            /* 行快元素 */
                display: inline-block;

    单双标签
        单标签 : hr,br,img,input,frame
        双标签 : h1-h6,p,div,span,a,b,strong,em,i,sup,sub,del,table,tr,td,th,form,label,iframe,frameset
    行块标签:
        行标签:一行可以显示多个,不能设置宽高
            span,a,b,strong,i,em,sup,sub,del,input
        块标签:独占一行,可以设置宽高
            div,h1-h6,p,table
        行快标签:既可以在一行显示,又可以设置宽高
            img 
    -->
    <!-- 块元素 -->
    <div class="box">hello</div>
    <div class="box1">world</div>
    <!-- 行元素 -->
    <span class="sp1">hello</span>
    <span>world</span> 

二  overflow

scroll 不管内容有没有溢出,都会有滚动条

            overflow: scroll;

auto 文字超出显示滚动条,否则不显示

            overflow: auto;

溢出、超出部分隐藏

            overflow: hidden;

三  border   边框

边框:线粗细 线颜色 线样式

            border:width style color 

            border:2px red solid (顺序可以变动)

            线粗细：默认3px

            颜色：默认黑色

边框可以实现:css创建三角形效果

            注意:边框的宽度不在盒模型的width范围内
            border-left: 20px solid red;
            border-top: 20px solid rgba(0,255,255,0);
            border-right: 20px solid transparent;
            border-bottom: 20px solid transparent;

四  padding   内边距 

            作用:内容和边框之间产生间距
            内边距会撑开盒模型
            上 . padding-top: 30px;
            右 . padding-right: 40px;
            下 . padding-bottom: 10px;
            左 . padding-left: 20px;
 
            合并:4个边框不一样, 上 右 下 左
                         padding:20px 30px 40px 10px;
            合并:3个值:上  左右  下
               padding: 10px 20px 30px;
            合并:2个, 上下  左右
              padding: 20px 40px;
            合并:1个 上下左右一样
              padding: 20px;

五  margin  外边距

            上 . margin-top: 20px;
            右 . margin-bottom: 40px;
            下 . margin-left: 20px;
            左 . margin-right: 30px;
 
            /* 合并4: */
            /* margin:20px 50px 20px 20px; */
            /* 合并3: */
            /* margin:20px 50px 20px; */
            /* 合并2: */
            margin:20px 50px;
            /* 合并1: */
            margin:20px;

盒模型构成

内容 + border边框 + padding内边距 + margin外边距
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 180px;
            height: 140px;
            background-color: aqua;
            font-size: 30px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(21, 4, 255);
            display: inline-block;
        }
        .box3{
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: rgb(128, 0, 0);
        }
    </style>
</head>
<body>
    <!-- 盒模型 -->
    <div class="box1">我是1</div>
    <div class="box2">我是2</div>
    <div class="box1">我是3</div>
</body>
</html>
 

本文作者：五季-子琛
本文链接：https://www.cnblogs.com/izichen/articles/17755675.html

posted @ 2023-10-14 11:47  五季-子琛  阅读(34)  评论(0)    收藏  举报