CSS3—盒子模型 讲解

最新推荐文章于 2024-03-01 11:37:06 发布
最新推荐文章于 2024-03-01 11:37:06 发布
阅读量3.5k 收藏 9
点赞数 4
分类专栏： HTML+CSS+JS 文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42588990/article/details/107579802
版权

一、盒子模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)、外边距(margin)。转换到我们日常生活中，可以拿红酒来对比，红酒=内容，内边距=盒子中的填充物，边框=盒子的厚度，外边距=两个红酒之间的距离。
通常我们设置的宽和高是指“红酒”content的宽高，一整个盒子还包含了“填充物”、盒子、盒子与盒子的距离

二、W3C盒模型

盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成

在这里插入图片描述
在这里插入图片描述

border边框

border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。

三要素书写的时候一般如下顺序

border：宽度 样式 颜色

border: 1px solid red;

不过不按此顺序来写依然能正常显示。

div{ border: red solid 2px; }

border-style设置边框的样式，有五种常用样式可选

点状dotted
实线solid
双线double （ 需要最起码设置为3像素，不然显示不下）
虚线dashed
无边框none
border的三要素可以统一写在”border”属性中，也可以单独设置。

统一的写法：border: 1px solid red;
单独设置的写法：

border-width:; 

border-style:;

border-color:;

要注意，在style属性为空的情况下，整个边框是不会出现的。这不论是统一写在border或是单独设置都是这样的。

不写width会有默认3像素的值。
不写颜色会默认为黑色。
外边距
围绕在元素边框周围的空白区域
会在元素外创建额外的空白区域
外边距是透明的
语法：margin:value;
单边设置

margin-top/right/bottom/left: value;

value可取值为像素，%，auto，负值
外边距简写

margin:value(四个方向相同) ;
margin: value(上下) value(左右);
margin: value(上) value(左右) value(下);
margin: value(上) value(右) value(下) value(左);

外边距合并

在这里插入图片描述

当两个垂直外边距相遇时，他们将形成一个外边距，成为外边距合并
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
margin设置元素外边距的宽度，它有这么几个特点

  1. 块级元素的垂直相邻外边距会合并
  2. 行内元素实际上不占上下外边距。行内元素的的左右外边距不合并
  3. 浮动元素的外边距也不会合并
  4. 允许指定负的外边距值，不过使用时要小心
    内边距
    内容区域和边框之间的空间
    会扩大元素边框所占用的区域
    语法：padding:value;

单边设置

padding-top/right/bottom/left:value;

value可取值为像素，百分比，但不能为负数

内边距的简写

  padding:value(四个方向相同) ;
  padding: value(上下) value(左右);
  padding: value(上) value(左右) value(下);
  padding: value(上) value(右) value(下) value(左);

三、怪异盒模型

盒子模型分两种，一种是符合W3C规范的标准例子模型，另一种是IE的盒子模型，IE的盒子模型也被叫怪异盒子。
可以看到 IE 盒子模型也包括 margin、border、padding、content，不过，和标准 盒子模型不同的是：IE 盒子模型的宽，包含了 border 和 pading。
在这里插入图片描述

box-sizing

box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定
它有两个值
content-box（标准）
padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型。

border-box（怪异）
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。
怪异盒子：
组成部分： content+padding+border+margin
实际宽度：width+margin (width包含padding+border)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>怪异盒子练习</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <style>
        div{
            width: 234px;
            height: 460px;
            background-color: #2e233e;
            padding: 20px 0px;
            box-sizing: border-box;
        }
        div li{
            font-size: 14px;
            height: 42px;
            line-height: 42px;
            padding-left: 30px;
        }
        a{color: white}
        li:hover{background-color: #ff6700;}

    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href="">电器商城</a></li>
            <li><a href="">电器商城</a></li>
            <li><a href="">电器商城</a></li>
            <li><a href="">电器商城</a></li>
            <li><a href="">电器商城</a></li>
            <li><a href="">电器商城</a></li>
            <li><a href="">电器商城</a></li>
            <li><a href="">电器商城</a></li>
            <li><a href="">电器商城</a></li>
            <li><a href="">电器商城</a></li>
        </ul>
    </div>
</body>
</html>

四、伸缩盒模型flexbox

伸缩盒模型也叫弹性盒模型，或flexBox。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局。

flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。

目的：在浏览器窗口变化时，盒子相应改变大小。
设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。
flexbox的基础知识
由于 flexbox是一个整体的模块，它们之中一些属性是在父容器上设置，而一些是在子容器上设置。
一个flexbox的基本结构：

    .box{ display: flex;}    //最外层的为父容器，定义此容器为弹性布局
    .item1{ flex-grow: 1; background:pink}       flex-grow占1比例
    .item2{ flex-grow: 2; background:orange}     占2比例
    .item3{ flex-grow: 3; background:red}        占3比例

<div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

1.首先规定哪个是父容器，父容器中包含多个“项目”（每个子div），项目是可以在父容器中弹性布局的。
2.其次还可以规定父容器中要怎么来显示它里面的项目，如是否换行、项目排列方向等
父容器常用属性
1.父容器中的常用属性

 display: flex;

定义一个flex容器
新弹性盒 设置父元素是一个弹性盒，子元素会自动水平排列
2.父容器中的常用属性

 justify-content: flex-end;

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

在这里插入图片描述

3.父容器常用属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
在这里插入图片描述

<div class="container">
    <div></div>
</div>

css：
   .container{
        width: 300px;
        height: 300px;
        border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container div{
        width: 100px;
        height: 100px;
     border: 1px solid blueviolet;
     }

在这里插入图片描述

4.子元素常用属性
*伸缩盒中的每一个元素称为一个项目。

  flex-grow: number;

一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

 .item1{ flex-grow: 1; background:pink}                
 .item2{ flex-grow: 1; background:orange}             
 .item3{ flex-grow: 1; background:red}
旧的伸缩盒

伸缩盒从被提出到如今一直在修改，所以这里涉及到了新老写法

伸缩盒最老版本

display:box;

将对象作为弹性伸缩盒显示（火狐和webkit内核都支持display:-webkit-box;或display:-moz-box;）
子元素 box-flex:;

伸缩盒过渡版本

display:flexbox;

将对象作为弹性伸缩盒显示

伸缩盒最新版本

display:flex;

将对象作为弹性伸缩盒显示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>弹性盒子应用</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/baiduStyle.css"/>
</head>
<body>
    <div  class="nav">
        <div  class="arrow"></div>
        <div class="title">
            <img src="images/百度周边_05.png" alt=""/>
            <span>发现周边服务</span>
        </div>
        <div  class="search"></div>
    </div>
    <div  class="food">
        <div >
            <img src="images/百度周边_14.png" alt=""/><br>
            <span>美食</span>
        </div> <div >
            <img src="images/百度周边_14.png" alt=""/><br>
            <span>美食</span>
        </div> <div >
            <img src="images/百度周边_14.png" alt=""/><br>
            <span>美食</span>
        </div> <div >
            <img src="images/百度周边_14.png" alt=""/><br>
            <span>美食</span>
        </div> <div >
            <img src="images/百度周边_14.png" alt=""/><br>
            <span>美食</span>
        </div>
    </div>
<div class="menu">
    <div>
        <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div> <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div> <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div> <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div> <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div>
    </div>
    <div>
        <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div> <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div> <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div> <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div> <div>
            <img src="images/百度周边_30.png" alt=""/><br/>
            <span>小吃</span>
        </div>
    </div>
</div>
</body>
</html>

五、浏览器内核以及其前缀

CSS标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所以会加厂商前缀加以区分。如果某个属性已经从草案变为了或接近推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀。如border-radius已经很成熟，不用加前缀。
在这里插入图片描述
在这里插入图片描述

根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其它的内核都是基于此四种进行再研发的。

1.Gecko内核前缀为 -moz- 火狐浏览器

2.Webkit内核 前缀为 -webkit- 也叫谷歌内核，chrome浏览器最先开发使用，safari浏览器也使用
该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。

3.Trident内核 前缀为 -ms- 也称IE内核

4.Presto内核 前缀 -o- 目前只有opera采用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浏览器内核以及前缀</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            border: 30px solid rgba(255,255,255,.5);
            background: url("images/wangfeng.jpg");
            margin: 30px  auto;
            padding: 120px;
            font-size: 200px;
            font-weight: bolder;
            color:rgba(255,255,255,.5);
            /*背景切割*/
            -webkit-background-clip: text;
            /*
             -webkit-background-clip
                 text           从文本区域开始实现背景
                 border-box     从边框开始实现背景
                 content-box    从内容区域开始实现背景
                 padding-box    从padding区域开始实现背景
            */
        }
    </style>
</head>
<body>
    <div>王者荣耀</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浏览器内核例子</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -ms-transition:1s;
            -o-transition: 1s;
            transition: 1s;
        }
        body:hover div{
            width: 400px;
        }
    </style>
</head>
<body>
    <!--
          -webkit-transition: 1s;   谷歌
            -moz-transition: 1s;    火狐
            -ms-transition:1s;      ie
            -o-transition: 1s;     opera
            transition: 1s;         w3c标准样式
    -->
    <div></div>
</body>
</html>

在这里插入图片描述

脑袋不灵光的小白羊
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS使用盒模型实例讲解
09-24
下面小编就为大家带来一篇CSS使用盒模型实例分析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3中的盒子模型
Lance2574的博客
08-20 660
盒子模型是h5+css3中最核心的基础知识之一，我们理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累和总结的关于css盒子模型的知识，欢迎批评指正。 一、盒子属性 页面布局中的每个元素都可以被看作是一个矩形盒子，具有如下图的一些属性： width & height 用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。 padding 内间距，就是内容区域与外边框之间的距离。 border ...
CSS 盒子模型（box model）
最新发布
小楼一夜听春雨，深巷明朝卖杏花
03-01 2490
盒子虽然变大了但是内容在往中间挤，中间的内容还是在盒子的左上角，剩下的是内边距帮你填充的。如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离。上下是一个值，左右是一个值。，它包括：外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。蓝色的是一个盒子，这是一个元素，这个元素包含内边距padding，边框和外边距。内容文字图片是实物，然后内边距，边框，外边距。
CSS3-盒子模型
dayunhanIT的博客
05-31 239
css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。 图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就...
HTML-div盒子模型
主营前端方向，技术栈是vue
11-09 4118
div盒子模型(边框的border-width宽度，border-color颜色，border-style样式，上右下左四个边框以及简写、内联元素盒子)
CSS3盒子模型
heart000_1
04-15 583
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS盒子模型</title> </head> <body> 盒子模型具有内边距、边框、外边距、宽和高这些基本属性, 但不要求每个属性都设置这些属性. 一、盒子模型的相关属性 1.边框属性 包括边框样式border-style、边框宽度border-width、边框
CSS3盒子模型详解
12-13
本章将介绍CSS3中各种盒的知识点；主要包含以下内容： CSS3中各种各样盒的类型概念、浏览器支持情况； 当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示； 掌握给盒添加阴影的属性； 掌握几种“box-sizing”属性值的不同含义，能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域，以及边框的高度和宽度； 盒的类型 inline-block css中我们使用display来定义盒的类型，总体上分为block与inline类型。 css2.1追加了一个盒类型：inline-block，他属于block类型之一
css盒子模型详解
热门推荐
weixin_44992737的博客
06-10 2万+
css盒子模型，box model，弹性盒模型，怪异盒模型，浏览器内核
008-Web前端-CSS基础理论-盒子模型
快要脑溢血的LEE
05-29 412
盒子模型 #5.29-2 一、盒子模型 ##Def不再赘述 二、W3C盒模型 border边框 有三个要素：宽、样式、颜色，统称“边框三要素”。 三要素书写的时候一般如下顺序 border：宽度 样式 颜色 border: 1px solid red; 样式：点状dotted 实线solid 双线double （ 需要最起码设置为3像素，不然显示不下） 虚线dashed 无边框none margin外边距 会在元素外创建额外的空白区域 外边距是透明的 简写： m.
CSS盒子模型
微风洋洋的博客
02-08 1万+
CSS盒子模型在CSS中算是比较重要的部分了，他已经开始涉及到网页布局和设计了，对于这一块内容要引起重视，多加练习。
CSS盒子模型(详解)
screamn的博客
10-02 756
盒子模型塌陷，扩大。css背景 ，css背景颜色，css颜色介绍,css背景图片，css背景图片怎么填充，css相关知识讲解，css盒子，模型
css盒子模型的讲解
12-03
而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式...
css学习 盒子模型 css基础
06-27
css基础知识讲解 包括各种盒子模型 cascadingstylesheet
配图详细讲解CSS的盒子模型
09-10
CSS几何题.计算出a到x地像素宽度! 配图详细讲解CSS的盒子模型 配图详细讲解CSS的盒子模型
web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置
胜天半子祁同伟
01-28 9402
web前端学习（十九）——CSS3盒子模型（Box Model）、边框属性（border）及轮廓属性（outline）的相关设置
css -盒模型
雪锋的笔记
11-17 456
盒模型 1. 文档流（normalflow） 网页是一个多层的结构，一层摁着一层 通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流 文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列 对于我们来元素主要有两个状态 在文档流中 不在文档流中（脱离文档流） 那么元素在文档流中有什么特点，我们接着往下看 2. 块元素 块元素会在页面中独占一行 默认宽度是父元素的全部（会把父元素撑满） 默认高度是被内容撑开（子元素） 3.
CSS3之盒子模型详解
qq_42445025的博客
06-30 759
CSS3之盒子模型详解 1、什么是盒子模型？ CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 在CSS中盒模型被分为两种：第 一种 是 W3C的标准模型，另一种 是IE的传统模型（也叫怪异盒模型）。 2、W3C 的标准...
CSS3盒子模型的那些事儿(全要点+代码示例+效果展示)
技术圈
03-02 702
CSS3盒模型，是面试时的常见问题，也是开发中不容忽视的部分，该文介绍了盒模型的相关知识。
CSS基础知识(二）——盒子模型
weixin_54799350的博客
06-21 4695
CSS盒子模型相关属性介绍
css3盒子模型怎么设置前端
09-19
在前端开发过程中，可以通过CSS3来设置盒子模型。盒子模型是CSS中布局的基础，可以控制元素的尺寸、边距、填充和边框。 首先，可以使用CSS的`width`和`height`属性来设置盒子的宽度和高度。通过指定一个固定的像素值、百分比或者其他单位，可以精确地定义盒子的尺寸。 其次，可以使用`margin`属性来设置盒子的外边距。外边距可以控制盒子与周围元素之间的间距。可以分别设置上、右、下、左四个方向的外边距，也可以直接设置一个值来统一设置四个方向的外边距。 接着，`padding`属性可以用来设置盒子的内边距。内边距指的是盒子内容与盒子边框之间的距离。同样，可以分别设置四个方向的内边距，或者使用一个值来统一设置。 还可以使用`border`属性来设置盒子的边框。可以指定边框的宽度、样式和颜色。边框样式可以是实线、虚线、点线等，颜色可以是具体的颜色值或者预定义的颜色关键字。 除此之外，CSS3还引入了更多的盒子模型属性，比如`box-shadow`可以设置盒子的阴影效果，`border-radius`可以设置盒子的圆角，`background`可以设置盒子的背景样式等。 总结来说，CSS3盒子模型的设置包括宽度和高度的调整、外边距和内边距的控制、边框样式的定义以及一些附加效果的设置。这些属性的灵活使用可以让前端开发者更好地控制和布局网页中的元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值