17-css盒子模型详解

CSS盒子模型
******一个盒子是由以下几个部分构成:
  1、盒子中的内容----content
  2、盒子的边框----border
  3、盒子的边框与内容之间的距离,称为填充----padding,内边距(内补丁)
  4、多个盒子存在时,盒子与盒子之间的距离,称之为边界----margin,外边距(外补丁)
*****盒子所在的实际宽度为例=左右边界+左右边框+左右内填充
******CSS盒子的相关属性
  【1】、内容属性:内容本身的宽=width,内容本身的高=height
  【2】、内填充属性:内容与边界之间的距离 padding
*****在定义盒子的宽度时,要考虑到,内填充,边框,边界的存在
  如果增加了内填充了,整个盒子的宽度值,要再减去,你增加的内填充值
*****将来在使用外边距时,要注意浏览器的兼容性问题
******除了值为零的情况下,所有的非零的值都要加上单位
******由于各个游览器存在着,内外边距的,默认值,都不相同
  我们需要将所有浏览器的默认内外边距,都从零开始计算。
  在实际工作中,不要用 *{margin:0;padding:0;},但是效率最低
  所以我们是用到了哪些元素,就把哪些元素的默认值,归零。
  css的属性,虽然有继承的特点,但是,并不是,所有的属性都有继承

  W3C组织建议把s所有网页上的对像都放在一个盒(box)中,------盒子模型
  设计师可以通过创建自定义来控制盒子的属性,这些对象包括段落、列表、标题、图片及层<div>
  盒模型主要定义四个区域:内容(content)、填充(padding)、边框(border)和边界(margin)
  这里的边界我们也称之为:外边框、外补丁;填充也叫:内边距、内补丁

  

  整个盒子模型在页面中所占的宽度是由
左边界+左边框+左填充+内容+右填充+右边框+右边界

由盒子堆出来的网页版面

CSS控制元素的尺寸
  设置元素的宽度 width:100px;
  设置元素的高度 height:100px;
  设置元素的某一个方向外边距 margin-top/right/bottom/left:10px;
  通知参数个数不 margin:10px; 上下左右四个方向
  同来设置元素的 margin:10px 20px; 上下 左右
  外边距 margin:10px 20px 30px; 上 左右 下
     margin:10px 20px 30px 40px;上 右 下 左
  设置元素的内边框 padding:上 右 下 左

原文地址:https://www.cnblogs.com/xiang-liang/p/12545433.html

时间: 2024-11-01 00:17:40

17-css盒子模型详解的相关文章

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

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

盒子模型详解

在html文档中,元素体现为一个一个的方形盒子.每个盒子由以下四种属性来确定他在文档中的位置和大小: content 内容区域 padding 内边距 border 边框 margin 外边距 标准和非标准 在 标准盒模型 定义下,content占据的空间由(min/max)width,(min/max)height来控制. 而在IE或者是 box-sizing: border-box 模式下,content空间应该还包含了padding和border的宽高. 现在通常使用 box-sizing

CSS盒子模型中外边距(margin)折叠详解

最近写项目过程中遇到一个CSS盒子模型中外边距(margin)折叠的情况,搞得我焦头烂额,之后再网上查阅了大量的资料,现做一个整理和总结,方便以后忘记的时候查阅,同时也供广大网友参考.如有错误或者总结方面不全的地方,欢饮广大网友指出. 外边距折叠的概念:所谓外边距折叠就是相邻的两个或多个元素(含有子元素的情况)的外边距会在垂直方向上合并成一个一个外边距. CSS盒子模型中外边距(margin)折叠的常见情形有如下2种: 情况1.无子元素的相邻兄弟元素 触发margin折叠的条件:两个元素之间没有

日志模型详解

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

[CSS3] 学习笔记--CSS盒子模型

1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,border内,属性有5个: padding:设置所有边距 padding-bottom:设置底边距 padding-left:设置左边距 padding-right:设置右边距 padding-top:设置上边距 3.边框 我们可以创建效果出色的边框,并且可以应用于任何元素.边框的样式为border-st

配置模型详解

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

[转]CSS vertical-align属性详解 作者:黄映焜

CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. 留言评论 返回顶部 前言:关于vertical-align属性 vertical-align属性可能是CSS属性中比较不好理解的一个. W3C对它的解释是:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐. 本文将通过一系列实例实验说明它的作用. [注:将鼠标放置到本文的图片上可看到辅助线] 实践