盒子模型详解

在html文档中,元素体现为一个一个的方形盒子。每个盒子由以下四种属性来确定他在文档中的位置和大小:

  • content 内容区域
  • padding 内边距
  • border 边框
  • margin 外边距

标准和非标准

标准盒模型 定义下,content占据的空间由(min/max)width,(min/max)height来控制。

而在IE或者是 box-sizing: border-box 模式下,content空间应该还包含了padding和border的宽高。

现在通常使用 box-sizing: border-box 这种非标准盒模型来开发。

content 内容区域

width 与 height

  • width的单位可以是px,rem,em,vw,也可以是百分比%。当单位是%时,取值是父元素宽度的比值。
<!--.div2的宽度是200px( 1000 * 20%)-->

.div1{width: 1000px}
.div1 > .div2{width: 20%} 
  • height的情况会复杂一些,px,rem,em,vh为单位时,效果和width相仿。而为百分比%时,并不会简单的按照父元素的高度来计算。
<!--如果需要让height百分比生效,需要这样设置-->
html, body{height: 100%}
#app, .div1{height: 100%}
.div2{height: 20%}

html代码结构片段

#app
  .div1
    .div2

对子元素的影响

如果内容区域内的元素宽高超出了定义的大小,可以通过overflow:hidden来截断,也可以通过text-overflow: ellipsis来控制文字的溢出。

padding 内边距

padding值指定了content到border之间的距离。不能设置为负值。利用padding的百分比%单位,可以实现盒子的等比缩放。

<!--padding百分比按照父元素宽度计算,所以div2会是一个正方形-->
.div1{width: 100%}
.div1 > .div2{width: 20%;padding-top: 20%}

border 边框

边框包裹在内容区域周围,可以是实线,也可以是虚线,甚至可以使用图片。边框会随着border-radius属性的设置而弯曲。

  • 颜色:边框的颜色会继承字体的颜色。
  • 在移动端手机上,通常使用伪元素方式来实现 1px边框
.1px-top{position: relative}
.1px-top::before{
    content: ‘‘;
    position: absolute;
    width: 100%;
    height: 1px;
    border-top: 1px solid;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}

margin 外边距

margin是定义盒子自身相对于其他盒子的距离。百分比%同样是按照父元素的宽度进行计算。

在多个存在margin-top/bottom的兄弟元素之间,他们相邻的margin值会被合并,取最大的一个进行展示。

div{margin: 10px 0}

下面4个div上下的间距均是10px,而不是20px

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

原文地址:https://www.cnblogs.com/small-coder/p/9110815.html

时间: 2024-10-25 09:13:36

盒子模型详解的相关文章

CSS中的盒子模型详解

很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构! 为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和padding的属性都为0px: 本例子采用行内CSS样式! 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//

17-css盒子模型详解

CSS盒子模型******一个盒子是由以下几个部分构成: 1.盒子中的内容----content 2.盒子的边框----border 3.盒子的边框与内容之间的距离,称为填充----padding,内边距(内补丁) 4.多个盒子存在时,盒子与盒子之间的距离,称之为边界----margin,外边距(外补丁)*****盒子所在的实际宽度为例=左右边界+左右边框+左右内填充******CSS盒子的相关属性 [1].内容属性:内容本身的宽=width,内容本身的高=height [2].内填充属性:内容

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