一般情况下,行内元素只能包含数据和其他行内元素。 而块级元素可以包含行内元素和其他块级元素.
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟主机、营销软件、网站建设、边坝网站维护、网站推广。
行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;
而块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。
行内元素尺寸由内含的内容决定,盒模型中 padding, border 与块级元素并无差异,都是标准的盒模型,但是 margin 却只有水平方向的值,垂直方向并没有起作用。
块级元素当没有明确指定 width 和 height 值时,块级元素尺寸由内容确定,当指定了 width 和 height 的值时,内容超出块级元素的尺寸就会溢出,这时块级元素要呈现什么行为要看其 overflow 的值
当使用div+css布局时,会出现很多的div嵌套——父div内嵌套一个或多个的子div,默认情况下,父div的高度是auto——它可以被子div任意的撑大。
父div也可以有固定的高度(或宽度),比如height:500px,那么如果子div的高度超过了这个值,在默认情况下,子div会超出父div的束缚,这就是溢出
1.如果父元素已经规定了高度,不会高度塌陷,但可能会溢出(如果子元素总高度超过父元素的话)
解决方法:overflow属性,使多余部分不显示
2.如果父元素没有规定高度:常规流盒子在自动计算高度时,无视浮动盒子——高度坍塌
如果所有子元素都浮动,父元素没有高度,这时候给父元素设置边框的话,就会发现边框保不住子元素;
如果存在没有浮动的子元素,父元素高度取决于没有浮动的子元素,所以如果浮动子元素高度更大的话,还是会塌陷
定位体系之一,常用于布局,可以很轻松的达到靠左靠右的效果,就是布局后要处理浮动带来的后续影响(父级高度塌陷)
常用语法:float:left左浮动/right右浮动/none不浮动;
任何元素都可以使用浮动,无论是块级元素div、ul等等,还是行内元素都可以浮动
任何被声明float的元素都会自动被设置成块元素,有了块级元素的各种特点,可以设置宽高,可以设置内外边距。
(1)左浮动的盒子向上向左排列;
(2)右浮动的盒子向上向右排列;
(3)(第二个)浮动盒子的顶边不得高于上一个盒子的顶边(上边在一条直线上);
(4)若剩余空间无法放下浮动的盒子,则该盒子向下移动,直至具备足够的空间可以容纳盒子,然后再向左或向右移动。
浮动盒子在摆放时会避开常规盒子
常规盒子会无视浮动盒子
常规盒子在计算高度时,无视浮动盒子(其余常规盒子高度低于浮动盒子,容易高度塌陷)
块级盒子常规1在前,浮动避让到第二行,常规2在浮动后面,但是无视浮动盒子,呈现上图,大盒子是上面常规盒子的高度之和
因为没有常规子盒子,常规盒子计算高度忽略浮动元素,高度塌陷
1、背景无法显示
由于浮动的设置,如果对父级设置了CSS 背景 background、CSS背景颜色或CSS背景图片,则父级元素将不能被撑开,所以导致CSS背景不能显示。
2、边框无法撑开
如果父级设置了CSS边框 border 属性,由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin、padding 设置值无法正确显示
由于浮动的设置,导致父级子级之间设置了 margin 或 padding 属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
可以直接在元素上添加:after{添加下列内容},也可以直接使用.clearfix这个class属性
.clearfix:after{
content: ""; /内容设置为空!!!/
display: block; /显示为块级元素!!!/
height: 0;
visibility: hidden;
clear: both; /清除浮动!!!/
}
通过3行代码 content: ""; display: block; clear: both;
(必须写的内容)便可实现。
如果在IE6和IE7浏览器上使用,则需给clearfix添加一条属性zoom:1;以触发 haslayout
。
clear:both/left/right
所谓“隔墙法”是指在元素里面或外面添加一堵“墙”,即块元素,通过对其配置一定的CSS属性,以达到清除浮动的目的。
外墙法 :在元素与元素之间新增一个块元素,并设置clear属性。
<div class="box1"> ... </div>
<div style="clear:both"> </div>
<div class="box2"> ... </div>
内墙法 :在父元素里的所有子元素之后新增一个块元素(即父元素的last-child),并设置clear属性
<div class="box1">
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<div class="clear"></div>
</div>
新增的块margin-buttom不能使用,但是下个元素的buttom-top可以使用
这个方法所能体现的优点:1. 避免了多余标签的使用; 2. 可以兼容大部分浏览器。
overflow:hidden;可以解决子元素溢出问题,还能解决高度塌陷问题.这里父盒子的高度小于子盒子中浮动盒子的高度,这是塌陷问题,不是溢出问题,多出部分不会被裁
如图,父级盒子是两个盒子的高度撑起来的,没有被裁掉的情况
overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动。
看到的一个理解:overflow: hidden的含义是超出的部分要裁切隐藏,float的元素虽然不在普通流中,但是他是浮动在普通流之上的,可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下,它要计算内容的全部高度才能确定在什么位置hidden,这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开,清除浮动。深入理解overflow
BFC (Block Formatting Context)全称是块级格式化上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素 设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成 一个独立的作用域一样,新开僻的BFC像是开僻了一个新的小宇宙,使这个块圾元素内部的排版完全独立隔绝。
BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。
独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,也就是说包含块会把浮动元素的高度也计算在内,所以不用清除浮动来撑起高度。overflow清除原理
一个HTML元素要创建BFC,则满足下列的任意一个或多个条件即可: 下列方式会创建块格式化上下文:
BFC是什么?怎么触发
解决这个问题的方法就是:破坏上面"相邻边界(其间没有任何非空内容,补白,边框)重合在一起"这个条件,
属于同一个BFC的两个相邻的Box会发生margin重叠,所以我们可以设置,两个不同的BFC解决重叠问题.
1.父子元素边界重叠:子元素添加 margin-top ,父元素下移(margin-top对父盒子作用了),子盒子跟父盒子间的垂直距离不变.
.father{
width: 500px;
height: 500px;
background-color: red;
/* border: #000000 3px solid; 1. 给父元素添加边框 */
/* padding-top: 100px; 2.给父元素添加内填充,用 padding
替换margin-top */
/* overflow: hidden; 3.设置 overflow:hidden; */
/* position: absolute; 4.父元素设置绝对定位 */
/* float: left; 5.父元素设置浮动 */
/* display: inline-block; 6.父元素修改元素类型 */
}
/* .father::before{
content: "a";
display: block; */
/* overflow: hidden; 7.使用伪对象选择器,给父元素前添加
内容,虽然为空,但是添加属性 overflow:hidden; 可以消除影响 */
}
————————————————
对子元素设置
son{
width: 300px;
height: 300px;
background-color: green;
margin-top: 100px;
/* position: absolute; 8.子元素设置绝对定位 */
/* float: left; 9.子元素设置浮动 */
/* border: #000000 3px solid; 给子元素添加边框无效 */
}
浮动元素和绝对定位元素不参与边距合并。
父元素添加 overflow:hidden/auto , display: inline-block;这两种方法是将父元素转化为BFC(页面布局中一块独立区域,其边距等属性不受其他元素影响。)
给父元素添加 border 和 padding 可以消除,是从 css 触发规范上解决问题
2.兄弟元素边界重叠(绝对值大的边界保留)上下盒子添加外边距重叠问题
解决方法:定位,浮动,display修改类型
边距重叠
补充:文字出现的链接有针对某一部分的解释,借鉴学习并整理
分享标题:怎么样子盒子能撑起父盒子?浮动,BFC,边距重叠
本文路径:https://www.cdcxhl.com/article40/dsojcho.html
成都网站建设公司_创新互联,为您提供网站策划、关键词优化、外贸建站、品牌网站建设、搜索引擎优化、网站营销
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联