2011.11.11 盒模型边框及内外边距

最新推荐文章于 2022-07-21 16:00:57 发布
最新推荐文章于 2022-07-21 16:00:57 发布
阅读量266 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61556597/article/details/121277851
版权

盒模型边框

  1. 边框会影响盒子大小
  2. 设置细边框border-collpase:collpase合并相邻边框制成细边框，防止边框堆叠增加视觉上边框的变粗

padding内边距

  1. padding设置 padding-left padding-top padding-buttom padding-right 单独设置上下左右内边距，盒子内边距padding:一个值 上下左右 ，两个值上下 左右 ，三个值 上 左右 下 ，四个值 上下左右
  2. padding影响盒子大小padding会影响盒子实际大小 解决:height和width减去内边距大小即可，width减去左右内边距之和，weight减去上下内边距和
  3. padding不撑盒子的情况padding不会撑开盒子的情况?子标签未设置宽高设置高，如果有上下内边距就撑开高，有左右边距就撑开宽，不继承高度继承宽度

margin盒子外边距

  1. margin的书写margin-left margin-top margin-left margin-bottom外边距，margin的复写形式与padding一样(一到四个值)
  2. 盒子水平居中盒子必须有宽度，设置 margin的左右边距为auto即可，例如 margin:100 auto;
  3. 防止嵌套块元素坍塌1父标签设置上内边框或上内边距，2父标签设置overflow:hidden
  4. 浏览器对元素默认设置边距清除内外边距:*{padding:0;margin:0;｝
    行内元素尽量只设置左右外边距，不设置上下外边距
m0_61556597
关注
专栏目录
IEEE_802.11无线协议中文.pdf
01-04
IEEE_802.11无线协议中文.pdf
“margin”外边距的各种奇特现象
老司机的后备箱
12-20 600
总的来说，我们在使用margin的时候还是要时刻注意一下这四种现象，特别是块级嵌套元素的塌陷现象,在我们使用margin来进行页面布局的时候很容易就出现塌陷现象，因此我们推荐在给父子元素之间设置距离的时候，最好使用padding，在兄弟元素之间设置距离的时候再使用margin，这样就能有效避免上述所出现的问题。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
盒子模型
Yang_Xingxing_的博客
05-15 333
盒子模型 页面布局三大核心，盒子模型、浮动和定位。 1. 网页布局 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子Box。 利用CSS设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容。 网页布局的核心本质：就是利用CSS摆盒子。 2. 盒子模型（Box Model）组成 所谓盒子模型：就是把HTML页面中的布局元素看作是 一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，他包括：边框、外边距、内边距和实际内容。 border 边框 c
行内元素的margin只能左右有效。上下无效。
weixin_30955341的博客
09-22 648
行内元素的margin只能左右有效。上下无效。 转载于:https://www.cnblogs.com/sweetXiaoma/p/5896374.html
行内元素的宽高不能设置,垂直外边距无用
chenzhawu3547的博客
05-26 1037
在标准文档流里面，块级元素具有以下特点： ①总是在新行上开始，占据一整行； ②高度，行高以及外边距和内边距都可控制； ③宽带始终是与浏览器宽度一样，与内容无关； ④它可以容纳内联元素和其他块元素。 行内元素的特点： ①和其他元素都在一行上； ②高，行高及外边距和内边距部分可改变； ③宽度...
前端入门css学习笔记（十四）-----行内元素和行内块元素
m0_61656944的博客
01-13 133
几乎也是一样的检查方式，行内元素默认自带的属性是：display:inline 例如以下这几种是常见的行内元素： 注意：行内元素不能设置高度和大小！ 行内快元素：display: inline-block; 例如：<img> <imput>等标签就是行内快元素，可以设置高度和大小。 ...
matlab_802.11b物理物理仿真模型_wifi指标测试
05-04
802.11b phy simulink model仿真，基于matlab对wifi重要指标测试。 802.11b PHY Simulink model simulation, WiFi important index test based on MATLAB
802.11协议(07版与12版)
03-30
这一版本主要包含了之前所有802.11的修正和增强，比如802.11a、802.11b、802.11g和802.11n。802.11n是一个重要的更新，它引入了多输入多输出（MIMO）技术，显著提高了无线网络的速度，最大理论速率可达600Mbps。同时...
泰克-802.11物理层规范海报
11-01
从那以后，802.11标准不断地发展和扩展，出现了不同的版本，例如802.11a、802.11b、802.11g、802.11n以及最新的802.11ax（也称为Wi-Fi 6）。每一个版本都对传输速率、使用的频段、信号调制方式、MIMO技术的使用等...
华为Wi-Fi 6(IEEE 802.11ax)技术白皮书.pdf
05-30
Wi-Fi6是下一代802.11ax 标准的简称。随着Wi -Fi 标准的 演进WFA为了便于Wi-Fi用户和设备厂商轻松了解其设备连接或支持的Wi-Fi型号,选择使用数字序号来对Wi-Fi 重新命名.另一方面，选择新一代命名方法也是为了更好地...
行级，块级，行内块
weixin_72686458的博客
07-21 165
1、块级元素特性总结 没有设置宽高的时候，宽继承父元素的宽度，高度由内容撑开 默认独立成行——默认垂直布局 具有盒模型特征（默认可以设置宽度、高度、padding、margin、border）可以设置上下左右的内边距和外边距。 2、行内（行级）元素特性总结 宽度默认由内容撑开 高度默认由内容撑开 默认横向显示——默认水平布局，相邻的行级元素会在同一行显示，直到一行排不下，才会换行 换行和空格会被解析 不能设置宽高 只能设置左右的外边距，不能设置上下的外边距 可以设置上下左右的内边距和边框。 行内元素只能容纳
盒子模型——内边距、外边距
lanheit的博客
02-25 1772
内边距——padding 性质： 1.给一个盒子设置内边距会撑开盒子，需要精确的计算盒子的宽和高。可以考虑用css3标签 box-sizing:border-box不会因为设置内边距而撑开盒子。 2.如果盒子不指定width，或者不指定height就不会撑开盒子。 3.padding和text-indent相比更具有优越性，text-indent不能修改文字和盒子边框的距离。 外边距margin： 性质： 1.可以让块级盒子水平居中： 必须有宽度：...
CSS学习之盒模型
21号先锋者
02-10 111
盒模型：所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。可见的板式模型主要 由三个属性控制：position属性、display属性和float属性。 position属性控制页面上元素间的位置关系。 disp...
html span设置外边距,行内元素内外边距探究：为何span设置上下margin和padding不起效...
weixin_32666933的博客
06-04 5179
一直以为行内元素设置内外边距会不起效，之前也没有具体的去实验，只是在需要设置 margin 或者 padding 的时候给元素设置一个 display: inline-block; 就得了。今天正好有时间，就来实验了一把。原来 span 标签默认的不是只能设置左右边距，还有更有意思的现象。我给 span 标签设置了 10px 的内边距和外边距，并设置了背景色，外面嵌套一个 p 标签。从 span ...
css随便看看的第5天
m0_49641709的博客
10-24 74
1.盒子水平居中 让盒子水平居中，需要满足一下两个条件： (1).必须是块级元素 (2).盒子必须指定了宽度 然后给盒子左右外边距设置为auto 示例 .header{width:300px;margin:0 auto;} 文字水平居中是 text-align:center; 2.外边距合并 注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。们尽量不要给行内元素指定上下的内外边距就好了。 相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时，如果上面的元
盒子模型margin边距问题
weixin_43628243的博客
08-20 463
使用 margin定义块元素的垂直外边距时，可能会出现外边距的合并。 主要有两种情况: 相邻块元素垂直外边距的合并 嵌套块元素垂直外边距的塌陷 1. 相邻块元素垂直外边距的合并 当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。`取两个值中的 较大者这种现象被称为相邻块元素垂直外边距的合并 解决方案： 尽量只给一个盒子添加
5116-微信小程序电影院订票选座系统设计及实现+ssm（源码+数据库+lun文）.zip
最新发布
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
JavaScript 中的 `Array.prototype.filter` 方法全解析
09-15
在 JavaScript 编程中，处理数组是一项基本而重要的任务。数组的过滤操作是其中的一个常见需求，Array.prototype.filter 方法为此提供了强大的支持。本文将深入探讨 Array.prototype.filter 方法的工作原理、使用场景、代码示例以及与其他数组方法的比较。 Array.prototype.filter 是 JavaScript 中处理数组的强大工具，它允许开发者以声明式的方式轻松筛选出符合特定条件的元素。通过结合使用 Array.prototype.filter 和其他数组方法，可以解决各种复杂的数据筛选问题。 通过本文的详细介绍和示例代码，你应该能够掌握 Array.prototype.filter 的工作原理，并能够在实际开发中灵活运用它来处理数组数据。此外，了解其与 Array.prototype.map 和 Array.prototype.reduce 的结合使用，可以帮助你更好地编写高效且易于维护的代码。
5108-微信小程序的书橱+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
802.11无线网络详解：从基础到实践
"802.11无线WiFi协议学习手册-无线网络权威指南(华为第二版全)"，这是一本全面介绍802.11无线网络协议的专业书籍，由华为出版，针对802.11协议进行了深入解析。 在书中，作者首先介绍了无线网络的基本概念和需求。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值