标签：
文本：
- 在字体名称中，如果包含多个单词的字体名称，应该用引号包围起来,如果有多个字体选择，用一个逗号以及空格分隔每个字体。
- 表单中的select，textarea，input是不会继承父元素的字体设置，强制继续:
input,select,textarea{
font-family:inherit;
}
- 创建斜体：font-style：italic（Geneva中没有斜体，粗体字母，只是模拟斜体效果）
取消斜体的继承：font-style：normal
- font-weight：
1) bold是让文本显示为具有平均加粗值得粗体
2) 输入100-900的值，400代表正常，700代表粗体
3) bolder，lighter
4) 取消粗体：normal
- font-size：
1) em是相对于父元素的（后代继承的是全值而不是相对值），px是绝对的，rem是相对于根元素的eg：html
2) 数字与单位之间不应该有空格
3) 在IE中，如果以像素作为单位，则无法使用浏览器的文本大小选项对文本进行放大或者缩小，em与百分比则可以
4) 大多数浏览器对 body元素设置的默认字体是16像素
- line-height：行高= line-height*font-size
- 使用font简写属性：
.example{
font: .875em/1.3 "Gill Sans", "Gill sans MT", Calibri;( 875em/1.3代表字体大小以及行高)}
- 链接中CSS中的出现顺序是一定的，link，visited，focus，hover，active
- 单词之间的间距（字间距）：word-spacing （带单位）
字母之间的间距（字偶距）：letter-spacing （带单位）
- 缩进：text-indent （带单位），不仅仅对段落，对其他元素也可以使用该属性，但默认情况下对em、strong、cite等内联元素是没有效果的，可以将他们设置为display：block、display：inline-block，这样就可以使用该属性了
- display：block ：表现出来的特点是会换行，div元素中display的默认值为block， 而span的默认值是inline
display：inline-block ：此元素会被显示为内联元素，元素前后没有换行符
- 内联元素：<a>、<span>…………
块级元素：<p>、<h1>~<h6>、<ul>、<ol>、<dl>、<pre>、<hr>…………
- Text-transform：
1) capitalize让每个单词的首字母大写
2) uppercase让所有字母大写
3) lowercase让所有字母小写
4) none保持原来的样式，可以用来取消继承
背景
- background-attachement：设置背景图像是否固定或者随着页面的其余部分滚动。 默认值： scroll 继承性： no
1) fixed：背景图片会附在浏览器的窗口上，也就是说，即使访问者滚动页面图像依旧会继续显示，图片固定在那
2) scroll：访问者滚动页面的时候，背景图像会移动
3) local：只有访问者滚动背景图像所在的元素（不是整个页面），背景图像才会移动
- background-repect：有4个值，分别为repect，repect-x，repect-y，no-repect，默认值为repect
- html{ min-height：100%；}这是让html的最小高度为浏览器窗口高度的100%，但如果将background-attachement的值定位fixed，效果是一致的
- 默认情况下，元素的背景会填充其内容以及内边距所在的区域，并延伸到边框的边缘，可以通过background-clip改变,其值是：
1) border-box：背景被剪裁到边框盒，包含内容、内边距以及边框（默认值）
2) padding-box：背景被剪裁到内边距宽，包含内容以及内边框
3) content-box：背景被剪裁到内容框，包含内容
4) no-clip：从border区域向外剪裁背景
- background-origin：与background-clip的值是相同的，但默认值不同默认值是padding-box，控制元素背景显示的开始位置
- 设置空白属性：white-space，然后输入pre，或nowrap
css布局：
- 最好在页面结束的位置加载javaScript文件，但HTML5shiv是少有的必须在head中加载javaScript的情况之一（HTML5shiv在html代码中，可以实现在Internet Explorer9之前的IE中为新的HTML5元素设置样式），IE8会忽略他们不原生支持的元素CSS
- padding=15px代表的是在上下左右都会产生15个像素。如果要元素的显示宽度等于width属性的值，内容+内边距+边框都包含在里面，（Height的值也是类似的），对元素设置box-sizing：border-box（width等于多少，其display的宽度就是多少。反之，如果要是没有的话，则display的值要等于内边距+外边距+内容）
padding的顺序是：上 右 下 左（3个值代表上，左右，下）
- 设置为display：inline的元素会忽略任何width，height，margin-top和margin-bottom设置，不过如果设置为inline-block的元素可以使用这些属性。
display：inline的元素接受padding的设置，但padding-top以及padding-bottom会越界进入到相邻元素的区域
display：none会将元素的内容掩藏起来，但不会对其保留空间，而visibility不同
- 控制元素的可见性：visibility，使用它的时候，元素以及其内容出现的位置会留下一片空白区域，值：visible以及hidden，inherit，collapse
- 设置元素的宽度以及高度的时候，百分比都是相对于父元素的，其中不是继承属性；（即默认情况下width以及height不包含padding的大小）
在200px宽的空间中，p元素的auto宽度是200px，padding-right是10px，则auto的宽度是190px；
- margin：0 auto居中，表示上下都是0，左右都是auto
- 默认情况下，IE会对链接的图像添加一个蓝色的边框，img{border:none;}
边框的默认颜色是元素color属性的值
- 元素相互接触的两个margin（一个元素在另一个元素的上面），仅使用其中较大的一个，另一个外边距会被叠加。左右外边距不会叠加。（外边距是不继承的）
- 使用clear属性清除浮动效果，eg：{clear：left} ；
浮动元素的display值是block，尽管我们设置为inline，它还是block；
在浮动中：我们希望在相应容器中添加一个背景色，但容器的高度为0（浮动了，所以高度为0），不会显示相应的背景色，解决方法就是让容器自身具有清除浮动的能力，应用claerfix（应用于浮动元素的父元素或者祖先元素），eg：
Css样式中：
.clearfix:before,.clearfix:after{content:” ”; display:table;}
.clearfix:after{clear:both;}
.clearfix{ *zoom:1;}
Html文件中：
Class=“classname clearfix”
- 在对元素进行相对定位的时候，会在原来的位置留下空白，position：static（默认值）会覆盖position：relative以及absolute
绝对定位中，不会留下元素的移动后的空白位置
固定定位：position：fixed 当页面滚动的时候，会固定在浏览器窗口中，不会移动（不推荐使用）
使用z-index属性指定相互重叠元素的叠放位置：值越高显示在越上面，不管该元素出现的顺序，如果在其中有一个将定位设置为了static，尽管它的值最高也没有任何效果
- 使用overflow属性控制元素在盒子外部的部分，visible是让盒子里的内容可见，hidden是掩藏，scroll是无论元素是否需要，在元素上添加滚动条，auto是让滚动条仅在访问溢出内容时出现
- 垂直对齐：vertical-align：（除了表格以外，仅适用于行内元素）
1) baseline，是元素的基准线对齐父元素的基准线
2) middle，元素位于父元素中央
3) sub，位于父元素下标
4) super，位于父元素上标
5) text-top，元素顶部对齐父元素顶部
6) text-bottom，底部对齐父元素底部
7) top，顶部对齐当前行里最高元素的顶部
8) bottom，底部对齐当前行里最低元素的底部
9) 输入元素行高的百分比，或者特定的值
- 改变控制鼠标指针cursor
响应式网站：
- 只有html中不包含height以及width，图像才有可能变成可伸缩的图像，在样式表中设置max-width：100%
- 媒体查询方法：1、@import、2、link中media=“css-classname”
媒体样式表中@media login type feature（login=only或者not；type=screen或print……；feature是可选的，一旦包含他们就要用括号包围他们，并且在括号前面有个and）
- 在-webkit-box-sizing：border-box以及-moz-box-sizing：border-box前缀可以在一些旧的android以及ios系统中起作用
Web字体：
- 在使用web字体的时候，我们对字体进行重命名，其字体的多个格式命名要一致eg：斜体，粗体……
Css样式补充：
- border-radius（圆角）：50px/20px 水平半径/垂直半径；50px 20px 左上方与右下方 右上方与左下方；0 0 0 0 代表顺时针，从左上方开始
在不支持的浏览器中，仅会以方角出现
有时元素的背景会透过圆角，则在border-radius后面添加background-clip：padding-box
- 为元素文本添加阴影text-shadow：水平偏移量 垂直偏移量 模糊半径（可选，必须为正数）color（默认值为none）--------不能单独指定4个属性值，具有继承性
可以为单个元素添加阴影样式，每组属性之间用逗号隔开
- box-shadow中，如果想要兼容旧版的Android、Mobile Safari、Safari就要加前缀-webkit，其接受6个值，水平偏移量 垂直偏移量 模糊半径（可选，必须为正数）insert关键字（可选，用于扩张或收缩阴影，阴影在盒子内部） spread（可选，用于扩张或收缩阴影） color-------------（默认值为none）--------------不具有继承性
- 渐变背景：最好有个备选选项，以为那些不支持的浏览器做准备
线性渐变-background：linear-gradient（to right （起点），sliver（开始颜色），black（结束颜色））eg：（120deg（0表示最上方，90表示最左边的点，270是最右边的点），aqua，navy）
径向渐变-radial-gradient（渐变的尺寸 （30px 30px、closest-side或farthest-side或closest-corner或farthest-corner、at top……） at 渐变伸展的区域60px 80px，颜色（可以多种，中间用逗号隔开））
在浏览器中，如果不支持，使用了备选方案，但还是会被下载
- 修改元素的不透明度：opacity：0~1（1是默认样式，不透明）
针对旧版的IE有相应的代码-滤镜设置不透明的代码
HTML5-12月23日笔记
标签：
原文地址：http://www.cnblogs.com/zhanghuiyun/p/5071895.html
