网上资料需标注出处

清除浮动 1. clear:both清除浮动（添加额外元素） <div class="snippet-clipboard

CSS3 box-sizing 属性实例规定两个并排的带边框的框： <div c

第三期《float 与 display:inline-block的区别是什么》 about web-problem HOT 7 CLOSED

mynane commented on August 15, 2024

第三期《float 与 display:inline-block的区别是什么》

from web-problem.

Comments (7)

mynane commented on August 15, 2024

介绍

HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。

默认display:block属性（块级元素）

<div>
<h1>...<h6>
<p>
<ul>,<ol>,<dl>
<li>,<dt>,<dd>
<table>
<pre>

等元素，其显示为block样式，会将一行中其可用的空间给跨越占据，容不下另一个元素与其同行。

默认display:inline属性（行内元素）

<span>
<a>
<strong>
<em>
<img>
<br>

等元素，其不会打断文档排布流，会在一行中一个挨一个地排列。

用float方式会带来的麻烦：

使用float方式需要注意的是，要有一个元素来包裹float元素，同时避免接下来的元素紧紧地靠近它。

另外一个麻烦是，当有一个多行水平列表，但是列表里的内容有不同的高度时，就会排的非常痛苦。

用display:inline-block;方式：

display:inline-block;方式样式化列表时，既可使得列表元素能按行挨个排列，

同时元素还能保持其块属性，比如高和宽、上下边距等。

但是对有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

用display:inline-block;的浏览器兼容：

CSS中使用display:inline-block;来样式化，在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。

但是在早期的IE，比如IE 7，就要做一些改变才能适应。

/* For IE 7 */
 zoom: 1;
 *display: inline;

通常，做浏览器兼容适应的CSS样式化，最好是分开独立的样式文件，然后通过条件注释将其引入。

用display:inline-block;的空白符引起的问题：

因为元素之间是行内inline修饰排列的，因此HTML中的空格符也会影响到这个修饰。也就是说，

当我们把元素的大小和顺序排列好后，如果在<li>元素之间有空格符，

这个空格符将会产生4px的边距。

综述

用display:inline-block;来实现水平列表比用float方式更容易控制，需要注意的是前者会由空格符带来边距影响。
inline-block默认是底部对齐的，要让两个元素顶部对齐，需要加上一句：veritcal-align:top;
inline-block 的宽度可以自行设置的，而inline的自行设置宽度是无效的。

参考资料:

css之display:inline-block与float区别

from web-problem.

mynane commented on August 15, 2024

浮动产生负作用

1. 背景不能显示

由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，

而父级不能被撑开，所以导致CSS背景不能显示。

2. 边框不能撑开

如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，

父级不能被撑开，导致边框不能随内容而被撑开。

3. margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。

特别是上下边的padding和margin不能正确显示。

参考资料:

关于清除浮动的四种方法

from web-problem.

mynane commented on August 15, 2024

清除浮动

1. clear:both清除浮动（添加额外元素）

.clear{
    clear:both;
}

2. 父级div定义 overflow:hidden

.ovh{
     overflow:hidden;
}

3. 使用伪类

使用双伪元素清除浮动

.clearfix:after{
    content:"";//设置内容为空
    height:0;//高度为0
    line-height:0;//行高为0
    display:block;//将文本转为块级元素
    visibility:hidden;//将元素隐藏
    clear:both//清除浮动
}
.clearfix{
    zoom:1;为了兼容IE
}

使用双伪元素清除浮动

.clearfix:before,.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.clearfix {
     zoom: 1;
}

from web-problem.

mynane commented on August 15, 2024

行内元素和块级元素的具体区别是什么？inline-block是什么？

一，行内元素与块级元素的区别：

行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别

行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。

块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

二、行内元素和块级元素转换

   display:block; (字面意思表现形式设为块级元素)

   display:inline; (字面意思表现形式设为行内元素)

三、inline-block

inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。

HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。（这句话下面会用例子解释）

资料来源：

行内元素和块级元素的具体区别是什么？

from web-problem.

mynane commented on August 15, 2024

CSS盒子模型的宽度和高度如何理解

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
元素的高度也是同理。

比如：
css代码：

div{  
    width:200px;  
    padding:20px;  
    border:1px solid red;  
    margin:10px;      
}

html代码：

<body>  
   <div>文本内容</div>  
</body>

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：

资料来源：

CSS盒子模型的宽度和高度如何理解

from web-problem.

mynane commented on August 15, 2024

CSS3 box-sizing 属性

实例

规定两个并排的带边框的框：

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    float:left;
}

语法

box-sizing: content-box|border-box|inherit;

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

from web-problem.

imageslr commented on August 15, 2024

您好，我有一个问题关于BFC的想请教您一下。查了很多资料没找到解答。

有关BFC的文章中经常可见这样一个案例：

<div class="box">
    <div class="img">image</div>
    <p class="info">信息信息信息信息信信息信息信息信息信息信息信息信息信息信息信息信信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信</p>
</div>

.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff;}

如果希望文字不受浮动元素影响，可以为其创建一个BFC：

.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff; overflow: hidden}

使用了overflow: hidden。

我的问题是：
这里使用了overflow: hidden创建了BFC，p元素与float在同一行排列。那么我使用display: inline-block也能创建一个BFC，为什么p元素会到新一行排列呢？

.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff; display: inline-block;}

from web-problem.

Comments (7)

介绍

用float方式会带来的麻烦：

用display:inline-block;方式：

用display:inline-block;的浏览器兼容：

用display:inline-block;的空白符引起的问题：

综述

浮动产生负作用

1. 背景不能显示

2. 边框不能撑开

3. margin padding设置值不能正确显示

清除浮动

1. clear:both清除浮动（添加额外元素）

2. 父级div定义 overflow:hidden

3. 使用伪类

使用双伪元素清除浮动

使用双伪元素清除浮动

行内元素和块级元素的具体区别是什么？inline-block是什么？

一，行内元素与块级元素的区别：

二、行内元素和块级元素转换

三、inline-block

CSS盒子模型的宽度和高度如何理解

CSS3 box-sizing 属性

实例

语法

Related Issues (20)

Recommend Projects

Recommend Topics

Recommend Org