css3 html5 规范 html5 css3教程

转载

cnolnic 2023-07-10 20:24:28

文章标签 css3 html5 规范 css3 css 内边距外边距 文章分类 HTML5 移动开发

文章目录

第11章用CSS进行布局

11.1 开始布局的注意事项
11.2 构建页面
11.4 对默认样式进行重置或标准化
11.5 盒模型
11.6 控制元素的显示类型和可见性
11.7 设置元素的高度
11.8 在元素周围添加内边距
11.9 设置边框
11.11 使元素浮动
11.12 控制元素浮动的位置
11.12 控制元素浮动的位置
11.13 对元素进行相对定位
11.14 对元素进行绝对定位
11.15 在栈中定位元素
11.16 处理溢出
11.17 垂直对齐元素
11.19 修改鼠标指针

第11章用CSS进行布局

11.1 开始布局的注意事项

内容与显示分离
选择合适的布局方式

固定布局
响应式布局：亦称为流式页面

使用多个浏览器对页面进行测试

11.2 构建页面

构建页面

恰当的使用article、aside、nav、section、header、footer、div
使用标题元素h1~h6
使用合适的语义标记剩余的内容，如段落、表和列表
添加注释

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

抹平差异的方法主要有两种（只使用其中一种即可）。

使用CSS重置（reset）开始主样式表，如Eric Meyer创建的Meyer重置http://meyerweb.com/eric/tools/css/reset/。另外还有其他的一些重置样式表。
使用Nicolas Gallagher和Jonathan Neal创建的normalize.css开始主样式表。该样式表位于http://necolas.github.com/normalize.css/（最新版本使用Download按钮）。

11.5 盒模型

- **内容区域**
- **内边距(padding)**：内容区域周围的空间
- **边框(border)**：内边距的边缘
- **外边距(margin)**：边框外面将元素与相邻隔开的不可见区域

无设置box-sizing:border-box:长度和宽度等于内边距里面的内容区域
有设置box-sizing:border-box:长度和宽度等于除外边距之外的所有元素

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

visibility控制元素的可见性,当visiblity属性的值为hidden时，元素及其内容会留下一片空白区域

/* ====隐藏元素==== */
<p>This is the <em style="visibility:hidden">first</em> paragraph</p>
<p>This is the <em style="visibility:hidden">second</em> paragraph</p>

显示效果：隐藏元素，元素及其内容会留下一片空白区域
This is the　　　　paragraph
This is the　　　　　paragraph

display属性：指定元素的显示方式

块级元素为display:block(对于li元素为display:list-item)
行内元素被设置为display:inline
混合显示方式display:inline-block，让元素与其他内容出现在同一行，同时具有块级元素的属性
删除元素display:none

/* ====块级元素==== */
<p>This is the <em style="display:block">first</em> paragraph</p>
<p>This is the <em style="display:block">second</em> paragraph</p>

显示效果：`em`元素单独显示在一行
This is the first paragraph
This is the second paragraph

/* ====行内元素==== */
<p>This is the <em style="display:inline">first</em> paragraph</p>
<p>This is the <em style="display:inline">second</em> paragraph</p>

显示效果：`em`设置为`line`会忽略任何`width`、`height`、`margin-top`、`margin-bottom`
This is the first paragraph
This is the second paragraph

/* ====混合元素==== */
<p>This is the <em style="display:inline-block">first</em> paragraph</p>
<p>This is the <em style="display:inline-block">second</em> paragraph</p>

显示效果：`em`设置为`line-block`可以设置`width`、`height`、`margin-top`、`margin-bottom`
This is the first paragraph
This is the second paragraph

<li>列表项目的元素display属性默认值为list-item，会从上往下排列，用inline-block属性覆盖后<li>元素都显示在一行

<ul>
	<li style="display: inline-block;">first</li>
	<li style="display: inline-block;">second</li>
	<li style="display: inline-block;">three</li>
</ul>

显示效果
first second three

/* ====删除元素==== */
<p>This is the <em style="display:none">first</em> paragraph</p>
<p>This is the <em style="display:none">second</em> paragraph</p>

显示效果：将其元素从文档流中完全移除
This is the first paragraph
This is the second paragraph

文档流:
默认情况下，元素会按照它们在HTML中自上而下出现的次序显示（这称为文档流，document flow），并在每个非行内元素的开头和结尾处换行。

11.7 设置元素的高度

提示　不能为显示为行内元素的元素（如短语内容）设置高度或宽度，除非为它们设置display: inline-block或display: block。
提示　width和height不是继承的

如果不显式指定宽度和高度，浏览器就会使用auto，对于大多数默认显式为块级元素的元素， $width的auto值==包含块的宽度-元素的内边距-边框-外边距$

简单说来，包含块的宽度指的是父元素给元素留出的宽度

如果手动设置width,并将左右外边距都设为auto，那么两个外边距就将设为相等的最大值，例如.page{ margin: 0 auto}

<div style="background-color: khaki;width: 300px;">
	<p style="background:white;width:200px;margin:0 auto;">
		虎扑上有位网友的母去世了，丧葬期间他没流过几次泪，心里头也没有太悲伤的情绪。他很困惑，是不是自己骨子头是个冷血的人。于是他上论坛发了帖子说这个事。帖子里，有人安慰道：“至亲离去的那一瞬间通常不会使人感到悲伤，而真正会让你感到悲痛的是打开冰箱的那半盒牛奶、那窗台上随风微曳的绿箩、那安静折叠在床上的绒被，还有那深夜里洗衣机传来的阵阵喧哗。”
	</p>
</div>

<div style="background-color: green;width: 300px;">
	<p style="background:khaki;width:200px;margin:0 auto;">
		虎扑上有位网友的母去世了，丧葬期间他没流过几次泪，心里头也没有太悲伤的情绪。他很困惑，是不是自己骨子头是个冷血的人。于是他上论坛发了帖子说这个事。帖子里，有人安慰道：“至亲离去的那一瞬间通常不会使人感到悲伤，而真正会让你感到悲痛的是打开冰箱的那半盒牛奶、那窗台上随风微曳的绿箩、那安静折叠在床上的绒被，还有那深夜里洗衣机传来的阵阵喧哗。”
	</p>
</div>

为什么min-height通常比height更适用
除非你确定元素的内容不会变得更高，最好避免在样式表中指定高度。在大多数情况下，可以让内容和浏览器自动控制高度。这可以让内容在浏览器和设备中根据需要进行流动。
如果设置了高度，随着内容变多，它们有可能撑破元素的盒子，这可能是你预期之外的。在这种情况下，符合标准的浏览器不会自动扩大高度，它们在你指定高度时采用了这个指令，并一直坚持下去。（了解相关示例请参考11.16节。）
不过，如果希望元素至少具有某一特定高度，可以设置min-height。如果内容日后变多，元素的高度会自动按需增长。这是height与min-height的区别，width和min-width也是类似的。
或许你还有所疑虑，实际上，很多原因都会导致内容增长。你的内容或许来自数据库、第三方源或由用户生成的内容。同时，访问者可能增大其浏览器的字体大小，覆盖你指定的样式。

11.8 在元素周围添加内边距

内边距padding：元素内容周围，边框以内的空间，可以改变内边距的厚度，不能改变他的颜色或纹理

padding-top:x;
padding-rigth:x;
padding-bottom:x;
padding-left:x;

padding的简记法

值数	含义	实例
一个值	对应四个边	`padding:5px`
两个值	上下、左右	`padding:5px 9px`
三个值	上、左右、下	`padding:5px 9px 11px`
四个值	上、右、下、左（顺时针方向）	`padding:5px 9px 11px 0`

11.9 设置边框

`border:在元素周围创建边框，或针对元素的某一遍设置边框，并设置它的厚度、风格和颜色

border-top:x;
border-rigth:x;
border-bottom:x;
border-left:x;

边框风格	属性值
无	`none`
点线	`dotted`
虚线	`dashed`
实线	`solid`
双线	`double`
槽线	`groove`
脊线	`ridge`
凹边	`inset`
凸边	`outset`

提示　border简写属性及各个边框属性（border-width、border-style和border-color）均可接受一至四个值。如果使用一个值，那么它会应用于全部四个边。如果使用两个值，那么前一个值会应用于上下两边，后一个值会应用于左右两边。如果使用三个值，那么第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。如果使用四个值，那么它们会按照时钟顺序，依次应用于上、右、下、左四个边。
提示　要让边框显示出来，至少必须定义边框样式。如果没有定义样式，就不会显示边框。边框样式的默认值是border-style: none。

##　11.10 设置元素周围的外边距

外边距(margin)：元素与相邻元素之间的透明空间

margin-top:x;
margin-rigth:x;
margin-bottom:x;
margin-left:x;

提示　如果对margin使用一个值，这个值就会应用于全部四个边。如果使用两个值（参见图11.10.6），那么前一个值会应用于上下两边，后一个值会应用于左右两边。如果使用三个值（参见图11.10.3），那么第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。如果使用四个值，那么它们会按照时钟顺序，依次应用于上、右、下、左四个边。
提示　margin属性的auto值依赖于width属性的值
理解内边距和外边距的em值
当em值用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小的

11.11 使元素浮动

float：让元素浮动

left：元素浮动到左边，其他内容围绕在它右边
right：元素浮动到右边，其他内容围绕在它左边
none：让元素完全不浮动：此为默认值

详见菜鸟教程关于float

11.12 控制元素浮动的位置

1.让浮动元素的父元素“自清除”

css中clearfix清除浮动的用法

11.12 控制元素浮动的位置

11.13 对元素进行相对定位

11.14 对元素进行绝对定位

11.15 在栈中定位元素

**这三章写的比较好的是菜鸟教程的CSS Position(定位)**另外还提到了本书未提到的sticky定位

11.16 处理溢出

overflow处理溢出

visible：让元素盒子中的所有内容可见，这是默认项
hidden：隐藏元素盒子容纳不了的内容
scroll：无论元素是否需要，都在元素上添加滚动条
auto：让滚动条仅在访问者访问溢出内容时出现

11.17 垂直对齐元素

使元素垂直对齐的步骤

输入vertical-align:
输入baseline，使元素的基准线对齐父元素的基准线；
或者输入middle，使元素位于父元素中央；
或者输入sub，使元素成为父元素的下标；
或者输入super，使元素成为父元素的上标；
或者输入text-top，使元素的顶部对齐父元素的顶部；
或者输入text-bottom，使元素的底部对齐父元素的底部；
或者输入top，使元素的顶部对齐当前行里最高元素的顶部；
或者输入bottom，使元素的底部对齐当前行里最低元素的底部；
或者输入元素行高的百分比，可以是正数，也可以是负数；
或者输入某个值（正负均可，单位为像素或em）分别按照特定的值向上或者向下移动元素。

除了表格以外，vertical-align属性仅适用于行内元素，不能应用于块级元素。

11.19 修改鼠标指针

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。