自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。...为其正名 我们都使用过CSS得外边距,但是当谈到负边距的时候,我们好像往差的方向发展啦。在网页设计中负边距的使用出现了两种极端,一种特别喜欢它,也有一些人认为这完全就是魔鬼的作品。...下面是一些你应该知道的关于负边距的事情: 他们是完全有效的CSS 这不是在跟你开玩笑。W3C甚至都说,在外边框中使用负边距是允许的。要了解更多可以点击这篇文章 负边距不是在hack 这是尤其正确的。...Dreamweaver不理解它 负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢? 与其共事 负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。...学以致用 既然我们知道使用负边距在CSS2中是有效的,使用它可以给我们提供一些非常有趣的CSS技巧。 把单个列表变成三列 如果你有一个列表垂直方向太长了,为什么不把它分成几列呢?
定义 边距包括外边距(Margin)属性和内边距(Padding)属性,外边距属性定义了元素间的间隔,内边距属性定义了元素边框与内容区域之间的空白区域。...概述 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。...外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离,而内边距(padding)则定义了元素内部从边到内容的间隔。...margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。 padding padding规定元素的内边距,该属性不可为负值,其简写形式可一次性设置四个边的内边距。...变更点 CSS3没有增加新的边距属性。
边距:元素与元素之间的距离。(无法靠近) 填充:指向一个元素的内部,增加空间,(内边距),与外边距不同,填充会改变元素的大小。随着填充的增加,元素会被撑大。 ? 示例: ...* { margin: 0; /*将所有的元素边距都设置为0*/ } #box { width: 870px; overflow: auto; margin:...auto; /*让父元素自动设置边距,左右边距相等,即可达到居中效果,水平方向有效。
盒模型是CSS的基石之一,页面的每一个元素都被看作一个矩形框,分别由外边距,边框,内边距,内容组成, ?...在CSS中,width和height的值指的是内容的宽高,增加外边距,边框,内边距并不会对内容造成影响,但是会增加整体的元素框的尺寸,假设10元素的外边距,5元素的内边距,那么要使框达到100元素,就需要给定...它的width属性指的不是内容的宽度,而是内容,内边距,边框的宽度,如上面的例子,在IE6中显示为: image.png CSS3中的box-sizing属性可以定义使用哪种盒模型,但一般很少使用这个属性...当一个元素包含在另一个元素中,假设该元素没有内边距或者边框将外边距分开,那么他们的顶、底边框也会发生重合。 ? 解决这种的情况的方式为给里面的元素增加内边距或者边框。...诸如,以一个典型的几个段落组成的文章为例,如果没有叠加,那么段落之间的边距就会是段落的顶外边距的两倍,但叠加之后,就会有着一样的高度,如图: ?
1、CSS外边距合并 CSS外边距合并,只有上外边距和下外边距才会触发外边距合并,左外边距和右外边距不会。 2、相邻元素合并-上下 源代码: div1 div2 运行效果如下: div1和div2 根据盒子模型的计算规则,div1下边距...实际CSS规则是合并的,因此div1和div2 之间的距离为100px;如果div1的下边距和div2的上边距,边距值不一样,那么以最大的边距为最终取值。 ?...因为上下边距合并,所以div2距离顶部100px;由于左右边距不合并,所以div2距离浏览器左边的距离是200px。 !...下边距,实际占用了100px。
css边距重叠是什么 1、边界重叠是指两个或两个以上盒子的相邻边界重合在一起,构成单一边界。 可以相邻也可以嵌套,其中没有非空内容、补白、边框。 ... .father{ background: #f436365e; overflow: hidden; } .child{ height: 20px; margin...div> this is child1 this is child2 this is child1 以上就是css...边距重叠的介绍,希望对大家有所帮助。...更多css学习指路:css教程 本文教程操作环境:windows7系统、css3版,DELL G3电脑。
边距 在CSS中,边距与填充是两个不同的概念,都是用于控制元素之间的空间和影响页面的布局。...边距(外边距) 边距(margin)是指元素与其相邻元素之间的空间,边距可以用于控制元素之间的距离,影响页面的布局,边距本身没有背景颜色,是完全透明的,不会影响元素的实际大小。...div class="base example3"> 效果: 可使用 margin-top、margin-right、margin-bottom、margin-left 单独设置某一方向的边距...background-color: blue; width: 200px; height: 200px; } 效果: 填充(内边距)
文章目录 一、元素默认的外边距 1、body 标签的默认外边距 2、p 标签的默认外边距 二、清除元素默认的内外边距 1、清除方式 2、代码示例 三、行内元素边距设置 一、元素默认的外边距 ---...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...也消失了 ; 三、行内元素边距设置 ---- 为 行内元素 设置 上下边距 是无效的 , 建议只为 行内元素 设置 左右边距 ; 如果为 行内元素 设置了上下边距 , 可以在某些浏览器或者 web 应用场景出现适配问题...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...默认外边距 显示效果 : 按下 F12 键 , 进入 调试模式 , 选中 span 行内元素 , 为其设置 四个边距 , 只有 左右边距 50px 生效 ;
【负边距】?负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02.【shape-outside】❤不要自以为是了。...BFC应用之阻止外边距合并(margin collapsing) ? 04.【BFC应用】?BFC应用之消除浮动的影响 ? 05.【flex不为认知的特性之一】?...相邻兄弟选择器之常用场景 ? 12.【模态框】?要使模态框背景透明,用rgba是一种简单方式 ? 13.【三角形】?css绘制三角形的原理 ? 14.【table布局】?...可以使用outline来描边,不占地方,它甚至可以在里面 ? 27【背景定位】?当固定背景不随元素滚动时,背景定位是相对于视口的 ? 28【tab-size】?...CSS可以设置动画开始前和结束时所保持的状态 ? 44【动画负延迟】?CSS动画可以设置延迟时间为负数,表示动画仿佛开始前就已经运行过了那么长时间 ? 45【过渡】?爱的魔力转圈圈 ?
.span-2 { position:relative; top:10px; left:10px; } .div-3 { position:absolute; right:0; top:0; } ... .div-1{position:relative;} .div-3 { position:absolute; right:0;
往期文章 详解 CSS3中最好用的布局方式——flex弹性布局(看完就会) [前端CSS高频面试题]如何画0.5px的边框线(详解) CSS3基础属性大全 CSS3动画属性 animation详解(看完就会...) CSS3 transform 2D转换之移动 旋转 缩放(详细讲解看完就会) CSS3 Z—Index 详解 CSS3 positon定位详解(通俗易懂) 目录 响应式布局的方法 ...设置成1em,他是根据最近的字体大小为依据的,他不用必须是父级,同级对字体的修改,也可以用在边距上。...什么意思呢 比如 父元素为2em(32px),子元素又设置了字体大小为1em(16px),子元素边距设置成1em 边距就是16px,子元素如果设置成20px,子元素边距1em,就是20px,他是根据最近的设置的字体大小为依据的...rem在这里就不做演示了 他是根据根元素html设置的字体大小 为倍率进行显示,边距同样也是根据根元素大小进行显示,这一点rem要好很多,rem的使用体验要比em好很多,因为他们都有一个统一的倍率,不用单独计算
负边距[22]是这两种布局中的重中之重 不同点:解决“中间栏div内容不被遮挡”的思路不同 圣杯布局 1.三者都设置向左浮动 2.设置middle宽度为100%; 3.设置负边距, left设置负左边距为...100%, right设置负左边距为负的自身宽度 4.设置content的padding值给左右两个子面板留出空间 5.设置两个子面板为相对定位,left面板的left值为负的left面板宽度,right...面板的right值为负的right面板的值 但是圣杯布局有个问题:当面板的middle部分比两边的子面板宽度小的时候,布局就会乱掉。...3.设置 负边距,left设置负左边距为100%,right设置负左边距为负的自身宽度 4.设置middle-content的margin值给左右两个子面板留出空间。.../zh-CN/docs/Web/Guide/CSS/Block_formatting_context [22] 负边距: http://www.cnblogs.com/2050/archive/2012
第二步:采用负边距将left和right放到左右两边 1....当左右设置不同方向负边距margin-left和margin-right .left{margin-left:-100%;} .right{margin-right:-100px;} 当左右设置同方向负边距...当左右设置不同方向负边距margin-left和margin-right .left{right:100px;} 当左右设置同方向负边距margin-left .left{right:100px;...当左右设置不同方向负边距margin-left和margin-right .content{padding: 0 100px;} .col{ float: left; height:...green; margin-right: -100px; } .center{ width: 100%; background-color: pink; } 当左右设置同方向负边距
边距折叠 简而言之,当两个垂直元素有一个边距,并且其中一个的边距大于另一个时,就会发生边距折叠。 在这种情况下,将使用较大的边距,而忽略另一个边距。...负边距 它可以与四个方向的边距一起使用,在某些用例中非常有用。 让我们假设以下内容: 父级有 padding: 1rem,这导致子级从顶部、左侧和右侧偏移。 但是,子元素应该紧贴其父元素的边缘。...editors=1100 另一个类似的概念是向两边添加填充,然后边距为负。...关于解决方案 #2,它没有 CSS 特异性问题。 但是,它仅适用于一个列堆栈。 更好的解决方案是通过向父元素添加负边距来取消不需要的间距。...负边距是解决办法。
问题分析 在MDN上面有这么一段文字: 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距的最大值,这种行为称为边距折叠。...solid transparent; middle元素设置padding:padding-top: 1px; 注意事项 如果参与折叠的margin中包含负值,折叠后的margin的值为最大的正边距与最小的负边距...(即绝对值最大的负边距)的和;也就是说如果有-10px,10px,30px叠在一起,margin的范围就是 30px-10px=20px。...如果所有参与折叠的外边距都为负,折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。...参考链接 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ----
用9种办法解决 JS 闭包经典面试题之 for 循环取 i 匹配一段由数字和大写字母组成的字符串的正则表达式 答:/[A-Z0-9]/ 参考学习: 系统地学习正则表达式(一):基础篇 web...html块级元素与行内元素 前端面试之CSS总结(上) 你真的了解盒模型吗?...CSS 布局经典问题初步整理 怎样对网站文件和资源进行优化 答: 1.尽可能减少http请求次数,将css, js, 图片各自合并 2.使用CDN,降低通信距离 3.添加Expire/Cache-Control...头 4.启用Gzip压缩文件 5.将css放在页面最上面 6.将script放在页面最下面 7.避免在css中使用表达式 8.将css, js都放在外部文件中 9.减少DNS查询 10.最小化...两栏布局 答:使用负边距 元素content添加父元素,设置左浮动,宽度为100%; content 设置右边距,宽度为aside的宽度(留出aside浮上来的空间); aside左浮动,并设置负边距
领取专属 10元无门槛券
手把手带您无忧上云