WEB基础之：CSS基本视觉格式化

1. 基本框Basic Boxes

CSS 假定每个元素都会生成一个或多个矩形框，称为元素框。各元素框的中心有一个内容区（content area）。内容区周围有可选填充（padding）、边框（borders）、轮廓（outlines）和外边距（margins）。

边框(border)与内容(content)和内边距(padding)有相同的背景。另外边框的宽度不能为负。

2. 元素显示选择Altering Element Display

通过设置display属性值来影响用户代理的显示方式。

属性值类别	描述
<display-outside>`` |block / inline(default) / run-in`
<display-inside>`` |flow / flow-root / table / flex / grid / ruby`
<display-listitem>	list-item&&<display-outside>?&&[ flow / flow-root ]?
<display-internal>	table-row-group / table-header-group / table-footer-group / table-row / table-cell / table-column-group / table-column / table-caption / ruby-base / ruby-text / ruby-base-container / ruby-text-container
<display-box>	contents / none
<display-legacy>	inline-block / inline-list-item / inine-table / inline-flex / inline-grid

2.1 将行内样式显示为块级样式

例如，配置如下导航链接：

<nav>
    <a href="index.html">WidgetCo Home</a>
    <a href="products.html">Products</a>
    <a href="services.html">Services</a>
    <a href="fun.html">Widgety Fun!</a>
    <a href="support.html">Support</a>
    <a href="about.html" id="current">About Us</a>
    <a href="contact.html">Contact</a>
</nav>

默认情况下，导航中每个元素显示为行内样式；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RPbAwSI7-1608194868701)(https://i.loli.net/2020/11/08/lTCEvndq35OJtGe.png)]

将导航中每个元素以列表样式显示：实现方式如下

• 将所有链接放到表格单元格
• 将所有链接显示在各自独立的导航中
• 将所有链接以块级元素显示。如下：

nav a {
   
    display: block;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kV0rahT9-1608194868707)(https://i.loli.net/2020/11/08/BakD34cvfOI8Fym.png)]

**注：**将链接作为块，您可以像 div 或 p 元素那样对它们进行样式设置，其优点是整个元素框成为链接的一部分。因此，如果用户的鼠标指针停留在元素框中的任何位置，则可以单击链接。

2.2 将列表元素显示为行内样式

• 只能改变他们的显示角色。

例如配置如下列表：

<ul id="rollcall">
    <li>Bob C.</li>
    <li>Marcio G.</li>