9159金沙游艺场

图片 3
nginx启用HSTS以支持从http到https不通过服务端而自动跳转

python中lambda函数使用用法

关于图片自适应不同分辩率屏幕

简单尝试

为了保证信息显示完整,保证图片随可视区域宽度变化而宽度自适应,我直接给图片标签设置了宽度100%,具体效果请看:图片宽度自适应(2)。

和示例一一样,我们还是手动改变可视区域宽度来观看图片的表现:

图片 1

现在看来图片是可以根据可视区域宽度自适应了,但是问题来了:首先,所有图片不论原始大小宽窄一律以可是区域宽度为标准了,齐刷刷的一刀切,毫无美感;其次,当较宽显示区域显示较窄图片时,图片出现严重失真,甚至失去识别度。好吧,窄屏的问题解决了,宽屏的问题有来了,不知道这是要闹哪样!但是问题出来了,我们总要想办法去解决啊,那怎么办呢?

常用做法是给图片宽度width: 100%;max-width:
 无法预知用户将使用多大宽度的图片 max无法控制 所以我们从父元素考虑

参考

张鑫旭-《CSS世界》


作者简介:

中文名:石头
英文名:micstone
某电商平台前端程序员一名,偶尔也写写后端代码,工作经历2016.7~至今。

1 赞 1 收藏
评论

图片 2

浅谈图片宽度自适应解决方案

2015/10/19 · CSS,
HTML5 · 3
评论 ·
自适应

原文出处: 百码山庄   

在网页设计中,随着响应式设计的到来,各种响应式设计方案层出不穷。对于图片响应式的问题也有很多前端开发人员在进行研究。比较好的图片响应式设想便是在不同的屏幕分辨率下使用不同实际尺寸的图片,而达到在高速网络环境中使用大或超大高清图片,在低速网络或需要替用户节省流量资源的环境中使用小而清晰的图片,保证用户无论在何种环境下都能有良好的浏览体验。然而这是一个庞大而具有挑战的工作,我这里不做这个讨论,因为我目前还没有这方面很好的实践。这里我是要跟大家讨论下同一张图片在不同宽度的显示区域中的显示问题。

css        
                                                                       
                 

3. float与流体布局

使用float可以通过破坏正常的文档流实现CSS环绕,但是却带来了”高度塌陷”的问题!然而我们可以利用float破坏正常文档流的特性实现一些常用的布局:

  • 文字环绕变身-中间内容居中,左中右布局

直接看例子:

<div class=”box”> <a href=”javascript:;”
class=”fl”>左青龙</a> <a href=”javascript:;”
class=”fr”>右白虎</a> <h3
class=”text-center”>标题</h3> </div>

1
2
3
4
5
<div class="box">
    <a href="javascript:;" class="fl">左青龙</a>
    <a href="javascript:;" class="fr">右白虎</a>
    <h3 class="text-center">标题</h3>
</div>

.box{ background-color: #f5f5f5; } .fl{ float: left; } .fr{ float:
right; } .text-center{ text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
.box{
    background-color: #f5f5f5;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.text-center{
    text-align: center;
}

从下图中看出,实现了中间内容居中的左中右布局。

图片 3

  • 文字环绕的衍生-单侧固定
&lt;div class="box"&gt; &lt;a href="javascript:;"
class="fl"&gt;左青龙&lt;/a&gt; &lt;a href="javascript:;"
class="fr"&gt;右白虎&lt;/a&gt; &lt;h3
class="text-center"&gt;标题&lt;/h3&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384a3401669605-1" class="crayon-line">
&lt;div class=&quot;box&quot;&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-2" class="crayon-line crayon-striped-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fl&quot;&gt;左青龙&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-3" class="crayon-line">
    &lt;a href=&quot;javascript:;&quot; class=&quot;fr&quot;&gt;右白虎&lt;/a&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-4" class="crayon-line crayon-striped-line">
    &lt;h3 class=&quot;text-center&quot;&gt;标题&lt;/h3&gt;
</div>
<div id="crayon-5b8f69ec384a3401669605-5" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

.father{ border: 1px solid #444; overflow: hidden; } .father > img {
width: 60px; height: 64px; float: left; } .girl { /*
环绕和自适应的区别所在 */ margin-left: 70px; }

1
2
3
4
5
6
7
8
9
10
11
12
.father{
    border: 1px solid #444;
    overflow: hidden;
}
.father > img {
    width: 60px; height: 64px;
    float: left;
}
.girl {
    /* 环绕和自适应的区别所在 */
    margin-left: 70px;
}

和文字环绕效果相比,区别就是.girl多了一个margin-left: 70px,同时图片的宽度设置60px,因此不会发生文字环绕的效果。这里,我们也可以不使用margin-left,改用border-left或者padding-left都可以达到改变content
box的尺寸,从而实现宽度自适应布局效果。

图片 4

问题描述

我们先来看下我想要描述的问题。首先我准备了三张宽度不同的图片,让他们垂直排列在页面中,除了去除图片本身在垂直方向上产生的间距,不做其他任何样式处理,这种情况我们通常在博文中经常看到,在写博文的时候经常用到,具体效果请看:图片宽度自适应(1)。简单看下我们的页面结构:

JavaScript

<img src=”imgs/560×200.jpg” alt=””><br> <img
src=”imgs/440×200.jpg” alt=””><br> <img
src=”imgs/300×200.jpg” alt=””>

1
2
3
<img src="imgs/560×200.jpg" alt=""><br>
<img src="imgs/440×200.jpg" alt=""><br>
<img src="imgs/300×200.jpg" alt="">

为了方便查看效果,我们直接调整浏览器宽度来测试。测试效果如下gif图所示:

图片 5

我们不难发现,在我们改变窗口可视区域的时候,图片宽度并不会随之变化,以至于在小屏幕中我们只能开到图片的一部分,这是很多人所不乐见的,因为这极有可能会导致重要信息丢失。那么这个问题如何解决?

.img-wrap {

2.3 块状化

块状化的意思是,一旦元素float的属性不为none,则其display计算值就是block或者table。举个例子:

/* JavaScript代码 */ var span = document.createElement(‘span’)
document.body.appendChild(span) console.log(‘1.’ +
window.getComputedStyle(span).display) // 设置元素左浮动
span.style.cssFloat = ‘left’ console.log(‘2.’ +
window.getComputedStyle(span).display)

1
2
3
4
5
6
7
/* JavaScript代码 */
var span = document.createElement(‘span’)
document.body.appendChild(span)
console.log(‘1.’ + window.getComputedStyle(span).display)
// 设置元素左浮动
span.style.cssFloat = ‘left’
console.log(‘2.’ + window.getComputedStyle(span).display)

在控制台中的结果如下:

1.inline 2.block

1
2
1.inline
2.block

不知道大家有没有跟我一样的疑问:既然设置float后,元素就块状化了,那么怎么还能产生包裹性的效果呢?回答这个问题,需要重新阐述下块状化的意思,这里的块状化意思是可以像block元素一样设置宽和高,并不是真正的块元素。

因此,没有任何理由出现下面的样式组合:

span{ display: block; /* 多余 */ float: left; } span{ float: left;
vertical-align: middle; /* 多余 */ }

1
2
3
4
5
6
7
8
span{
    display: block; /* 多余 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 多余 */
}

兵来将挡,水来土掩

是问题,总有解决的办法,只是成本高低的问题。对于上面这个问题我思考了许久,刚开始我想使用width: 100%;max-width: 图片宽度; 来处理,但是,我发现图片宽度并不统一,max-width需要针对每一个宽度去设置,那根本不可行,无疑是自找麻烦,因为实际应用中,我们完全无法预知用户将使用多大宽度的图片。所以似乎单从控制图片样式已经找不到什么解决办法了,但是我开始关注 width:100%; 的问题。

我们知道,在CSS中,宽度的百分比是是相对于父级容器宽度的。如果我们能有办法控制图片标签的父容器的宽度,那问题是不是就解决了呢?

首先,为了让图片标签有可控的父元素,我们先对代码结构做一点点调整:

JavaScript

<div class=”img-wrap”> <img src=”imgs/560×200.jpg” alt=””>
</div> <div class=”img-wrap”> <img src=”imgs/440×200.jpg”
alt=””> </div> <div class=”img-wrap”> <img
src=”imgs/300×200.jpg” alt=””> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300×200.jpg" alt="">
</div>

好了,接下来就是如何控制img-wrap元素的宽度的问题了。我首先想到的是浮动(float),因为我们知道浮动元素的宽度是随内容变化的,所以我先给img-wrap设置了如下样式:

JavaScript

.img-wrap {float: left;}

1
.img-wrap {float: left;}

但是,问题又来了,浮动元素会破坏原有的布局,如果不做清除浮动处理,会导致后面的内容紧跟在浮动元素之后。所以为了保证不影响其他内容,我们还得在img-wrap外面加一个容器来控制浮动与否:

JavaScript

<div class=”row”> <div class=”img-wrap”> <img
src=”imgs/560×200.jpg” alt=””> </div> </div> <div
class=”row”> <div class=”img-wrap”> <img
src=”imgs/440×200.jpg” alt=””> </div> </div> <div
class=”row”> <div class=”img-wrap”> <img
src=”imgs/300×200.jpg” alt=””> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
    <div class="img-wrap">
        <img src="imgs/560×200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/440×200.jpg" alt="">
    </div>
</div>
<div class="row">
    <div class="img-wrap">
        <img src="imgs/300×200.jpg" alt="">
    </div>
</div>

好吧,现在我们在来看看,被折腾成什么样子了,图片宽度自适应(3):

图片 6

哈哈,好像是我想要的效果了。但是,作为一个有点强迫症的开发者,虽然达到了我想要的效果,但加了那么多层嵌套标签,总让我感觉不舒服。于是,我继续折腾,终于我恍然大悟, display:inline-block 的元素宽度也是随内容变化的,而且图片默认样式恰巧也表现为inline-block的效果,是否可以从这里下手呢?

JavaScript

<div class=”img-wrap”> <img src=”imgs/560×200.jpg” alt=””>
</div> <div class=”img-wrap”> <img src=”imgs/440×200.jpg”
alt=””> </div> <div class=”img-wrap”> <img
src=”imgs/300×200.jpg” alt=””> </div>

1
2
3
4
5
6
7
8
9
<div class="img-wrap">
    <img src="imgs/560×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/440×200.jpg" alt="">
</div>
<div class="img-wrap">
    <img src="imgs/300×200.jpg" alt="">
</div>

结构再度回归到只有一层嵌套,然而css样式却需要调整一下:

JavaScript

.img-wrap {display: inline-block;}

1
.img-wrap {display: inline-block;}

当我,再次进行测试的时候,心情舒畅多了,你们感受下:图片宽度自适应(4)。

最后,补上完整的css代码:

CSS

JavaScript

.img-wrap { display: inline-block; } .img-wrap img { width: 100%;
vertical-align: middle; }

1
2
3
4
5
6
7
.img-wrap {
  display: inline-block;
}
.img-wrap img {
    width: 100%;
    vertical-align: middle;
}

2 赞 10 收藏 3
评论

图片 2

<div class=”img-wrap”>

1. float介绍

CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离,相当于不占据任何空间,所以文档中普通流中的元素表现的就像浮动元素不存在一样,因此,设置float属性的后会影响我们的页面布局。具体说来就是:让block元素无视float元素,让inline元素像流水一样围绕着float元素实现浮动布局

float属性设计的初衷:仅仅是让文字像流水一样环绕浮动元素,就像下图中展示的一样:

图片 8

图片 9

2.1 包裹性

所谓”包裹性”,其实是由”包裹”和”自适应”两部分组成。假设有以下CSS代码:

/* CSS代码 */ .father{ border: 1px solid deeppink; width: 200px; }
.son { float: left; font-size: 0; border: 1px solid blue; padding: 5px;
} .father img { width: 128px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 200px;
}
.son {
    float: left;
    font-size: 0;
    border: 1px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

1)包裹。本例中将浮动元素父元素宽度设置为200px,浮动元素的子元素是一个128px宽度的图片,则此时浮动元素宽度表现为”包裹”,也就是里面图片的宽度128px。

/* HTML代码 */ <div class=”father”> <div class=”son”>
<img src=”../../lib/img/mm1.png”> </div> </div>

1
2
3
4
5
6
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
    </div>
</div>

 图片 10

 

2)自适应性。在浮动子元素的中增加一些文字:

/* HTML代码 */ <div class=”father”> <div class=”son”>
<img src=”../../lib/img/mm1.png”> <span style=”font-size:
12px”>美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span>
</div> </div>

1
2
3
4
5
6
7
/* HTML代码 */
<div class="father">
    <div class="son">
        <img src="../../lib/img/mm1.png">
        <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span>
    </div>
</div>

此时,浮动元素宽度就自适应父元素的200px宽度,最终的宽度表现也是200px。如下图所示:

图片 11

(浮动–但容易影响页面布局 display:inline-block
—-块级元素宽度随页面而变化) 效果如下:

5.2 BFC的作用

  • 清除margin重叠
/* HTML 代码 */ &lt;div class="parent"&gt; &lt;p&gt;item
1&lt;/p&gt; &lt;p&gt;item 2&lt;/p&gt; &lt;p&gt;item 3&lt;/p&gt;
&lt;p&gt;item 4&lt;/p&gt; &lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384c6137798626-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384c6137798626-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384c6137798626-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384c6137798626-1" class="crayon-line">
/* HTML 代码 */
</div>
<div id="crayon-5b8f69ec384c6137798626-2" class="crayon-line crayon-striped-line">
&lt;div class=&quot;parent&quot;&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-3" class="crayon-line">
    &lt;p&gt;item 1&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-4" class="crayon-line crayon-striped-line">
    &lt;p&gt;item 2&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-5" class="crayon-line">
    &lt;p&gt;item 3&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-6" class="crayon-line crayon-striped-line">
    &lt;p&gt;item 4&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384c6137798626-7" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS 代码 */ .parent{ width: 300px; background-color: black;
overflow: hidden; } p { background-color: white; margin: 10px 0;
text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
/* CSS 代码 */
.parent{
    width: 300px;
    background-color: black;
    overflow: hidden;
}
p {
    background-color: white;
    margin: 10px 0;
    text-align: center;
}

在这种情况下,出现了margin重叠的效果。如下图所示:

图片 12

利用BFC能消除margin重叠,谨记:只有当元素在同一个BFC中时,垂直方向上的margin才会clollpase。如果它们属于不同的BFC,则不会有margin重叠。因此我们可以再建立一个BFC去阻止margin重叠的发生。所以为了让他们的margin变成20px,我们只需要用div,建立一个BFC,令p元素处于不同BFC即可。请看例子:

/* HTML 代码 */ <div class=”parent”> <p>item 1</p>
<p>item 2</p> <p>item 3</p> <p>item
4</p> </div>

1
2
3
4
5
6
7
/* HTML 代码 */
<div class="parent">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
    <p>item 4</p>
</div>

从下图中可以看出,借助BFC消除了margin重叠的问题。

图片 13

  • 清除高度塌陷的问题

在上面的章节中,如果子元素设置浮动属性,则父元素就会出现高度塌陷的问题。在这里,我们可以借助BFC消除高度塌陷的问题了,请看下面的这个例子:

/* HTML代码 */ <div style=”border: 1px solid deeppink;width: 200px;
overflow: hidden”> <img src=”../../lib/img/mm1.png” style=”border:
1px solid blue; float: left”> </div>

1
2
3
4
/* HTML代码 */
<div style="border: 1px solid deeppink;width: 200px; overflow: hidden">
    <img src="../../lib/img/mm1.png" style="border: 1px solid blue; float: left">
</div>

从下图中可以看到,设置overflow:hidden样式后就产生了BFC,根据BFC的表现规则,内部元素的样式不会影响外部元素的样式,因此没有出现高度塌陷的问题。

图片 14

  • 自适应布局(阻止文本换行)
/* HTML代码 */ &lt;div class="parent"&gt; &lt;img
src="../../lib/img/mm1.png"&gt; &lt;p
class="girl"&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫4,&lt;/p&gt;
&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384d4712979455-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384d4712979455-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384d4712979455-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384d4712979455-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384d4712979455-5">
5
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384d4712979455-1" class="crayon-line">
/* HTML代码 */
</div>
<div id="crayon-5b8f69ec384d4712979455-2" class="crayon-line crayon-striped-line">
&lt;div class=&quot;parent&quot;&gt;
</div>
<div id="crayon-5b8f69ec384d4712979455-3" class="crayon-line">
    &lt;img src=&quot;../../lib/img/mm1.png&quot;&gt;
</div>
<div id="crayon-5b8f69ec384d4712979455-4" class="crayon-line crayon-striped-line">
    &lt;p class=&quot;girl&quot;&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫4,&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384d4712979455-5" class="crayon-line">
&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .parent{ border: 1px solid deeppink; width: 200px;
font-size: 0; } .parent img{ border: 1px solid blue; float: left; }
.girl{ /*overflow: hidden;*/ font-size: 12px; background-color:
#cdcdcd; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* CSS代码 */
.parent{
    border: 1px solid deeppink;
    width: 200px;
    font-size: 0;
}
.parent img{
    border: 1px solid blue;
    float: left;
}
.girl{
    /*overflow: hidden;*/
    font-size: 12px;
    background-color: #cdcdcd;
}

如果我们给.girl元素设置具有BFC特性的属性,如:overflow: hidden就可以实现更健壮、更智能的自适应布局。

图片 15

这里的.girl元素为了不和浮动元素产生任何交集,顺着浮动边缘形成自己的封闭上下文。

普通元素在设置了overflow:hidden后,会自动填满容器中除了浮动元素意外的剩余空间,形成自适应效果,这种自适应布局和纯流体布局相比:

  • 自适应内容由于封闭而更加健壮,容错性更强;
  • 自适应内容能够填满除浮动元素以外区域,不需要关心浮动元素宽度。

}

4.2 clear属性的不足

clear属性只对块级元素有效,但是::after等伪元素默认都是内联水平,因此,在实际工作中,我们常常使用下面的代码来清除浮动带来的影响:

.clear::after{ content: “”; display:
table;/*也可以是’block’或者是’list-item’*/ clear: both; }

1
2
3
4
5
.clear::after{
    content: "";
    display: table;/*也可以是’block’或者是’list-item’*/
    clear: both;
}

由于clear:both作用的本质是让自己不和float元素在一行显示,并不是真正意义上的清除浮动,因此float元素有一些不好的特性依然存在,表现在:

  • 如果clear:both元素前面的元素就是float元素,则设置margin-top无效;
/* HTML代码 */ &lt;div class="box1"&gt;&lt;/div&gt; &lt;div
class="box2"&gt;&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384b8874186375-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384b8874186375-1" class="crayon-line">
/* HTML代码 */
</div>
<div id="crayon-5b8f69ec384b8874186375-2" class="crayon-line crayon-striped-line">
&lt;div class=&quot;box1&quot;&gt;&lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384b8874186375-3" class="crayon-line">
&lt;div class=&quot;box2&quot;&gt;&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .box1 { float: left; width: 100px; height: 60px;
padding: 10px; border: 3px solid black; background:
url(“../../lib/img/mm1.png”) center no-repeat; } .box2 { clear: both;
margin-top: -20px; border: 3px solid red; padding:10px; width:100px;
height: 60px; background: url(“../../lib/img/mm2.jpg”) center no-repeat;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CSS代码 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    clear: both;
    margin-top: -20px;
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

在本例中,设置.box2中的margin-top没有任何的效果,如下图所示:
图片 16

  • clear:both后面的元素依旧可能会发生文字环绕现象。
&lt;div class="father"&gt; &lt;div class="float"&gt; &lt;img
src="../../lib/img/mm1.png"&gt; &lt;/div&gt;
&lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
&lt;/div&gt; &lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69ec384bf922765024-1" class="crayon-line">
&lt;div class=&quot;father&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-2" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;float&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-3" class="crayon-line">
        &lt;img src=&quot;../../lib/img/mm1.png&quot;&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-4" class="crayon-line crayon-striped-line">
    &lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-5" class="crayon-line">
    &lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-6" class="crayon-line crayon-striped-line">
&lt;/div&gt;
</div>
<div id="crayon-5b8f69ec384bf922765024-7" class="crayon-line">
&lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

/* CSS代码 */ .father{ border: 1px solid deeppink; width: 500px;
height: 70px; } .father:after{ content: ”; display: table; clear: both;
} .float{ float: left; } .father img { width: 60px; height: 70px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CSS代码 */
.father{
    border: 1px solid deeppink;
    width: 500px;
    height: 70px;
}
.father:after{
    content: ”;
    display: table;
    clear: both;
}
.float{
    float: left;
}
.father img {
    width: 60px;
    height: 70px;
}

在本例中,设置clean:both来阻止浮动对后面元素的影响,但是最后的错位效果依然发生了(可以设置.father的字体大小为0,然后设置p标签的字体大小解决错误的问题)。

图片 17

由此可见,clear:both只能在一定程度上消除浮动的影响,要想完美去除浮动元素的影响,借助其他的手段——BFC,接着看下文。

代码如下:

CSS 深入理解之 float 浮动

2018/05/25 · CSS ·
float

原文出处: micstone   

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有”刨根问底”的精神,这样在出现一些问题的时候才不至于”手慌脚乱”!因此,今天就特别整理和总结一下float属性。

    width: 100%;

2. float的特性

float有哪些有意思的特性呢?具体如下:

  • 包裹性
  • 高度塌陷
  • 块状化
  • 没有任何margin合并

下面将详细阐述这几点的含义。

    <img src=”imgs/560×200.jpg” alt=””>

4. float的克星

既然使用float属性会带来一系列的问题,那么有没有办法消除这些问题呢?答案是:肯定有。接着看下文。

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图