标签：优先 方向 行高 pstore targe 三角形 overflow scale pos
1、设置了float浮动的元素和绝对定位position：absolute的元素会脱离正常的文档流。但是设置absolute的元素不会占据空间，相当于隐形了。
2、相对定位position：relative是指相对于文档流中的其它已经定义的元素位置进行定位。在不设置top/left/right/bottom/Z-index等值的情况下和默认值static表现一样。
3、绝对定位position：absolute是相对于上一个不为static默认定位的父元素进行绝对定位。若父元素没有指定position，该元素会相对于整个html文档进行定位。
4、overflow：auto;一种清除浮动的方法，在具有浮动元素的父容器中添加，这样父容器就会有一个高度,随着子元素高度增加而增加。
5、考虑浏览器宽度变小的时候，要加min-width~
1、实现子元素在父元素中的水平和垂直居中。父元素和子元素需要设置宽度和高度，父元素相对定位，子元素绝对定位并且设置magin:auto和top:0;left:0;right:0;bottom:0;
2、经常会使用到用border-radius来设置元素边框圆角。
3、可以通过设置相对定位和绝对定位同时设置top或right或left或bottom来进行定位。
4、可以通过float，设置margin-left等来进行定位。position：absolate和float会使元素脱离正常的文档流，两者结合通过设置top等，也可以进行定位。
.div{width:158px;padding:20px;border:1px solid #ccc；margin：10px；}
在浏览器审查元素时显示的width=200px; 200=158+20x2+1x2=200 不计算外边距
box-sizing属性：
box-sizing:border-box; //border和padding计算入width之内，上面的例子width就等于158px；
box-sizing:content-box; //border和padding不计算入width之内
box-sizing:padding-box; //padding计算入width之内
outline:1px solid red;轮廓：绘制元素周围的一条线，与border相比，outline是不占空间的。
css文本属性：line-height行高 letter-spacing 字符间距 word-spacing 字间距 text-indent 缩进
若文本本是在父元素中居中显示，使用letter-spacing：20px后，文本不居中了。则设置text-indent：20px；或者使用padding-left。
font-variant:small-caps;把段落设置为小型大写字母字体。
font-style：italic；字体为斜体。
z-index设置元素堆叠顺序。仅在定位元素即设置position元素上生效，设置数值越高则越离用户越近。
p:target{ ... }
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element), :target 选择器可用于选取当前活动的目标元素。
实例：
.slider li:target{
-webkit-animation:scroll 500ms linear;
-moz-animation:scroll 500ms linear;
-o-animation:scroll 500ms linear;
animation:scroll 500ms linear;
position:absolute;
z-index:2;
//linear 是指过渡的时候动画速度全程一致
}
@keyframes scroll {
0%{
left: -100%;
}
100%{
left: 0%;
}
}
点击输入框时宽度以600ms速度从120px速率缓慢变大到220px
#big-input{
width: 120px;
margin-top: 20px;
margin-left: 40px;
-webkit-transition: width 600ms;
-o-transition: width 600ms;
-moz-transition: width 600ms;
transition: width 600ms;
}
#big-input:focus{
width: 220px;
}
类似margin顺序：a,b,c,d；上右下左
html: <b>粗体<i>斜体<strong>强调文本<em>强调文本
<input type="">
type: text文本域 password密码 radio单选按钮 checkbox复选框 submit提交按钮
<lable></lable>定义<input>元素的标签，一般为输入标题。
下拉框：<select><option></option><option></option>...</select>
一、元素分类--块级元素
什么是块级元素？在html中div、 p、h1、form、ul 和 li就是块级元素。设置display:block就是将元素显示为块级元素。a{display:block;}就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
二、元素分类--内联元素
在html中，span、a、label、 strong和em就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。 div{display:inline;}就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
三、元素分类--内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，img、input标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
合并单元格（电话 占两格）：
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
<colgroup> 标签只能在 table 元素中使用。
所有主流浏览器都支持 <colgroup> 标签。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。
<table>
<caption>网站排名</caption>
<colgroup>
<col class="colgroup">
<col class="colgroup">
<col class="colgroup">
</colgroup>
<thead class="table-head">
<tr>
<td>排名</td>
<td>网站</td>
<td>热度</td>
</tr>
</thead>
<tbody class="table-content">
<tr>
<td>1.</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>2.</td>
<td>百度前端技术学院</td>
<td>12000</td>
</tr>
</tbody>
</table>
这样就可以通过.colgroup对每一列单元格进行样式更改。
选择器：[class*=‘col-‘] 选择类名中含有col-的所有元素
隐藏元素：
display：none；隐藏元素后不占据任何空间，相当于消失。
visibility：hidden；隐藏元素后依旧占据空间，影响布局。
css伪类：before和：after
p:before{
content:"哈哈";
background-color:red;
color:black;
font-weight:blod;
}
p：before指在每个<p>元素之前插入内容，并设置插入内容的样式。
如果不需要内容，只配合样式，那么content也不能为空，需要这样写 content : "";
这些添加不会改变文档的内容，不会出现在DOM中，不可复制
：after指在指定元素后面添加内容。
eg：当不触发div1时，div2不可见，当触发div1时，div2可见。
.div2{
width:100px;
height:100px;
display:none;
}
.div1:hover .div2{
display:block;
}
eg:绘制一个头部向右的白色三角形：
div{
width:0;
height:0;
border-width:15px;
border-style:solid;
border-color:transparent transparent transparent #fff;
//上右下左分别为透明 透明 透明 白色
}
eg:做一个弹出对话框，对话框上方有一个带边框的三角形：
写两个相同的三角形，下面的三角形背景颜色是对话框边框的颜色，上面的颜色是对话框的背景颜色。
将上面的三角形相对于下面的三角形向下移动1px。
响应式@media：
浏览器宽度大于768px时：@media only screen and (min-width:768px){ ... }
浏览器宽度在500px-768px之间时：@media only screen and (max-width:768px) and (min-width:500px){ ... }
浏览器宽度小于500px时：@media only screen and (max-width:500px){ ... }
移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta标签显得非常重要。
为移动设备添加 viewport：
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
content 参数：
width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
移动端的头部标签和meta：
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<!-- 声明文档使用的字符编码 -->
<meta charset=‘utf-8‘>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->
<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->
<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<title>标题</title>
</head>
padding、margin等
上 左右 下 3个值的时候
上 右 下 左 4个值的时候
上下 左右 2个值的时候
4个方向 1个值的时候
HTML+css零碎小知识
标签：优先 方向 行高 pstore targe 三角形 overflow scale pos
原文地址：http://www.cnblogs.com/hello-web/p/7221488.html
