css布局

外边距的合并

首先要明白,外边界的合并出现在垂直方向上,由于默认的普通流中,块级元素从上到下排列,通过margin来控制元素之前的相互距离。但是有这个普通流中对于垂直上的边距有以下几个特征。

  1. 父子外边距。一个元素包含一个元素后。
  • 我们给子元素设置一个边距的话,它会默认的添加到父元素上面。


    0_1481550574971_1.png
    0_1481550574971_1.png
  • 父元素和子元素都有垂直方向的margin,取2个绝对值的最大值合并外边界。


    0_1481551692021_2.png
    0_1481551692021_2.png
  1. 兄弟元素的外边距合并
  • 在同一个容器内包裹的2个元素之前会出现垂直方向上,一个元素的下边界和一个元素的上边界会发生合并。


    0_1481552597275_3.png
    0_1481552597275_3.png
  • 也可以通过浮动元素来解决问题。
  1. 空元素外边距合并
  • 空元素的上下边距也会合并,取上下边距的最大值合并。

如果我们想不让兄弟元素的外边距合并

我们可以让之中一个元素形成自己的空间即BFC

0_1481553040971_4.png
0_1481553040971_4.png

在这个基础上我试了下margin-top: 20px,由于形成了独立的BFC,所以父子外边距合并的问题也可以解决了。
进一步想,如果我不给container添加形成BFC的样式,那个外边距合并的问题还是不会消除。也可以给2个元素都添加包含容器,分别形成BFC,来消除外边距合并的问题。

父子元素的消除外边距合并

  1. 可以给父元素添加一个border
  2. 给父元素添加一个padding
  3. 给子元素一个容器形成一个独立的BFC特别主要在子元素上面添加形成BFC,是没有作用的,只会相对于子元素的子元素形成了一个独立的空间
  4. 让父元素形成一个独立的BFC
    查看demo

去除inline-block缝隙的常用做法

案例分析,我们想用inline-block让ul中的li水平排列。实现了需求,发现没有设置margin,但是中间出现了一些间隙

0_1481554340550_5.png
0_1481554340550_5.png

理解这个间隙的由来,行内元素对于文字中出现多个空格会默认的变成一个空格,由于inline-block的有行内元素的特性,所以默认的每一个元素之间出现了空格,但是你又会想,在IE情况下,为什么没有空格,其实是IE的bug,它有一个haslayout。消除间隙的一些方法。

  1. 给一个父元素添加一个font-size:0,然后给子元素添加字号大小font-size:16px
  2. 改变标签的样式,让相互结束的时候不出现空格
<li>首页</li><li>博客</li><li>学习</li>
    <li>首页</li
    ><li>博客</li
    ><li>学习</li>
  1. 通过负边距来实现,给元素添加一个margin-left: -4px,然后给第一个子元素消除负边距。

父容器使用overflow: auto| hidden撑开高度的原理

案例分析当一个元素内部的子元素出现浮动的时候,由于浮动元素脱离了普通文本流,所以父元素感觉不到元素的高度,所以就出现了传说中高度塌陷。

0_1481556118543_6.png
0_1481556118543_6.png

神奇的事情发生了,我们不清除浮动,通过overflow: auto| hidden就可以撑开高度了。如果你不理解BFC这个,可能不知道这个原理,让给父元素添加了overflow: auto| hidden的时候,父元素形成了一个BFC,由于BFC的特性之一,可以感知浮动元素的高度,所以撑开了高度。

BFC的理解

  1. BFC是什么。BFC(块级元素格式上下文)形成了一个独立的空间,空间内部和外部没有影响。我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。
  2. 形成BFC的条件
  • overflow不为visible。常用的auto``hidden
  • 浮动元素和绝对定位元素
  • 非块级盒子的块级容器。display:inline-block display:table-cells display:table-captions
  1. BFC作用
  • 可以让父元素看到内部浮动的子元素
  • 可以运用于清楚外边距合并的问题。
  • 可以清楚浮动元素对文字的影响,由于默认情况下,文字会围绕在浮动元素旁边,但是形成了BFC,就不受外面的元素影响。

浮动导致的父容器高度塌陷

原因当一个元素内部的子元素出现浮动的时候,由于浮动元素脱离了普通文本流,所以父元素感觉不到元素的高度,所以就出现了传说中高度塌陷。
解决方法

  1. 清除内部浮动(注意兼容性)
.parent:after{
  display: block;
  clear: both;
  content:"";
}
0_1481557266890_7.png
0_1481557266890_7.png
  1. 父元素形成BFC,能够感知到浮动元素的高度。(注意bug)
.parent{
  border: 2px solid;
  overflow: hidden;
}

清楚浮动的代码作用

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
.clearfix{
    *zoom: 1;
}

我们来一个个解析
给class=clearfix的元素添加一个after伪类,重要的是伪类里面的这三行代码

  1. content: ""content属性为空,相对于为元素添加了一个空内容的行内元素。
  2. display: block 让这个行内元素变成块级元素占据一行。
  3. clear: both; 清楚这个块级元素左右2边的浮动
.clearfix{
    *zoom: 1;
}
用来触发IE浏览器的haslayout 解决ie下的浮动,撑开元素

又要想为什么不是:before呢?这样做了为什么可以呢?
我们给元素添加这个伪类,就是在元素最后面添加了一个块级元素,并且这个块级元素没有内容,清除了浮动,摆在了浮动元素的最后面,让元素显示出包裹了浮动元素的效果。

和BFC的区别

我们这样通过伪类清楚浮动元素,并不是父元素感觉到了子元素中的浮动元素,而是在后面添加了一个块级元素。而元素形成BFC,是因为元素感觉到了子元素中浮动元素的宽度,而不是通过添加元素撑开父元素。


代码题

代码一地址

老师这个我做了一个响应式的,900px的时候会改变,麻烦老师看看需要修改的

代码二地址

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • CSS布局模型 布局:将元素以正确的大小摆放在正确的位置上 CSS包含3种基本的布局模型流动模型(Flow)浮动模...
    _空空阅读 1,030评论 0 4
  • 前言 css一直不是我的强项,这也是我第一篇css相关的文章,虽然我平时css写的比较少,但其中比较重要的基础...
    ITgecko阅读 387评论 0 7
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 856评论 0 4
  • 花了大概两周的时间看完这本书。Emmmm…研究生阶段的第一本学术书籍。内容很简单,有点类似人物传记,所以读起来很轻...
    五五家小妹阅读 1,161评论 0 0