目录
一、CSS书写规范
学习开始就形成良好的书写规范,是你专业化的开始。
(1)空格规范
【强制】选择器与 { 之间必须包含空格。
示例: .nav空格{ }
【强制】属性名与之后的:之间不允许包含空格, :与属性值之间必须包含空格。
示例: font-size:空格14px;
(2)选择器规范
【强制】当一个rule包含多个Selector时,每个选择器声明必须独占一行。
示例:
/*good*/ .post, .page, .comment { color: red; } /*bad*/ .post, .page, .comment { color: red; }
【建议】选择器的嵌套层级应不大于3级,位置靠后的限定条件应尽可能精确。
.nav ul li ul li a 可以写为: .nav li a
(3)属性规范
【强制】属性定义必须另起一行。
示例:
.selector {
color: red;
font-size: 14px;
}
【强制】属性定义后必须以分号结尾。
示例:
.selector {
color: red;
font-size: 14px;
font-family: "Microsoft Yahei";
}
二、标签显示模式
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。
(1)块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行,可以对其设置高度、宽度、对齐等属性,常用于网页布局和网页结构的搭建。
常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form <li>等,其中<div>标签是最典型的块元素。 div非常符合布局,所以通常叫CSS+div布局
块级元素的特点:
总是从新行开始 --- 换行
宽度、高度、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳---嵌套 内联元素和其他块元素 p
(2)行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。
行内元素的特点:
和相邻行内元素在一行上。
宽、高无效,但水平方向的padding和margin可以设置 ,垂直方向padding有效 但是margin不可以。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素(a特殊)。
注意:
只有文字才能组成段落,因此p标签中不能放块级元素,示例:p标签中放div,查看源代码(有bug)
链接里面不能在放链接。
(3)块级元素和行内元素区别
块级元素的特点:
(1)总是从新行开始
(2)宽高、内外边距都可以控制
(3)宽度默认为容器的100%
(4)可以容纳内联元素和其他块元素 文字类的块级标签(p,h1~h6,dt)内部不能嵌套块级标签
行内元素的特点:
(1)和相邻行内元素在一行上
(2)宽高无效,可以设置水平方向的内外边距,垂直方向不可设置。
(3)默认宽度就是它本身内容的宽度
(4)行内元素只能容纳文本和其他行内元素
(4)行内块元素(inline-block)
在行内元素中有几个特殊的标签——<img />、<input />,可以对它们设置宽高和对齐属性,有些资料可能会把它们称为行内块元素。 行内块元素的特点: (1)和相邻行内元素(行内块)在一行上,但是之间会有空白间隙。 (2)默认宽度就是它本身内容的宽度。 (3)宽高、内外边距都可以控制。 注意:浏览器解析时,img解析出来的display为inline 但它的表现形式是inline-block 这是一个特殊的标签,展现效果不是由 CSS 来控制的。是一种外部对象,它们外观的渲染,是独立于 CSS 的。 简单来说,它的内容不受当前文档的样式的影响。CSS 可以影响元素的位置,但不会影响到元素自身的内容。
所以,可以说现在没有行内块级元素,只是有这样的特性或者说是显示模式。img和input是属于行内元素。
(5)标签显示模式转换 display
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块:display:inline-block;
此阶段,我们只需关心这三个。
<style type="text/css"> div { width: 100px; height: 100px; background-color: pink; display: inline; /*块级元素转为行内元素,宽高会失效*/ } span { width: 100px; height: 100px; background-color: skyblue; display: block; /*行内元素转为块级元素,可以设置宽高*/ } a { width: 50px; height: 50px; background-color: deeppink; /*行内元素转为行内块元素,可以设置宽高,在一行内显示*/ display: inline-block; } p { width: 100px; height: 100px; background-color: red; /*块级元素转为行内块元素,可以设置宽高,在一行内显示*/ display: inline-block; } </style>