Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

【前端】【学习心得】第十三天 浅谈 BR 标签 #17

Open
paddingme opened this issue Nov 30, 2014 · 0 comments
Open

【前端】【学习心得】第十三天 浅谈 BR 标签 #17

paddingme opened this issue Nov 30, 2014 · 0 comments
Labels
Mu-Help-Plan

Comments

@paddingme
Copy link
Owner

HTML 标签元素中<br>应用得场景并不多，我们是否真正了解<br> 元素的语义，其正确使用场景，是否可以用 CSS 来改变其样式，用来清除浮动到底对不对？让我们慢慢剖析<br> 元素，揭开它被忽视的面纱，一睹其神秘的容颜。

br 的语义

，我们来看看 W3C 对 <br> 的定义。

The <br> element represents a line break.
This element must be used only for line breaks that are actually part of the
content:

  • poems
  • addresses

由上可知： <br>元素表示换行，它必须只能被使用作换行，实际上常用于是诗、地址的一部分。

再来看 MDN 上的定义:

The HTML <br> Element (or HTML Line Break Element) produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

Do not use <br> to increase the gap between lines of text; use the CSS margin property or the <p> element.

意思基本一致： <br>元素(或 HTML 换行符元素)在文本中产生一个折行(回车)。对于写诗和地址，非常有用，行与行的划分变得明显。不要使用 <br> 来增加行与行之间的间隙，应该使用 margin 属性或者<p>元素。

另值得说明的是
是个空元素，到底要不要闭合呢，答案是不需要 HTML5 规范中也推荐不闭合（待查）。

<br> 的使用场景

正确使用场景

从上述<br>的定义中， 我们可知 <br> 元素的使用场景很明显，只适合在文本中折行，且这个折行的目的是为了文本本身的需要。例如：

    <p>
        一二三四五，
        <br>
        上山打老虎。
        <br>
        老虎不在家，
        <br>
        嗯哼就是他。
    </p>

效果是这样的，熟悉 Markdown 的同学知道如果文本想要换行可以连续打两个空格继续输入（待验证），其实这就是一个<br>

错误使用场景一：用来增加文本行之间的间隙

用来增加文本之间的间隙并不是它的应有用途。

<p>我想离一段文字远一点</p>
<br>
<p>我是一段被远离的文字</p>

这样使用是不对的，我们应该用 CSS 来做到增加多个文本间的距离（"margin-botton"或“margin-top”）。

错误使用场景二: 用来清除浮动

除了被用来增加上下文本间的间距，我们还有一个错误——用<br>来清除浮动。

<div style="float：left">我向左浮动了</div>
<br style="">

查是谁发明了br 用来清除浮动。

首先这严重不符合<br>的语义，其次当浮动元素小于<br> 在浏览器中默认的高度时会出现一定的间隙，为了说清楚这个问题，我们来看个例子：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box {
        width:100px;
        height: 100px;
    }
    .clear {
        clear:both;
    }
    .red {
        background-color: red;
    }
    .green{
         background-color: green;
    }
    </style>
</head>
<body>
    <div id="box1"class="box red"></div>
    <br>
    <div id="box2" class="box green"></div>
</body>
</html>

这里没有浮动只有一个换行符，我们可以看到效果是这样的：

现在我们 box1 浮动；在上面代码中 设置 #box1 {flat:left} 看下效果：

如上 box1 浮动导致 <br> 和 box2 都上移。

我们再给<br>加上 class="clear"

这时候<br>清除浮动 换行符去哪儿了，我猜换行符在红色下面被遮盖了，在清除浮动之前，浮动的影响还存在，<br>clear之后影响才消除，所以 box2 才在下面的位置，意思即 <br> 虽然清除了浮动但它是受到了浮动的影响的。这也是为什么用空元素进行清楚浮动的原因，以及伪元素 after 清楚浮动的原因（待验证）。

<br>在各浏览器有一定的高度。将浮动元素高度设定很低，box1 浮动，<br> 清除 box1 浮动。

<body>
    <div class="red" style="float:left;width:10px;height:10px"></div>
    <br class="clear">
    <div class="box green"></div>
</body>

看下效果：

<br> 清除了浮动，仍然会占据一定的位置。可见这并没有达到我们想要的效果，我们想要的是 清除浮动元素之后，之后的元素可以正常紧挨着浮动元素（按正常 margin-top 计算 如果没有则紧挨），而现在凭白多了一段 <br> 的间隙，准确的说是多了浏览器下<br> 的高度减去浮动浮动的元素。

综上我们要坚决抵制用 <br> 来清除浮动，原因有三:

  • 增加了没有意义的标签，增加了代码量。
  • 不符合<br> 的语义
  • 浮动元素高度小于浏览器下 <br> 高度时，得不到我们想要的清除效果。

好了今天就到这里，明天我们将来了解下 <br>在各浏览器的表现，以及能不能使用 CSS 样式来改变其表现，能改变哪些样式，以及为什么只能改变这些样式，以及如何改变。
@paddingme paddingme changed the title 【前端】【学习心得】第十四天 浅谈 BR 标签 【前端】【学习心得】第十三天 浅谈 BR 标签 Nov 30, 2014
@paddingme paddingme mentioned this issue Nov 30, 2014
Open
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Mu-Help-Plan
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@paddingme