浮动定位BFC边距合并

  1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
    当一个元素浮动之后,它会被移出正常的文档流,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。
    如果父元素原来的没有加浮动属性的元素撑开的,那么当元素加浮动属性后,父元素的高度为0.
    普通文档流中的元素不会让位置给浮动的元素,这时可能会发生普通文档流中的元素被浮动的元素覆盖的情况,
    文字会围绕这浮动元素,不和浮动的元素抢地盘。
    如果很多个元素都设置向左浮动,他们会排成一列,直到排满一行无法在排列之后,会换行排列。

  2. 清除浮动指什么? 如何清除浮动? 两种以上方法
    当给元素加上浮动属性后,他可能会覆盖其他的元素,或者和其他没有加浮动属性的元素在同一行,如果我们不想让添加了浮动属性的元素影响到其他元素时,就应该使用清除浮动来消除他(浮动的元素)对其他元素的影响。
    第一种方法:给浮动元素的周围添加clear:left或者clear:right属性,注意此种方法消除的是左边有向左浮动的元素或者右边有向右浮动的元素。
    第二种方法:使用BFC方式消除浮动,给浮动元素周围的其他元素再嵌套一层div,并设置新增加的div的overflow属性为hidden。(其他能够触发BFC的属性皆可)。

  3. 有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
    inherit继承:继承父元素的position属性
    static无定位:没有定位,元素出现在普通文档流中,设置top, right, bottom, left不起任何作用。
    absolute绝对定位:生成绝对定位的元素,相对于第一个position的值不是static的父元素定位
    relative相对定位:生成相对定位的元素,相对于自己正常应该所处的位置进行定位
    fixd固定定位:固定在浏览器的窗口中,不会随着窗口的滚动和产生位置变化,相对用浏览器窗口进行定位。
    sticky混合定位:当元素本身的位置应该在窗口时,采取相对定位。当元素在窗口中不可见时,采取固定定位。

  4. z-index 有什么作用? 如何使用?
    控制元素层叠顺序,z-index解决重叠时的显示次序问题
    所有的层都可以用一个整数(z轴顺序)来表明当前层在z轴的位置。 数字越大, 元素越接近观察者。Z轴顺序用CSS的[z-index]属性来指定。
    使用方法:
    先设置元素的定位不是static(继承父元素也可以,但是不能为static),再设置z-index的值。老师说并不是z-index的值越大就一定能显示到最前面,我查阅了一些文章发现,这种情况跟父元素的z-index的值也相关,如果是同级的元素,z-index的值越大显示的越靠近用户。

  5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
    position:relative是让元素自己的位置发生了变化,脱离了普通文档流,可以遮挡其他元素。
    负margin没有使元素脱离普通文档流,不会遮挡其他元素的正常显示。

  6. BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
    块级格式化上下文,是一块页面上独立的区域(容器),可以是一个block,可以一个inline-block元素,或者是一个具有浮动属性或者绝对定位(绝对定位,固定定位)的元素,overflow属性不是visiable的元素。

如果想创建BFC,有以下几个方法:

float 除了none以外的值
overflow 除了visible 以外的值(hidden,auto,scroll )
display (table-cell,table-caption,inline-block, flex, inline-flex)
position值为(absolute,fixed)
这几种方法都会引发一些我们不愿意见到的事情,具体的使用针对不同的情况而定。

BFC的作用:

1.阻止垂直外边距折叠
2.不会重叠浮动元素
3.可以包含浮动
4.清除浮动
举例说明作用1:阻止垂直外边距折叠
创建了三个div块并且给他们设置了margin: 20px的属性,但是发现上下的间距重合了,这是我们要给他们设置不同的BFC就可以消除垂直外边距折叠。

一般情况

我们只给AB两个div的外面各自加了一层div,为他们各自创建了一个BFC,使他们不在一个div下。
创建不同BFC之后

原理很简单,我们可以当做每个BFC都有一套自己的规则,不能互相影响,BFC像是一道墙,将他们分隔开。

  1. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
    会出现外边距合并的场景:
    1.同一个BFC中的处于普通文档流中的垂直相邻元素外边距会合并。
    2.块级父元素和他的第一个、最后一个子元素
    3.空的块级元素。
    外边距合并规则:
    1.当两边的margin都是正数时,取两者中较大的值;
    2.当两边的margin值都是负数时,取其中绝对值较大的负向位移;
    3.当两边的margin值有正有负的时候,先取绝对值较大的负值,然后和正的值最大的相加。
    4.所有相邻的元素要一起参与运算,不能分步进行。
    不让相邻元素外边距合并的方法:为他们各自创建一个BFC,使他们不在一个BFC中。
    HTML代码:
 <div class="ct">
    <div class=box>
        <h5>111</h5>
    </div>
    <div class=box>
        <h5>222</h5>
    </div>
</div>

CSS代码:

.ct {
    width: 600px;
    height: 600px;
    border: 1px solid;
}
.box {
    background-color: #0f0;
    /* overflow: hidden;   */
    margin: 100px;
}
h5 {
    background-color: #00f;
    margin: 100px;            
}

按照我们的设想,h5用100px的外边距,.box也有100px的外边距,上方和下方应该都是100px,而中间应该有200px的外边距才是。



这时我们可以看到,上中下的边距是一致的,这是因为子元素h5和父元素div之间发生了父子外边距合并

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,100评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,308评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,718评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,275评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,376评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,454评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,464评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,248评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,686评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,817评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,484评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2 351

推荐阅读更多精彩内容

  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 936评论 0 2
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:浮动元素脱离普通文档流,普通...
    山门龙龙阅读 287评论 0 2
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 任何定义为float的元素,都可以...
    QQQQQCY阅读 260评论 0 0
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征: 脱离正常文档流,沿其容器的左侧...
    _Dot912阅读 709评论 0 3
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素不在文档的普通流中,它可以...
    饥人谷_Young丶K阅读 426评论 0 0