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:[e-mail]?cc=[e-mail]&bcc=[e-mail]&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.浮动元素的父元素坍缩

清除浮动的方法：

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布局

关键属性：

1. flex-direction属性，定义了项目的排列方向，包含row、row-reverse、column、column-reverse四个属性。
   
2. flex-wrap属性，定义如果一条轴线排不下如何换行，包含nowrap、wrap、wrap-reverse三个属性，分别表示不换行、换行到下方。换行到上方。
3. flex-flow属性，是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

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

   • flex-start（默认值）：左对齐
   • flex-end：右对齐
   • center： 居中
   • space-between：两端对齐，项目之间的间隔都相等。
   • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比 项目与边框的间隔大一倍。
     
5. align-items属性，定义了项目如何在交叉轴（竖轴）上排列。
   
   • flex-start：交叉轴的起点对齐。
   • flex-end：交叉轴的终点对齐。
   • center：交叉轴的中点对齐。
   • baseline: 项目的第一行文字的基线对齐。
   • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
     

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

   • flex-start：与交叉轴的起点对齐。
   • flex-end：与交叉轴的终点对齐。
   • center：与交叉轴的中点对齐。
   • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
   • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   • stretch（默认值）：轴线占满整个交叉轴。
     

   项目的属性：

   1. order属性，定义项目间的排序，值越小排得越靠前。
   2. flex-grow属性，定义项目的放大比例，默认为0，表示不放大。
   3. flex-shrink属性，定义缩小比例，默认为1，表示不缩小。
   4. flex-basis属性，定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
   5. flex属性，是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
   6. 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   定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0device-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  定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。resolution  定义设备的分辨率。如：96dpi, 300dpi, 118dpcmscan    定义电视类设备的扫描工序。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>