css-盒子模型

和蔼的阿木木o

已于 2022-06-27 10:10:56 修改

阅读量200

点赞数

分类专栏： html css 文章标签： css 前端 html

于 2022-06-23 17:18:09 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/125424239

版权

html 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

盒子模型

盒子模型

1.标准盒模型 w3c标准 width 内容区域

2.怪异盒模型 IE标准 width 盒子大小

都包含内容区域内边距边框外边距

内容区域

盒子模型-大小

width和height
只定义内容的大小，不包含边框和边距
如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设置
overflow属性 (overflow-x overflow-y)
定义内容超过width和heigth时的显示方式
scroll;使用滚动条，不论内容是否超出
auto;根据情况，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚动条，否则不显示滚动条
hidden;超出部分被隐藏
visible;默认值，忽略width或height

    <title>Document</title>
    <style>
        .box{
            /* overflow: visible;  默认值 溢出部分可见 */
            /* overflow: hidden;  溢出部分 隐藏 */
            /* overflow: auto;  浏览器自动处理，溢出添加滚动条   */
            /* overflow: scroll;    无论溢出与否，都显示滚动条 */
            overflow-y:scroll ;   /*垂直方向显示滚动条*/
            overflow-x: auto;      /*水平方向自动显示*/
            width: 300px;
            height: 300px;
            /* white-space: nowrap;   强制不换行 */
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic vitae laborum aliquam incidunt tenetur inventore, accusantium quae qui corrupti rem dicta tempora in fugit dignissimos facilis! Veniam possimus mollitia debitis.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti obcaecati alias, vero soluta exercitationem nisi quo sapiente quam optio molestiae incidunt ut fuga debitis quod quia perferendis ad reiciendis ex!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nemo quo, similique perferendis dolorum consequuntur deserunt ab labore deleniti cumque aspernatur quasi excepturi dolor modi cupiditate ut. Eos, necessitatibus iste.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio quia officiis minima odit? Natus, esse, laboriosam sed doloribus officia fugit perferendis provident exercitationem enim modi ullam nisi impedit autem. Totam.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia doloribus ullam neque inventore facere alias veniam, iste pariatur blanditiis voluptas vitae natus, animi exercitationem aperiam optio aspernatur accusantium dignissimos veritatis!

    </div>
</body>

边框的三个方面(webkit、firefox和ie)

border-width,边框的宽度
border-color,边框的颜色
border-style,边框的样式（border-style:dotted（点状线）、solid（实线）、double（双实线）、dashed（虚线）;

        .box{
            width: 300px;
            height: 150px;
            background-color: aquamarine;
            padding: 10px;
            border-width: 1px;
            border-color: red;
            /* border-style: solid;  实线 */
            border-style: dashed;   /*虚线*/
        }

    <style>
        .box{
            width: 300px;
            height: 150px;
            background-color: aquamarine;
            padding: 10px;
            /* border-width: 1px;
            border-color: red;
            /* border-style: solid;  实线 */
            /* border-style: dashed;   虚线  */
            border: 1px solid blue;
            border-left-width:5px ;
            border-left-color:red ;
        }
    </style>

    <style>
        .box{
            width: 300px;
            height:300px;
            border:1px solid blue;
            border-top: 2px dashed blue;
            border-bottom:2px dotted red ;
            border-left:10px double green;
            border-right: 2px solid purple;
        }
    </style>
</head>
<body>
    <div class="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quo eligendi voluptate quia consequuntur suscipit repellat delectus sequi commodi quasi aliquid nisi tempore, dolorem, adipisci ut eveniet sunt doloribus incidunt.
    </div>

边框制作三角形应用

    <style>
        .box{
            width: 0px;
            height:0px;
            border:100px solid transparent; /*transparent  透明色*/
            border-bottom-color: red;
            border-right-color:blue ;
            border-left-color:greenyellow ;
            border-top-color:plum ;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>

边框的综合定义

分开单独设置，
例：border-width:1px; border-color:#00f; border-style:solid;
使用综合属性
例：border:1px #00f solid
注意：三个值没有先后顺序，中间用空格隔开

四边独立设置

单边分开设置
例：
border-left-width:1px;
border-left-color:#00F;
border-left-style:solid;

使用综合属性

例：
border-left:1px #00F solid;

内边距

padding（内边距）
边框和内容之间的空白宽度
注意：这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度
padding的综合设置
例：padding:2px;(四个内边距都为2px)
padding的单边设置
例：padding-left:2px;(左边的边框和内容之间的距离为2px)

    <style>
        .box{
            width: 300px;
            height: 150px;
            background-color: aquamarine;
            /* padding: 10px;   上下左右四周都是10像素
            padding: 10px 20px;   值1代表上和下的内边距,值2代表左和右的内边距
            padding: 10px 20px 30px ;   值1代表上内边距  值2代表左右内边距 值3代表下内边距
            padding: 10px 20px 30px 40px;   值1代表上内边距,值2代表右内边距,值3代表下内边距,值4代表左内边距
            padding-top: 10px;  上内边距
            padding-right: 10px;  右内边距
            padding-left;10px    左内边距  
            padding-bottom:      下内边距 */
            padding-left: 10px;
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nemo quo, similique perferendis dolorum consequuntur deserunt ab labore deleniti cumque aspernatur quasi excepturi dolor modi cupiditate ut. Eos, necessitatibus iste.
    
    </div>
</body>

盒子模型-外边距

margin（外边距）
标签和它相邻的标签之间的空白宽度
外边距的设置是相叠加的
margin的综合设置
例：margin:10px;(和四边临近的标签的距离都为10px)
margin的单边设置
例：margin-left:10px;(标签距左边10px)
特别
<body>标签的margin代表内容与浏览器边框的距离
两个行内元素的margin-right和margin-left，采用“和”
两个块元素的marign-top和margin-bottom，采用“最大值”

margn：0 auto //块元素水平居中

盒子模型-背景

background-color
定义标签的背景颜色

background-image
定义背景图片,可定义多背景

background-image:url(引用地址)

background-repeat
定义背景图片的显示方式
repeat，图片重复
repeat-x，图片横向(水平)重复
repeat-y，图片纵向(垂直)重复
no-repeat，水平垂直图片都不重复

background-position
定义背景图片的位置
直接使用两个定位单词，例:background-position: right top;
使用x、y坐标，例:background-position: 20px 30px;

background-size
定义背景图片的大小
background-size: length | percentage | cover | contain;
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（可能会裁剪图片）
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(可能会出现空白)

    <style>
        .box{
            width: 800px;
            height: 800px;
            background-image: url("1.webp"),url("mn1.jpg");  /*添加多张图片，谁先写谁在上方*/
            background-repeat: no-repeat,repeat;
        }
    </style>
</head>
<body>
    <div class="box">

background-position 定义背景图片的位置

直接使用两个定位单词，例:background-position: right top;
使用x、y坐标，例:background-position: 20px 30px;

background-size 定义背景图片的大小

background-size: length | percentage | cover | contain;
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（可能会裁剪图片）
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(可能会出现空白)

        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            background-image:url("mn1.jpg");  /*添加多张图片，谁先写谁在上方*/
            background-repeat: no-repeat;
            /*background-position:left center ; */
            /* background-position: right bottom; */
            /* background-position: 100px 0; */
            /* background-position: 50%; */
            /* background-position: 50% 50%; */
            /* background-size:100px; */
            background-size: 50% 100%;   /*背景区域的百分比*/
        }
    </style>

background-origin

定义背景图片的渲染位置
背景图片可以放置于padding-box 、 content-box 或 border-box 区域

background-attachment定义背景图片是否固定或者随着页面的其余部分滚动

background-attachment：fixed（固定）| scroll（默认）

qq主页面固定图片

   <style>
        body{
            margin: 0;

        }
        .bg{

            background-image: url("https://sqimg.qq.com/qq_product_operations/im/2015/fisrtbg.jpg");
        }
        .bg2{
            background-image: url("https://sqimg.qq.com/qq_product_operations/im/2015/update/avd.jpg");
        }
        .bg,.bg2{
            width:100%;
            height:600px;
            background-repeat: no-repeat;
            background-position: center 0;  /*水平居中，垂直居上*/
            background-size: cover;
            background-attachment: fixed;
  /*   background: #f00 url(" img/bailan. webp") no-repeat Eenter 0/400px fixed;  /*简写*/  */
        }
    </style>
</head>
<body>
    <div class="box">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius voluptatum eligendi nesciunt hic magni fuga, laboriosam eaque quos corrupti est laudantium esse ea ut error ducimus nemo? Ipsum, dignissimos quis?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolore esse, non tenetur eius eligendi ipsum ullam, voluptas culpa necessitatibus nam dicta sed corporis numquam quos minus similique fuga neque?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam illum saepe consequatur repudiandae ad adipisci autem officiis qui voluptatem distinctio magnam, ut rem minima! Quaerat, repudiandae eaque. Labore, vel cum!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe fugiat vitae dolor illum adipisci? Cupiditate reiciendis, soluta dicta ducimus, sed optio repellendus fugiat odio repellat, magnam neque quo incidunt facere.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit et illo, voluptates vero optio laboriosam! Voluptatem est deserunt alias nulla, omnis, quis repudiandae, explicabo laboriosam sapiente ipsa sit impedit blanditiis?
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut omnis fuga consectetur explicabo id. Eveniet dolor esse veniam, dolorem recusandae officia iure atque vitae nihil vel alias minus fuga dolorum!
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius praesentium accusantium perspiciatis doloremque itaque, nostrum eaque maiores obcaecati quod corrupti. Quisquam ad esse dolor dolores reprehenderit excepturi quibusdam consectetur vel?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem, vero. Sint, aliquid. Quas natus rem deleniti voluptatibus corrupti libero? Sapiente quasi laudantium odit quam temporibus eius cum id vel debitis.
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia, minima voluptatibus exercitationem dolores aliquam beatae ullam, saepe quasi veniam fugit suscipit iusto vero ducimus provident fuga quod necessitatibus quo nobis?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur quas eveniet reiciendis ipsa, rem dicta accusantium? Unde explicabo, suscipit expedita nobis quisquam ullam assumenda quaerat, molestias consequatur quod et voluptatum!
    </div>
    <div class="bg">

    </div>


    <div class="box">
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        腾讯QQ,8亿人在用的即时通讯软件,你不仅可以在各类通讯终端上通过QQ聊天交友,还能进行免费的视频、语音通话,或者随时随地收发重要文件。欢迎访问QQ官方网站,下载体验最新版QQ,了解QQ最新功能。
        
    </div>
    <div class="bg2"></div>
</body>