点击弹出一个div弹框示例_一个简单的div示例

点击弹出一个div弹框示例

If all of the misuses of divs have been eliminated by the previous article, what are divs used for?

如果上一篇文章消除了div的所有滥用，那么div的作用是什么？

“div” stands for “logical division”. A div contains multiple elements that you want to treat as a group. An example would be a “news” column for a website. Let’s say we have the following markup:

“ div”代表“逻辑划分”。 div包含要作为一个组对待的多个元素。 一个示例是网站的“新闻”列。 假设我们有以下标记：

<h3>Recent News</h3>
<dl>
	<dt>27 November, 2009
		<dd>Here is some news…<a href=more.html>read more</a>
	<dt>18 November, 2009
		<dd>Here is some more news…<a href=more.html>read more</a>
	<dt>1 October, 2009
		<dd>Here is even more news…<a href=more.html>read more</a>
</dl>

Now, what if we want to wrap a box around all of that, to give us the ability to treat both the definition list and the <h3> as a single unit? There’s no other semantically appropriate tag, so we’ll use <div>:

现在，如果我们想将所有框都包裹起来，使我们能够将定义列表和<h3>视为一个单元，该怎么办？ 没有其他在语义上适当的标记，因此我们将使用<div> ：

<div id="news">
<h3>Recent News</h3>
	<dl>
		<dt>27 November, 2009
			<dd>Here is some news…<a href=more.html>read more</a>
		<dt>18 November, 2009
			<dd>Here is some more news…<a href=more.html>read more</a>
		<dt>1 October, 2009
			<dd>Here is even more news…<a href=more.html>read more</a>
	</dl>
</div>

(Note that a <div> is typically given an id value as it usually has a style that is different from other elements on the page… but class can work equally well in some cases.)

(请注意，通常给<div>一个id值，因为它通常具有与页面上其他元素不同的样式……但是在某些情况下， class同样可以很好地工作。)

Using CSS we can do anything to this <div> that we would do to any other element. Let’s first place a border on it:

使用CSS，我们可以对此<div>进行任何处理， <div>其他任何元素一样。 首先，在其上放置一个边框：

div#news {
	border: 1px solid black;
}

With a border present you should be able to see that <div> is a block tag that extends all the way across the screen by default. Let’s place a specific width on this div:

在显示边框的情况下，您应该可以看到<div>是默认情况下一直延伸到整个屏幕的块标记。 让我们在这个div上放置一个特定的宽度：

div#news {
	border: 1px solid black;
	width: 15em;
}

注意 (Note)

While setting

width on elements is fine, setting height on non-image elements should be avoided. Elements automatically expand in height to accommodate content as it is added and removed. Setting a fixed (or even relative) height sets the value, and you will not be able to anticipate or adapt it to changing amounts of content, which will overflow / under fill the element.)

width很好，但应避免在非图像元素上设置height 。 元素自动增加高度，以适应添加和删除内容时的需要。 设置一个固定的(甚至相对的) height设置该值，您将无法预期或使其适应不断变化的内容量，这将使元素溢出/不足。)

Let’s now customize the appearance of the h3 inside the <div>. We will use a descendant selector to avoid influencing the appearance of h3 elements in other contexts:

现在让我们自定义<div> h3的外观。 我们将使用后代选择器以避免在其他情况下影响h3元素的外观：

div#news h3 {
	color: #fff;
	background: #000;
	text-align: centre;
}

Note that the text that we have used in the definition terms touches the left edge of our <div> box. The obvious solution is to pad the <div>:

请注意，我们在定义术语中使用的文本触及<div>框的左边缘。 显而易见的解决方案是填充<div> ：

div#news {
	border: 1px solid black;
	width: 12em;
	padding: 1em;
}

Note that doing so extends the overall width of the <div>. By definition width is defined as the the width of content, not the box. Overall width could thus be calculated as:

请注意，这样做会扩展<div>的整体宽度。 根据定义， width定义为内容的宽度，而不是框的宽度。 因此，总宽度可以计算为：

width (when specified) + padding (left and right) + border (left and right) + outline (left and right) + margin (left and right) = overall width

width (指定时)+ padding (左右)+ border (左右)+ outline (左右)+ margin (左右)=总宽度

This can be countermanding by using a different box-sizing model, but we will leave that be for now.

通过使用不同的box-sizing模型可以解决这个问题，但是我们暂时不做讨论。

While this added padding does push content away from the border of our div box, what if we want to make the <h3> a solid tab at the top of the box? In that case, we remove the padding from the div, and instead place it as margin on the left and right of the definition list (padding would work equally well in this case):

虽然添加的padding确实将内容推离了div框的边界，但是如果要将<h3>设为框顶部的实心选项卡该怎么办？ 在这种情况下，我们从div删除了padding ，而是将其作为margin放在定义列表的左侧和右侧(在这种情况下，padding同样有效)：

div#news dl {
	margin: 0 1em;
}

(Note the order used: values for top and bottom are set at the same time in the first number, left and right in the second number).

(请注意所使用的顺序：在第一个数字中同时设置top和bottom值，在第二个数字中同时设置left和right )。

That solves that problem; now there’s just the gap above the <h3> to deal with:

那解决了这个问题； 现在在<h3>上方还有一个空白需要处理：

div#news h3 {
	color: #fff;
	background: #000;
	text-align: centre;
	margin-top: 0;
}

We can do to this <div> anything we have done to other elements: float and wrap text around it, put a background image and/or color in it, etc.

我们可以对<div>进行其他元素的处理： 将文本浮动并环绕在文本周围，​​在其中放置背景图片和/或颜色 ，等等。

翻译自: https://thenewcode.com/238/A-Simple-div-Example

点击弹出一个div弹框示例