点击弹出一个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)
![Simple div example](https://i-blog.csdnimg.cn/blog_migrate/6e22bf18009fcc38b8d1dfb0a69599df.gif)
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>
进行其他元素的处理: 将文本浮动并环绕在文本周围,在其中放置背景图片和/或颜色 ,等等。
点击弹出一个div弹框示例