css精要

最新推荐文章于 2022-10-06 00:33:52 发布

m0_58822151

最新推荐文章于 2022-10-06 00:33:52 发布

阅读量60

点赞数

本文链接：https://blog.csdn.net/m0_58822151/article/details/117563177

版权

本节包含 2 个内容: 浮动 ( Float ) 和盒模型 ( Box Model ).

2. Float

HTML标签中，有一些标签称为块标签（Block, 如：<p>、<div>），对于这样的标签，如果我们不说明其宽度，它将占满它可以使用的所有横向（水平）空间。即使设置了宽度，它也不会与同属一个父容器其它元素同处一行。

而有一些标签称为行内标签（Inline, 如：<span>、<img>），这样的标签默认会与同属一个父容器的其它元素同处一行。看下面的例子：

例2.1

<p style="border:1px solid red;">段落一</p>
<p style="border:1px solid green;">段落二</p>
<p style="border:1px solid blue; width:200px;">段落三</p>
<span style="border:1px solid red;">Span1</span>
<span style="border:1px solid green;">Span2</span>

浏览器中显示效果如下图：（外层淡蓝色为浏览器的边框，即本例中 <p> 和 <span>的父容器边框）

这是由于默认情况下，<body> 标签会有一点留白，你可以在 <body> 标签中添加样式，如 <body style="margin:0px;>，试试看，是不是没有间隙了?

块标签或行内标签只是针对标签的默认情形而言，我们可以使用样式 display:inline 令 <p> 标签显示为行内标签的样子，同样也可以使用样式 display: block 令 <span> 标签显示为块标签的样子。

OK，讲到这里可能有人会记下这样一句话：如果要让元素们同处一行，就把它们的 display 样式属性设置为inline。

把上面例子中的代码修改一下，在每个 <p> 标签的样式中都插入 float: left :

1
2
3

<p style="border:1px solid red;float:left;">段落一</p>
<p style="border:1px solid green;float:left;">段落二</p>
<p style="border:1px solid blue; width:200px;float:left;">段落三</p>

结果变成这样了：

让我们欢迎这一节的主角 float 登场！

正如你看到的，样式属性 float 可以让元素产生”浮动”效果，上面的例子让3个段落都向左浮动，于是它们就一个挨个地”飘”到一起了。当然，也可以设置为向右浮动或不浮动。

使用 float 时有几个问题需要注意：

（1）当一个容器中的多个元素 float 时，它们会努力地”飘”到同一行上，但如果容器横向空间不够，余下的元素就会向下”飘”, 请比较例 2.2 和 2.3。

例 2.2

运行效果如下:

例 2.3

运行效果如下:

什么情况? 怎么外层的DIV变成一条线了? 是的，现在看到的一条水平红线其实是外层DIV上、下两条红色边框紧挨在一起形成的，换句话说，外层的DIV没有计算得到正确的高度 ( 父容器在垂直方向上”坍缩”了 )。

为什么会这样?

外层DIV的高度其实是由其内部的 3 个DIV”撑”起来的。现在内部的3个DIV都向左浮动（float:left）了，都”飘”起来了，不再与外层DIV在一个水平面上了，自然也就无法把外层DIV撑开了。

二、盒子的布局
把HTML中的元素看做是一个矩形的盒子（盛装内容的的容器），每个容器都是由元素内容、内边距（padding）、边框（border）和外边距（margin）组成。

ps：浏览器默认的margin值为8px！

三、两种盒子模型
w3c的盒子模型： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。

IE的盒子模型： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 。

ps：一般都使用标准的w3c盒子模型，如果需要使用IE的盒子模型，可以使用box-sizing属性进行修改。

w3c的盒子模型
.test1{
   box-sizing:content-box;
   width:200px;
   padding:10px;
   border:15px solid #eee;
}
IE的盒子模型
.test1{
   box-sizing:border-box;
   width:200px;
   padding:10px;
   border:15px solid #eee;
}

水平放置时，相邻的两个DIV间距为30px,即左边DIV的margin-right(10px) + 右边DIV的margin-left(20px) （求和）

垂直放置时，相邻的两个DIV间距为20px，不再是margin求和，而是取较大值。即上面DIV的margin-bottom和下面DIV的margin-top两个值中的较大值（20px）

这叫**外边距合并(融合)**，虽然看上去增加了记忆的难度，但实际应用中这样的设计却更为合理，它可以使得纵排的多个元素之间的距离与元素与外层容器之间的距离保持一致。

m0_58822151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css精要

本节包含 2 个内容: 浮动 ( Float ) 和盒模型 ( Box Model ).2. FloatHTML标签中，有一些标签称为块标签（Block, 如：<p>、<div>），对于这样的标签，如果我们不说明其宽度，它将占满它可以使用的所有横向（水平）空间。即使设置了宽度，它也不会与同属一个父容器其它元素同处一行。而有一些标签称为行内标签（Inline, 如：<span>、<img>），这样的标签默认会与同属一个父容器的其它元素同处一行。
复制链接

扫一扫