您现在的位置是:网站首页> 编程资料编程资料
CSS的margin属性在页面布局中的使用攻略浅谈css margin重叠CSS 之margin知识点(必看)css布局之负margin妙用及其他实现细说CSS中margin属性的使用 深入解析CSS中margin属性的使用CSS中使用负margin值来调整居中位置CSS属性探秘系列(六):margin解决margin 外边距合并问题
2021-09-05
983人已围观
简介 margin属性可以决定很多HTML元素的宽高度,因而在布局方面也能够有很重要的作用,接下来我们就来看一下CSS的margin属性在页面布局中的使用攻略
基础
1.元素containing-box宽高度等于内容宽度
HTML
- <div class="wrap">
- <div class="item1">div>
- <div class="item2">div>
- div>
CSS
- .wrap {
- float: left;
- border: 2px solid #000;
- }
- .item1 {
- width: 100px;
- height: 100px;
- background: #fdf;
- margin-left: 10px;
- margin-top: 10px;
- margin-right: 20px;
- margin-bottom: 30px;
- }
- item2 {
- width: 50px;
- height: 50px;
- background: #adf;
- }
能满足原理1的条件只有一种,元素不设宽度且不在文档流中,此时,父元素wrap产生的containing-box的宽高宽度等子元素border-box的宽高度加上外边距的宽高度,也就是说,子元素的margin值也是其containing-box的一部分。margin一共有两类参考线,第一类是margin-top与margin-left的参考线,第二类是margin-bottom与margin-right的参考线,第一类margin的参考线是以其所处的containing-box的边缘线为参考线,如上例所示,当调整元素.item1的margin-top与margin-left的值时,元素.item1所处的containing-box的大小也在发生变化因此其边缘线也在不断变化同时也就导致.item1元素自身的位置也在发生变化,看起来就是.item1自身发生了移动。第二类margin的参考线是以元素自身的边缘线(外边距的外侧为边缘线)为参考线,同样的,调整上例中的margin-bottom值,.item1的margin-bottom也在不断的发生变化,也就是说其自身边缘线在不断的移动,同时导致了.item2的移动。根据上面的论述,我们可以得出结论,外边距的调整也就等于让其自身相对的参考线的位置在发生移动,同时导致相对于参考线运动的元素发生移动。元素自身相对于containing-box的边缘线移动而移动,与元素自身为兄弟关系的元素相对于元素自身的边缘线移动而移动。参考线示意图如图所示,按箭头所指方向使参考线变化的margin值都为正值。
综上,我们可以利用margin对元素自身进行移动,同时也可让其相邻元素进行移动,移动的同时我们需要知道的是其所处的containing-box的大小也在发生变化。
综上,当元素宽高度等于内容宽高度时,可通过调整内容的margin值来调整其containing-box的大小,因为containing-box的变化也就会导致元素本身的移动,也就是说既可以移动元素,也可调整元素与元素之间的间距。
2.元素内容宽度等于其containing-box的宽度
- <div class="wrap">
- <div class="wrap-inner">div>
- div>
- .wrap {
- width: 100px;
- border: 2px solid #000;
- margin: 0 auto;
- }
- .wrap-inner {
- height: 50px;
- background: #fdf;
- }
上例中,元素wrap-inner的border-box宽度加上margin的大小等于其containing-box的宽度,因此当containing-box宽度固定,根据公式'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block,调整其自身margin-left或margin-right值,便会使wrap-inner自身大小发生变化,margin-left为正值且值逐渐变大,则wrap-inner自身宽度逐渐变小,若margin-left为负值且逐渐变小,则wrap-inner自身宽度逐渐变大,margin-right同理。一定要注意这里的宽度继承和width:100%是有本质区别的,因为width:100%就等于它的containing-box的100%和它的margin,border或者padding都木有关系,具体可看我的关于宽度与高度讨论的系列文章三里的例子,罗嗦了一点,但是这里是容易犯错误的地方。一定要注意,一定要注意,一定要注意!!!。重要的事情说三遍。
将margin-left和right调整为-10px,如图,根据计算,wrap-inner变宽
将margin-left和right调整为10px,如图,根据计算,wrap-inner变窄
综上,当元素宽或高度等于其containing-box的宽度或高度时,且containing-box的宽度固定我们便可以利用margin对其进行自身宽度大小的调整。也就是说宽高度和containing-box有关系时,我们利用margin可进行内里元素大小的调整。
不同元素margin的计算
行内级元素
Inline,非置换元素:如果margin值为auto,则margin-left和margin-right的计算值也就为0
Inline,置换元素:同上
Inline-block,置换元素在文档流中:同上
Inline-block,非置换元素在文档流中:同上
块级元素
块级非置换元素,在文档流中
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
下面的情况下,如果margin值为auto
如果width是auto值,那么其他值是auto的值就为0
如果margin-left和margin-right的值为auto,使用的值相等,那么就相对于包含块水平居中。
块级置换元素,在文档流中
同块级非置换元素一样。
小结
行内级置换元素和非置换元素,在margin值为auto时,margin-left和margin-auto的计算值都为0。
块级置换元素和非置换元素:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
如果width是auto值,那么其他值是auto的值就为0
如果margin-left和margin-right的值为auto,使用的值相等,那么就相对于包含块水平居中。
利用Margin进行布局
通常在布局中我们会遇到那些问题呢?下面是我自己实践中遇到的一些问题
问题1
当我们拿到一份设计稿,然后这份设计稿有像下面这样的布局,整体居中,里面元素排一排,当然布局的方式会有很多种,那么如果我们采用浮动布局或者display:inline-block进行布局会出现什么问题呢,如图我们可以看出,若采用上述两种方式进行布局,那么每个块的宽度加上间隙,就会超出包含块的宽度,当然我们也可以将包含块的宽度进行增大以留下足够的位置供元素摆放,但是这种方法明显是不可取的,那么如何解决这个位置不够的问题呢,可以看下面的栗子1 。
栗子
html
- <div class="container">
- <div class="inner-wrap">
- <div class="inner">div>
- <div class="inner">div>
- <div class="inner">div>
- div>
- div>
css
- body {
- margin: 0;
- }
- .container {
- margin: 0 auto;
- width: 980px;
- }
- .inner-wrap {
- margin-left: -10px;
- }
- .inner {
- float: left;
- margin-left: 10px;
- width: 320px;
- height: 200px;
- background: #2df;
- }
此布局便利用了原理2,利用负margin增加了inner-wrap的宽度,但不改变整体的宽的情况下,实现效果。如下
问题2
上面的例子仅仅只是实现了三列固定宽度的布局,这样的布局当屏幕宽度发生变化的时候便会出现问题。因此我们便会有如下需求。
左右列固定,中间列自适应
栗子
html
- <div class="main">
- <div class="main-content">div>
- div>
- <div class="left"提示:
本文由神整理自网络,如有侵权请联系本站删除!
本站声明:
1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!
相关内容
- CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)HTML5的video标签的浏览器兼容性增强方案分享Win10 Edge浏览器无缝兼容Chrome扩展主流浏览器css兼容问题汇总浅谈JavaScript中浏览器兼容的问题
- table-cell完成左侧定宽,右侧定宽及左右定宽等布局的实现方法css实现元素居中的N种方法div水平布局两边对齐的三种实现方法waterfall瀑布流布局+动态渲染的实现页面中有间隔的方格布局如何完美实现方法css实现六种自适应两栏布局方式使用flex布局轻松实现页面布局的示例代码使用Flex布局实现头部固定内容区域滚动的方法详解flex布局下图片变形的解决方法详解flex布局与position:absolute/fixed的冲突问题Flex布局实现div内部子元素垂直居中的示例
- css中常用的几种居中方法(推荐)jquery结合CSS实现的多样式多视频列表连播效果源码深入理解css中的align-content属性深入理解CSS中的盒子模型CSS3实用方法总结(推荐)CSS中的各种选择器与样式优先级小结CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)
- 弹窗居中的简单实现方法淡入淡出效果的居中弹窗代码
- 深入理解css中的align-content属性jquery结合CSS实现的多样式多视频列表连播效果源码css中常用的几种居中方法(推荐)深入理解CSS中的盒子模型CSS3实用方法总结(推荐)CSS中的各种选择器与样式优先级小结CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)
- CSS中的各种选择器与样式优先级小结css选择器设置标签样式的实例代码CSS3 :not()选择器实现最后一行li去除某种css样式详解CSS中的选择器优先级及样式层叠问题解决CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式html中css三种常见的样式选择器CSS 样式的使用方式、选择器
- 总结CSS中字符编码声明使用中的一些注意点深入理解CSS中的盒子模型CSS移动优先的12列响应式网格系统特效源码CSS3实用方法总结(推荐)CSS中的各种选择器与样式优先级小结使用CSS3的rem属性制作响应式页面布局的要点解析CSS中的字体大小设置属性总结CSS3弹性盒模型flex box快速入门心得(必看篇)轻松掌握CSS3中的字体大小单位rem的使用方法深入理解css中的align-content属性
- CSS中的选择器种类总结及效率比较CSS 设置技巧(单位和值与样式设置技巧)CSS3制作精致的照片墙特效CSS3轻松实现清新 Loading 效果的简单实例CSS 高级技巧总结(必看)浅谈CSS样式之背景、文本
- 纯CSS实现鼠标悬停显示图片效果的实例分享CSS中的选择器种类总结及效率比较浅谈css清除浮动(clearfix和clear)的用法彻底掌握CSS中的percentage百分比值使用CSS z-index 层级关系优先级的概念CSS中的line-height行高属性学习教程CSS 高级技巧总结(必看)
- 浅谈css清除浮动(clearfix和clear)的用法CSS清除浮动方法大全(小结)CSS3 清除浮动的方法示例CSS清除浮动float的三种方法小结清除css浮动的三种方法小结详解css清除浮动float的七种常用方法总结和兼容性处理浅谈css中浮动和清除浮动带来的影响CSS清除浮动方法小结浅谈CSS中的clear清除浮动CSS清除浮动的方法详解CSS清除浮动的常用方法优缺点分析
点击排行
本栏推荐
