浮动定位BFC边距合并

1.浮动元素有什么特征?对父容器,其他浮动元素,普通元素,文字分别有什么影响?

特征:元素脱离文档流,按照指定方向发生移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘,普通流中的元素表现的就像浮动元素不存在一样。
父容器影响:浮动元素脱离文档流向左右移动,直到边框碰到父元素的边缘,就会发生父元素高度塌陷问题。
其他浮动元素影响:父容器宽度能够容纳所有浮动元素,就会水平排列;超出父容器宽度的其他浮动元素就会向下移动,直到有足够空间;如果浮动元素高度不同,那么向下移动的时候就会卡住。
普通元素影响:浮动元素之前的普通元素不受影响,浮动元素之后的普通元素因感知不到浮动元素的存在而被浮动元素覆盖。
文字影响:文字所在的行框因为浮动元素的挤压而缩短,从而围绕浮动元素排列。

2.清除浮动指什么?如何清除浮动?两种以上方法

清除浮动指:浮动元素脱离文档流,父元素无法感知浮动元素的容量,如果父元素未设置高度值,父元素高度将无法被浮动元素撑开。就发生了父容器高度塌陷问题
清除浮动元素方法
(1)在父元素的子元素的的最后添加一个没有高度的块级元素的标签,设置属性clear: both;清除浮动,还可以撑开父元素
(2)after伪类清除浮动 (解决浏览器兼容问题)

.clearfix{
    *zoom: 1;
}
.clearfix{
    content: " ";
    display: block;   //display: table;
    clear: both;
}

(3)使父容器形成BFC
因为BFC可以包含浮动,因此可以让父元素生成一个新的BFC从而包围浮动的子元素。可以对父元素设定以下样式之一生成新BFC。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

3.有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?

有6种定位方式
inherit:从父元素继承position的值
static:默认值,没有定位,元素出现在正常流中
relative:相对定位,相对于元素本身正常位置进行定位,通过top、bottom、left、right属性来设置偏移量。
absolute:绝对定位,相对于static定位以外的第一个父元素进行定位,如果没有已定位的父元素则以html标签为参考进行定位。
fixed:固定定位,相对于浏览器窗口进行定位。
sticky:表现类似position: relative和position: fixed的合体,目标区域在屏幕中可见时,它的行为就像是position: relative;当页面滚动超过屏幕时,它的行为就像是position: fixed,它会固定在目标位置。

4.z-index有什么作用?如何使用?

因为绝对定位的元素脱离了普通流,所以绝对定位的元素可以覆盖页面上的其他元素,可以给z-index设置属性值来控制叠放顺序,z-index越高,元素位置越靠上。

5.position: relative和负margin都可以使元素位置发生偏移?二者有什么区别

posotion: relative 只相对于自己原本位置发生偏移,不影响其他普通流中元素的位置。
负margin 除了让元素自身发生偏移还会影响其他普通流中的元素

6.BFC是什么?如何生成BFC?BFC有什么作用?举例说明

BFC(Block Format Content)
BFC的生成方法

float: left|right
overflow: auto|hidden|scroll
display: inline-block|table-cell|table-caption
position: absolute|fixed

作用
(1)解决margin重叠问题,margin重叠是指处于同一个BFC中的相邻元素,嵌套元素,只要他们之间没有阻挡(例如padding、border、文字)就会margin重叠,这是只要让其中一个元素形成新的BFC就解决margin重叠问题。
(2)清除浮动,BFC可以包含浮动,让父容器形成一个新的BFC。

7.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例

外边距合并的三个场景:
(1)同一个BFC中,且同属于普通流中的垂直相邻元素外边距合并。
(2)父子外边距合并。
(3)空元素外边距合并。
合并规则:
(1)margin都是正值的时候,取两者之间的较大值。
(2)margin都是负值时,取绝对值较大的值。
(3)margin有正值有负值的时候,先取出负margin中绝对值较大的,然后和正margin最大值相加。
(4)所有毗邻的margin一起参与运算,不能分布进行。
不让相邻元素外边距合并的方法:
(1)被非空内容、padding、border和或clear分隔开。
(2)不在一个普通流中或BFC中。
(3)margin在垂直方向上不相邻。
父子外边距合并
相邻元素外边距合并

代码

实现alert效果
实现表单效果
实现模态框效果
实现导航栏效果

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

推荐阅读更多精彩内容