在盒布局中,控制子盒子显示顺序的方法有哪些_百度知道
在盒布局中,控制子盒子显示顺序的方法有哪些
我有更好的答案
向杲与同父异母兄向晟感情甚笃。向晟与歌姬波斯相恋，向杲劝说母亲替波斯赎身，与兄完婚。
采纳率：42%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
html&div class="setting"&
&div class="layout-left"&left&/div&
&div class="layout-right"&
&div class="change"&change&/div&
&div class="change"&change&/div&
&div class="change"&change&/div&
&div class="change"&change&/div&
&div class="text"&right&/div&
&div class="text"&right&/div&
&div class="text"&right&/div&
&div class="text"&right&/div&
&p&next...&/p&
&button&click me&/button&
css.setting{
display: -moz-
display: -webkit-
display: -ms-
.setting & div{padding:0 20border:1px solid #999;}
.change{background:}
javascript$('button').click(function(){
$('.change').hide();
前后效果图对比：||
可以看到，点击按钮，红色背景的.change{display:}但是外围使用了盒模型样式的.setting的高度竟然没有变化，这是为什么？怎么解决？
写了个小，可以直接点击看效果
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我这样试了试，可以：
$('button').click(function(){
$('.change').hide();
$('.setting & div').css('min-height', '1px');
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。一、网页布局的几种情况
今天让我们总结一下在css布局的各种情况做一个总结，为我们以后布局网页时做一个参考。
先看一张图，这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的：
如图所示，css布局可以分为以下几大块：
盒子内部的布局
文本的布局
盒模型本身的布局
盒子之间的布局visual formatting
脱离正常流normal flow的盒子的布局
absolute布局上下文下的布局
float布局上下文下的布局
正常流normal flow下的盒子的布局
BFC布局上下文下的布局
IFC布局上下文下的布局
FFC布局上下文下的布局
table布局上下文下的布局
css grid布局上下文下的布局
二、盒模型（Box moudle）
css假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心都有一个内容区(content area)。这个内容区周围有可选的内边距（padding）、边框（border）、外边距（margin）。这就是css中的盒模型。
每个元素都相对于其包含块摆放，可以这么说，包含块就是一个元素的“布局上下文”。
包含块由最近的块级祖先元素、表单元格或行内块祖先元素的内容边界（content edge）构成。考虑下面的代码：
&div class=&father&&
&p class=&son&&This is paragraph&/p&
在这个例子中p的包含块是div元素，因为div是p元素最近的块级祖先元素，类似的，div的包含块是body。所以，p的布局依赖div的布局，而div的布局依赖body的布局。
三、块级元素与行级元素的对比
块级元素的解析
块级元素特点
默认情况下，块级元素会在其框前和框后产生“换行”，并尽可能的充满整个容器。
元素的水平格式化
水平格式化的7大属性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。
这7个属性值加起来往往是包含块width值。
在盒模型中，内边距、边框、和内容宽度（及高度）不能为负值，只有外边距可以为负值。利用定位以及负margin可以设置盒子在页面中的居中。
&div class=&box& style=&width: 100 height: 100 position: left: 50%; top: 50%;
margin-left: -50 margin-top:-50background:& &&/div&
元素的垂直格式化
类似于水平格式化，垂直格式化的7个相关属性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，这7个属性的总和必须等于父级元素的height属性。
其中margin-top，margin-bottom和height可以设置成auto;
一个正常流中的块元素的margin-top和margin-bottom设置为auto后，会被设置为0，即不能将元素垂直居中，实际上元素没有外边距。定位元素如果设置成auto有不同的处理结果。
如果正常流元素的height设置为auto，则其高度将会被设置为其内容元素的高度总和
垂直外边距合并
垂直外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
width: 200 height: 200 background: }
margin-bottom: 100
margin-top:50
设置值为auto
其中margin-left，width，margin-right可以设置为auto。当设置margin-left与margin-right的值为auto而width的值为特定值时，会使盒子水平居中。
当设置三个值都为auto时，浏览器会将margin-left与margin-right设置为0，而将width会尽可能的宽。而当设置三个值为固定值时，按css术语来讲，这些格式化属性过分受限，此时总会把margin-right强制为auto；
行级元素的解析
行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间，只能包含数据和其他行内元素。行级元素不能设置宽高，不能设置上下margin、和padding
行内元素会生成一个内容区，类似于块级元素的content部分，内容区的大小与字体的大小相等。内容区加上文字的上下边距就等于行内框的高度，可以通过设置line-height的高度控制行内框的高度。行框是包含该行中行内框最高点和最低点的最小框。如下图
在行级元素中替换元素是一个例外，他既可以设置宽高，也可以设置margin和padding,它类似于inline-block。
行级元素与块级元素的嵌套关系
行级元素嵌套行级元素
块级元素嵌套块级元素，块级元素内嵌套行级元素。
少数块级级元素不能嵌套块级元素例如：p不能嵌套div标签,标题标签中最好不要嵌套div。
阅读(...) 评论()CSS的盒模型布局（第四周）
CSS的盒模型布局
一、盒模型：
CSS的盒模型用于定义元素的内部布局，包括元素自身的高宽及元素周边边距：
Width：用于定义元素的所占宽度，对块级和内嵌元素有不同的说法，祥见后续博文。
Height：用于定义元素的所占高度，对块级和内嵌元素有不同的说法，详见后续博文。
Padding：用于定义元素的内边距，对块级和内嵌元素同时起作用。
Margin：用于定义元素的外边距，对块级和内嵌元素同时起作用。
Border：用于定义元素的边框，对块级和内嵌元素同时起作用。
默认情况下，浏览器按照在源文件中元素出现的先后顺序来顺序安排文档流的布局，这种布局方式称为正常文档流布局，正常文档流布局是在文档中对各个元素实体进行顺序编排的一种非常重要的布局。
二、浮动：
元素的浮动说明了元素可以在文档中有一个粗略的漂移，这种粗略的漂移往往不能对元素进行一个正确定位。浮动的本质是利用Float属性清除元素实体的左右空间，让后续元素与当前元素进行紧密排列。而利用Clear属性则可以恢复Float清除的空间，使后续元素的排列又重新还原至正常文档流。浮动是改变正常文档流排版的一种非常重要的功能。浮动的内涵比较深，祥见。
三、定位：
定位主要分为相对定位与绝对定位；相对定位与绝对定位都是相对于容器左上角进行定位，不同的是绝对定位完全从正常文档流中脱离出来形成一种独立的排版形式，而相对定位的元素实体仍然处在正常文档流中，只是在相对定位时，元素实体可以模拟出一个虚体进行任意定位，二者在区别与联系上的内涵较深，详见的阐述。
四、包含与叠加：
这里的包含是指父级容器包含子级容器中存在的尺寸不够时的各种处理方案；这里处理方案包括溢出处理（Overflow）、裁剪处理(Clip)、可见性处理(Display)及(Visibility)等
其中：溢出处理（Overflow）有：
Visible：从上到下、从左到右，能显示多少就显示多少，不裁减内容也不添加滚动条。
Hidden：不显示超出对象尺寸内容。
Scroll：能不能显示完全都提供滚动条。
Auto：不能显示时才提供滚动条。
裁剪处理（Clip）采用Rect（）函数并加上Top、Right、Bottom、Left参数指明对对象的裁减区域。
可见性处理(Display)：提供了块级转换元素Block、内嵌转换元素Inline和隐藏元素None(这种操作将是元素从正常文档流中脱离出来)
可见性处理(Visibility)：Visible（使元素可见）、Inherit(继承父级元素的显示属性)
Hidden(隐藏元素)这种操作仍然保留正常文档流中的原始空间。
元素的叠加是指两个在不同平面上的元素相互层叠，这只有在绝对定位的元素参与下才可能存在这个特点，处理层叠顺序的属性是Z-Index；这个属性值越大，元素就越接近于表层。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。