css盒模型详解

盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。

css定义所有的元素都可以拥有像盒子一样的外形和平面空间。

即都包含内容区、补白(填充)、边框、边界(外边距)这就是盒模型。

换句话说,盒模型就如同一个房子,除了内部的货物以外,内部的其他空间就相当于接下来要介绍的padding属性;

房子的墙壁就相对于border属性

房屋院子就相当于margin属性;

房屋占地面积=内部货物+内部其他空间+墙壁宽度+院子面积。

综上所述,盒模型的总大小=内部元素+padding空间+border空间+margin空间

Padding详解

1、padding是在盒子里面,在盒子与内容之间;

2、padding的作用:控制子元素在父元素里面的位置关系。

3、padding会把盒子撑大,如果父元素设置了高度或宽度,

  需要减去对应的padding值才能保证父元素原来的大小,

  如果父元素没有设置高度或宽度就不用管

4、如果给单一方向添加padding,padding-top/left/right/bottom

5、padding值的的个数

  1个值表示四周

  2个值表示左右、上下

  3个值表示上、左右、下

  4个值不是上、右、下、左

margin详解

1、margin在元素外围,不会改变元素大小,但会增大元素所占空间

2、作用:控制元素与元素之间的距离

3、如果给单一方向添加margin,margin-top/left/right/bottom

4、margin值的的个数

  1个值表示四周

  2个值表示左右、上下

  3个值表示上、左右、下

  4个值不是上、右、下、左

如果感觉对自己有帮助,麻烦点一下关注,会一直和大家分享知识的,谢谢!!!

原文地址:https://www.cnblogs.com/piaoyi1997/p/12596566.html

时间: 2024-10-05 03:14:21

css盒模型详解的相关文章

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

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

盒模型详解

(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 </scr

【div+css网页布局详解】

前言: 网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法. 用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率. 因为现在css3和之前css2有较大改动,咱们先从css2的说起吧. (笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml) 一.单列布局 一个网页编写手先要搭一个框架,就像下图样:

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

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

css盒模型

css盒子模型是为了让我们充分理解div+css模型的定位功能,盒子模型在学习div+css布局方式中必须要学习的一个模型. 那什么是css盒模型呢? 网页设计中常听到的属性名:内容(content).填充(padding).边框(border).边界(margin).css盒模型都具备这些属性.这些属性和日常生活中盒子的属性是一样的.内容就是盒子里面装的东西,而填充就是像盒子里装的一些反震的材料,边框就是箱子的本身,边界呢就像盒子之间的空隙. 盒子的模型有2种,分别是IE盒子模型和标准盒子模型

第16章 CSS盒模型下

第 16章 CSS盒模型[下]学习要点:1.元素可见性2.元素盒类型3.元素的浮动 本章主要探讨 HTML5中 CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性使用visibility属性可以实现元素的可见性,这种样式一般可以配合 JavaScript来实现效果.样式表如下:属性 visibility 值 说明 CSS版本visible 默认值,元素在页面上可见 2hidden 元素不可见,但会占据空间. 2collapse 元素不可见,隐藏表格的行与列. 2 如果不

CSS 盒模型

CSS盒模型也叫框模型,具备内容(content).内边距(padding).边框(border).外边距(margin)这些属性.在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: border:元素的边框(可能不可见),用于将框的边缘与其他框分开: margin:外边距,表示框的边缘与相邻框之间的距离: padding:内边距,表示框内容和边框之间的空间. 盒模型的结构如下图所示: 由上图可以看出,width和height指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响

css盒模型和块级、行内元素深入理解

一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起.添加边框会在内边距区域外边增加一条线.这些线可以有不同的样式和宽度,如实线.虚线.点画线.在边框外边的是外边距,外边距是透明的,一般使用它控制元

div+css定位position详解

div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来. 首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么? 看如下代码: 2 2.预览效果,现在是三个并列的div 3 3.给中间的div增加定位属性:position:relative; top:10px; left:10