盒模型详解

(1)未加任何修饰的盒模型

 1 <template>
 2   <div>
 3     <div class="top">上列</div>
 4     <div class="bottom">下列</div>

 5   </div>
 6 </template>
 7
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13
14 <style scoped>
15   .top{
16     background: blue;
17     width: 300px;
18     height: 300px;
19   }
20   .bottom{
21     background: red;
22     height: 300px;
23     width: 300px;
24   }
25 </style>

(2)在上列中加入border,即:

 1 <template>
 2   <div>
 3     <div class="top">上列</div>
 4     <div class="bottom">下列</div>

 5   </div>
 6 </template>
 7
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13
14 <style scoped>
15   .top{
16     background: blue;
17     width: 300px;
18     height: 300px;
19     border: 55px solid #111;
20   }
21   .bottom{
22     background: red;
23     height: 300px;
24     width: 300px;
25   }
26 </style>

可见,并没有使整体变大,而是让里面的内容变小了;

(3)给上列中加1个margin,即:

 1 <template>
 2   <div>
 3     <div class="top">上列</div>
 4     <div class="bottom">下列</div>

 5   </div>
 6 </template>
 7
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13
14 <style scoped>
15   .top{
16     background: blue;
17     width: 300px;
18     height: 300px;
19     border: 55px solid #111;
20     margin: 10px;
21   }
22   .bottom{
23     background: red;
24     height: 300px;
25     width: 300px;
26   }
27 </style>

可以看出,上列的大小不变,但位置进行了移动,且保持与其它元素一定的距离;

(4)给上列加1个padding,即:

 1 <template>
 2   <div>
 3     <div class="top">上列</div>
 4     <div class="bottom">下列</div>

 5   </div>
 6 </template>
 7
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13
14 <style scoped>
15   .top{
16     background: blue;
17     width: 300px;
18     height: 300px;
19     border: 55px solid #111;
20     margin: 10px;
21     padding: 20px;
22     color: aliceblue;
23   }
24   .bottom{
25     background: red;
26     height: 300px;
27     width: 300px;
28   }
29 </style>

可以看出,上列两个字往内进行了收缩。

(5)上下margin叠加的问题

 1 <template>
 2   <div>
 3     <div class="top">上列</div>
 4     <div class="bottom">下列</div>
 5   </div>
 6 </template>
 7
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13
14 <style scoped>
15   .top{
16     background: blue;
17     width: 300px;
18     height: 300px;
19     border: 55px solid #111;
20     margin: 10px;
21     color: aliceblue;
22   }
23   .bottom{
24     background: red;
25     height: 300px;
26     width: 300px;
27     border: 55px solid #111;
28     margin: 10px; //这里margin作为对比,前者不加,后者加
29   }
30 </style>

从对比效果图可以看出,上下列的margin被抵消了1个10px;同时,若二者大小不同,以较大的margin值为准。

当某个元素设置了float属性,那么它们将不再进行空白边叠加;如下:

 1 <template>
 2   <div>
 3     <div class="top">上列</div>
 4     <div class="bottom">下列</div>

 5   </div>
 6 </template>
 7
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13
14 <style scoped>
15   .top{
16     background: blue;
17     width: 300px;
18     height: 300px;
19     border: 55px solid #111;
20     margin: 10px;
21     color: aliceblue;
22     float: left;
23   }
24   .bottom{
25     background: red;
26     height: 300px;
27     width: 300px;
28     border: 55px solid #111;
29     margin: 10px;
30     float: left;
31     clear: left;
32   }
33 </style>

可以看出,这时二者中间的宽度为20px;

(6)左右浮动margin加倍问题

按照书上的写法会报错,以后再来验证吧!

原文地址:https://www.cnblogs.com/lanyb009/p/9241367.html

时间: 2024-10-11 10:36:06

盒模型详解的相关文章

css盒模型详解

盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系. css定义所有的元素都可以拥有像盒子一样的外形和平面空间. 即都包含内容区.补白(填充).边框.边界(外边距)这就是盒模型. 换句话说,盒模型就如同一个房子,除了内部的货物以外,内部的其他空间就相当于接下来要介绍的padding属性: 房子的墙壁就相对于border属性: 房屋院子就相当于margin属性: 房屋占地面积=内部货物+内部其他空间+墙壁宽度+院子面积. 综上所述,盒模型的总大小=内部元素+padding空间+b

2017年总结的前端文章——CSS盒模型详解

CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了.很多博客里讲得也很模糊不清,于是,我在这里重新整理一下. 可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型. 盒模型分为IE盒模型和W3C标准盒模型. IE盒模型和W3C标准盒模型的区别是什么? 1. W3C 标准盒模型: 属性width,height只包含内容content,不包含border和padding. 2. IE 盒模型: 属性wid

OSI七层模型详解 TCP/IP协议

总结 OSI中的层 功能 TCP/IP协议族 应用层 文件传输,电子邮件,文件服务,虚拟终端 TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet 等等 表示层 数据格式化,代码转换,数据加密 没有协议 会话层 解除或建立与别的接点的联系 没有协议 传输层 提供端对端的接口 TCP,UDP 网络层 为数据包选择路由 IP,ICMP,OSPF,EIGRP,IGMP 数据链路层 传输有地址的帧以及错误检测功能 SLIP,CSLIP,PPP,MTU 物理层 以二进制数据形式在物理媒体上

日志模型详解

日志模型详解 NET Core的日志模型主要由三个核心对象构成,它们分别是Logger.LoggerProvider和LoggerFactory.总的来说,LoggerProvider提供一个具体的Logger对象将格式化的日志消息写入相应的目的地,但是我们在编程过程中使用的Logger对象则由LoggerFactory创建,这个Logger利用注册到LoggerFactory的LoggerProvider来提供真正具有日志写入功能的Logger,并委托后者来记录日志. 目录一.Logger  

Extjs4.10Model模型详解

一.创建Model模型 Extjs4.10提供了两种方法来创建Model模型,也就是创建类 方法一: Ext.define('person',{ extend:'Ext.data.Model'     //必须继承类 fields:[ {name:'name',type:'auto'}, {name:'age',type:'int'}, {name:'email',type:'auto'}, ] }); 方法二: Ext.regModel('person',{ fields:[ {name:'n

ThinkPHP中视图模型详解.

很多TP的新手对于模型中的视图模型不甚了解,官方虽然有详细手册,但是对于初学者来说还是比较难以理解! 先简单说一下视图模型所能实现的功能,基本就是主表与副表之间各个字段的关联问题,实现多表关联查询,相对于使用原生SQL语句来说,着实是简单不少. 首先在数据表初始化的时候,用的不是传统的M('User'),在视图模型中使用的是D('UserView'),如下图: 需要主要的是几个单词的首字母大写. 之后在Lib/Model目录中新建名为XXXViewModel.class.php(XXX为任意控制

配置模型详解

ASP.NET Core的配置(2):配置模型详解 在上面一章我们以实例演示的方式介绍了几种读取配置的几种方式,其中涉及到三个重要的对象,它们分别是承载结构化配置信息的Configuration,提供原始配置源数据的ConfigurationProvider,以及作为“中间人”的ConfigurationBuilder.接下来我们将会对由这三个核心对象组成的配置模型进行详细介绍,不过在此之前我们有必要来认识配置信息在不同载体中所体现出来的三种结构. 目录一.配置的三种结构逻辑结构原始结构物理结构

CUDA C 编程指导(二):CUDA编程模型详解

CUDA编程模型详解 本文以vectorAdd为例,通过描述C在CUDA中的使用(vectorAdd这个例子可以在CUDA sample中找到.)来介绍CUDA编程模型的主要概念.CUDA C的进一步描述可以参考<Programming Interface>. 主要内容包括: 1.Kernels(核函数) 2.Thread Hierarchy(线程结构) 3.Memory Hierarchy(存储结构) 4.Heterogeneous Programming(异构编程) 5.Compute C

WSAEventSelect模型详解

WSAEventSelect 是 WinSock 提供的一种异步事件通知I/O模型,与 WSAAsyncSelect模型有些类似.       该模型同样是接收 FD_XXX 之类的网络事件,但是是通过事件对象句柄通知,而非像 WSAAsyncSelect一样依靠Windows的消息驱动机制. 与WSAAsyncSelect模型相同,WSAEventSelect将所有的SOCKET事件分为如下类型:(共十种)                FD_READ , FD_WRITE , FD_OOB