【HTML5与CSS3基础教程】 第11章 用CSS进行布局

第11章 用CSS进行布局

本章内容

  • 开始布局的注意事项
  • 建立页面结构
  • 对默认样式进行重置或标准化
  • 盒模型
  • 控制显示类型和元素的可见性
  • 设置元素的高度和宽度
  • 添加元素周围的内边距
  • 设置元素的边框
  • 设置元素周围的外边距
  • 使元素浮动
  • 控制元素浮动的位置
  • 对元素进行相对定位
  • 对元素进行绝对定位
  • 在栈中定位元素
  • 处理溢出
  • 垂直对齐元素
  • 修改鼠标指针

开始布局的注意事项

  • 内容与显示分离
  • 布局方法（固定宽度和响应式）
  • 浏览器注意事项（多种浏览器测试）

构建页面

  • 高效网页的核心是结构良好、语义化的HTML
  • 恰当地使用article、aside、nav、section、header、footer和div等元素将页面划分成不同的逻辑区块。
  • 按照一定的顺序放置内容，确保页面在不使用CSS的情况下也是合理的。
  • 以一致的方式使用标题元素(h1～h6)，从而明确地标识页面上这些区块的信息，并对它们按优先级排序。
  • 使用合适的语义标记剩余的内容，如段落、图和列表。
  • 如果有必要，使用注释来标识页面上不同的区域及其内容

对默认样式进行重置或标准化

盒模型

  • 内容、内边距、边框、外边距
  • 默认的属性值，如width设置的其实只是内边距内部内容区域的宽度，如果设置了其他部分的宽度，实际显示大小将明显大于设置值。
  • 第二种方式下，元素的显示宽度（包括内容宽度+内边距+边框）就等于width属性的值 box-sizing: border-box;

控制显示类型和元素的可见性

  • 显示类型：display: block; block（块级元素）、inline（行内元素）、inline-block（显示为行内元素，同时具有块级元素的特征）、none（隐藏元素，从文档流中完全删除）。
  • 可见性：bisibility: hidden; hidden（让元素不可见，会留下一片空白区域）、visible（可见）

设置元素的高度和宽度

  • 宽度：width: w; 高度：height: h;
  • 对定宽页面使用像素，对响应式Web设计使用百分数
  • min-width min-height max-width max-height 用来设置最小和最大尺寸。

在元素周围添加内边距

  • padding: 5px; 一个值：应用于四个边
  • padding: 5px 9px; 两个值：上下两边、左右两边
  • padding: 5px 9px 11px; 三个值：上边、左右两边、下边
  • padding: 5px 9px 11px 0; 四个值：上、右、下、左。
  • padding-left top、right、bottom、left四个边可以单独设置

设置边框

  • 定义边框风格:border-style: type; type有none（无）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset（凹边）、outset（凸边）。
  • 设置边框宽度：border-width: 10px;
  • 设置边框颜色：border-color: #ccc;
  • 简写：border-top: 1px solid green; border-top-style: double; top、right、bottom、left可选。
  • border简写属性及各个边框属性(border-width、border-style和border-color)均可接受一至四个值。

设置元素周围的外边距

  • margin: 5px; margin-top: 5px;
  • 上下接触的两个margin，仅适用其中较大的，左右外边距不叠加。
  • 当em值用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小的。

使元素浮动

  • float: left; left（让元素浮动到左边）、right（让元素浮动到右边）、none（让元素完全不浮动）
  • 选择的方向是应用于需要浮动的元素的

控制元素浮动的位置 (PAGE:227)

  • 只有普通文档流中的内容会影响父元素的高度。
  • 可以使用 clear 属性清除浮动效果clear: left;，也可以为right或both，如果对某个元素使用该属性，该元素和它后面的元素就会显示在浮动元素的下面。
  • 让浮动元素的父元素“自清除”：
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

对元素进行相对定位

  • 相对于这个原始位置对元素进行移动就称为相对定位
  • position: relative; top: 3em; left: 100px; top、right、bottom、left都可以。

对元素进行绝对定位

  • position: absolute; top: 45px; right: 0;
  • 还有固定定位的值： fixed

在栈中定位元素

  • z-index: 120; z-index最高的数显示在最上面

处理溢出

  • 使用 overflow 属性控制元素在盒子外面的部分
  • overflow: hidden;
    • visible 让元素盒子中的所有内容可见，这是默认项
    • hidden 隐藏元素盒子容纳不了的内容
    • scroll 无论元素是否需要，都在元素上添加滚动条
    • auto 让滚动条仅在访问者访问溢出内容时出现

垂直对齐元素

  • vertical-align: bottom;
    • baseline 使元素的基准线对齐父元素的基准线
    • middle 使元素位于父元素中央
    • sub 使元素成为父元素的下标
    • super 使元素成为父元素的上标
    • text-top 使元素的顶部对齐父元素的顶部
    • text-bottom 使元素的底部对齐父元素的底部
    • top 使元素的顶部对齐当前行里最高元素的顶部
    • bottom 使元素的底部对齐当前行里最低元素的底部

修改鼠标指针

  • cursor: default;
    • default 箭头
    • positer 指针形状（通常为手指）
    • crosshair 十字
    • move 带箭头拖动的十字
    • wait 等待沙漏
    • help 带问号的箭头
    • text 文本常用的I型
    • progress 带沙漏的箭头
    • auto 自动
    • x-resize x指箭头方向，n（北）、nw（西北）、e（东）等等。
posted @ 2020-04-06 18:14  by-sknight  阅读(195)  评论(0)    收藏  举报