18、HTML与CSS：页面布局设计全攻略

HTML与CSS：页面布局设计全攻略

1. 查看网格结构

在建立网格布局后，为确认内容是否正确放置，可使用轮廓样式查看网格结构。轮廓是围绕元素绘制的线条，包含元素内容、内边距和边框空间。与边框不同，轮廓不会增加元素的宽度或高度，仅指示元素在渲染页面上的范围。

1.1 轮廓属性

• 轮廓宽度（outline-width） ：定义轮廓线条的宽度，值可以是CSS长度单位，或使用关键字 thin、medium 或 thick。
• 轮廓颜色（outline-color） ：设置轮廓线条的颜色，颜色可以是CSS颜色名称或值。
• 轮廓样式（outline-style） ：设置轮廓线条的样式，包括 none（无轮廓）、solid（实线）、double（双实线）、dotted（点线）、dashed（虚线）、groove（凹槽线）、inset（嵌入线）、ridge（脊线）或 outset（凸出线）。

这些属性可以组合成轮廓简写属性：

outline: width style color;

例如，以下样式规则使用通配符选择器和轮廓简写属性，在网页上的每个元素周围绘制一条1px的绿色点线：

* { 
    outline: 1px dotted green; 
}

1.2