HTML/CSS小知识整理（持续更新）

HTML/CSS小知识整理

HTML

1.html使用

<!--注释--\>

来注释语句；css使用

/*注释*/

来注释语句；JavaScript使用

/*注释*/

或者

//注释

来注释语句。

2.em和strong都表示强调，不同的是strong表示更强烈的强调，呈现时em用斜体表示，strong用粗体表示，目前国内前端程序员偏向使用strong。

3.常用空标签：

<br />

,

<hr />

4.

<pre>

标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

5.table表格使用border-collapse来合并边框，包含collapse、separate、inherit三个属性值，只有为separate时，border-spacing生效，后接两个值表示水平和垂直的间距。

6.利用

<a>

标签的mailto属性发送邮件，具体格式如下：

<a href="mailto:mail@163.com?cc=xiaoming@163.com&bcc=xiaoming@163.com&subject=主题&body=内容">发送</a>

7.表单标签的enctype属性有三个值，默认为

application/x-www-form-urlencoded

表示对所有提交数据编码；

multipart/form-data

表示不进行编码，通常在使用包含文件上传控件的表单时使用该值；

text/plain

表示空格转换为 “+” 加号，但不对特殊字符编码。

8.为什么html5只要在开头写！DOCTYPE HTML？

因为H5不是基于SGML（标准通用标记语言），所以不需要对DTD进行引用，而html4.0.1是基于SGML的，所以要写出完整引用。

CSS

1.层模型中相对定位时，相对定位

position:relative

后偏移前的位置保留不动，即如果偏移元素内有子元素，子元素仍按照原位置布局。

2.为什么清除浮动，如何清除浮动：那些年我们清除过的浮动

影响：

a.块级元素会无视浮动元素布局，即会钻进浮动元素的下面，被浮动元素所覆盖



b.行内元素，例如文字， 则会环绕在浮动元素的周围，为浮动元素留出空间



c.浮动元素的父元素坍缩



清除浮动的方法：

4000

a.在浮动元素后面添加额外标签，样式设置为

clear:both

b.使用

br

标签自身的html属性，如

<br clear="all" />

c.父元素设置

overflow：hidden/auto

d.父元素设置

display:table

e.使用:after 伪元素（推荐）,如：

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

3.flex布局：阮一峰-flex布局

关键属性：

flex-direction属性，定义了项目的排列方向，包含row、row-reverse、column、column-reverse四个属性。



flex-wrap属性，定义如果一条轴线排不下如何换行，包含nowrap、wrap、wrap-reverse三个属性，分别表示不换行、换行到下方。换行到上方。

flex-flow属性，是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性，定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比 项目与边框的间隔大一倍。



align-items属性，定义了项目如何在交叉轴（竖轴）上排列。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。



align-content,定义了如果轴线不止一条时的对齐方式

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。



项目的属性：

order属性，定义项目间的排序，值越小排得越靠前。

flex-grow属性，定义项目的放大比例，默认为0，表示不放大。

flex-shrink属性，定义缩小比例，默认为1，表示不缩小。

flex-basis属性，定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性，是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self属性，align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

4.CSS3 @media 查询,即媒体查询，可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

@media mediatype and|not|only (media feature) {
CSS-Code;
}

其中

mediatype

有all（所有设备）、print（打印机）、screen（屏幕）、speech（应用于屏幕阅读器等发声设备）；

media feature

常用的有：

aspect-ratio    定义输出设备中的页面可见区域宽度与高度的比率
color   定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
device-height   定义输出设备的屏幕可见高度。
device-width    定义输出设备的屏幕可见宽度。
grid    用来查询输出设备是否使用栅格或点阵。
height  定义输出设备中的页面可见区域高度。
max-aspect-ratio    定义输出设备的屏幕可见宽度与高度的最大比率。
max-color   定义输出设备每一组彩色原件的最大个数。
max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height   定义输出设备的屏幕可见的最大高度。
max-device-width    定义输出设备的屏幕最大可见宽度。
max-height  定义输出设备中的页面最大可见区域高度。
max-monochrome  定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution  定义设备的最大分辨率。
max-width   定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio    定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color   定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width    定义输出设备的屏幕最小可见宽度。
min-device-height   定义输出设备的屏幕的最小可见高度。
min-height  定义输出设备中的页面最小可见区域高度。
min-monochrome  定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution  定义设备的最小分辨率。
min-width   定义输出设备中的页面最小可见区域宽度。
monochrome  定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution  定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan    定义电视类设备的扫描工序。
width   定义输出设备中的页面可见区域宽度。

5.CSS Hack，由于不同浏览器厂商，不同浏览器的版本对于CSS样式的解析、支持不同，导致在不同浏览器的环境中呈现出不一致的页面展现效果，前端程序员在解决这个问题时，针对不同浏览器、不同版本写相应的css代码的过程。

IE条件注释法：

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

类内属性前缀法：

*、+前缀，可以在IE6-IE7中使用
*+前缀，在IE7中生效
-前缀，是IE6专有的hack
/9后缀，可以在IE6-IE10中使用
/0后缀，可以在IE8-IE10中使用
/9/0后缀，可以在IE9-IE10中使用

选择器前缀法：

IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

6.CSS sprite精灵图，是一种用来减少http中图片请求而实现的一种优化方法，即把所有要用到的图片整合到一张大图里，一次性下载，重复使用，使用时通过background的background-position属性定位到相应的图片：

.search-input span{
width: 19px;
height: 15px;
position: absolute;
top: 15px;
left: 480px;
background: url('../images/sprite-photo-search.png') 0 0 no-repeat;
}
.search-input span:hover{
background: url('../images/sprite-photo-search.png') -30px 0 no-repeat;
}

7.vertical-align:middle,设置为什么无效：这是因为vertical-align:middle 是依赖div内子元素最高的行高来实现对某元素居中的，而我们只需要建立一个新元素，给他加上inline-block属性 再把他高度设置为100%就行了，另一个方法是为父元素设置行高。

<div style="display:inline-block;height:100%;vertical-align: middle;"></div>