字体font #

1. 字体系列font-family #

font-family

font-family:"Microsoft YaHei", Arial, "微软雅黑";

2. 字体大小font-size #

font-size 默认16px

font-size:20px;

3. 字体粗细font-weight #

font-weight

font-weight:bold;
font-weight:700;
font-weight:normal;
font-weight:400;

4. 文字样式font-style #

font-style

font-style:normal;
font-style:italic; (斜体)

5. 复合属性font #

font:font-style font-weight font-size/line-height font-family;

font-style:italic;
font-weight:700;
font-size:16px;
font-family:"Microsoft YaHei";

不能更换顺序，最后两个是必须指定的

font:italic 700 16px/line-height "Microsoft YaHei";

6. 总结 #

文本text #

1.文本颜色color #

color

2.对齐文本text-align #

text-align 水平对齐方式

text-align:left;
text-align:center;
text-align:right;

3. 装饰文本text-decoration #

text-decoration: none; /*删除下划线*/

4. 文本缩进text-indent #

text-indent段落的首行缩进
16px
em 相对当前一个文字距离

5. 行间距/行高line-height #

line-height 

行间距与盒子高度一致，可以使文字垂直居中

元素显示 #

1. 什么是元素显示模式 #

元素以什么方式进行显示

• 块元素
• 行内元素

2. 块元素 #

h1-h6、p、div、ul、ol、li
div是最典型的块元素

1. 自己独占一行
2. 高度、宽度、外边距、内边距都可以设置
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

注意

• 文字类的元素不能使用块级元素 （p，h里面不能放div）

3. 行内元素 #

a、strong、em、del、ins、span
span是典型的的行内元素 （内联元素）

1. 相邻行内元素在一行上，一行可以显示多个
2. 高度、宽度直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注意

• 链接里面不能再放链接
• 特殊情况a里面可以放块级元素，但是给a转换一个块级模式最安全

4. 行内块元素 #

img/、input/、td
同时具有块元素和行内元素的特点

1. 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度（行内元素特点）
3. 高度、行高、内边距、外边距都可以控制（块级元素特点）

5. 元素显示模式总结 #

6. 元素显示模式转换 #

特殊情况下，我们需要元素模式的转换，简单理解就是一个模式的元素需要另一种模式的特性
比如想要增加链接a的触发范围

dispaly:block;  /*转换成块元素*/
dispaly:inline; /*转换成行内元素*/
dispaly:inline-block; /*转换成行内块元素*/

7. 小技巧 单行文字垂直居中的代码 #

让文字的行高等于盒子的高度

元素隐藏 #

• 类似网站广告，当我们点击关闭就不见了，但是重新刷新页面，会重新出现
• 本质：让一个元素在页面中隐藏或者显示出来

1. dispaly 属性 （重点） #

用于设置一个元素应如何显示

display: none;  /*隐藏对象 隐藏元素后，不再占有原来的位置*/
display: block; /*除了转换为块级元素外，同时还有显示元素的意思*/

2. visibility 可见性 属性 #

用于指定一个元素应可见还是隐藏

visibility: visible; /*元素可视*/
visibility: hidden; /*元素隐藏，继续占有原来位置 */

3. overflow 溢出 属性 #

指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么

overflow: visible; /*不剪切内容也不添加滚动条*/
overflow: hidden;  /*不显示超过对象尺寸的内容，超出的部分隐藏掉*/
overflow: scroll;  /*不管超出内容否，总是显示滚动条*/
overflow: auto;  /*超出自动显示滚动条，不超出不显示滚动条*/

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
• 但是如果有定位的盒子，请慎用overflow:hidden，因为它会隐藏多余的部分

4. 总结 #

• display 显示隐藏元素，但是不保留位置
• visibility 显示隐藏元素，到那时保留原来位置
• overflow 溢出显示隐藏，但是只是对于溢出的部分处理

背景设置background #

1. 背景颜色background-color #

background-color:transparent;/*默认：透明色*/
background-color:颜色值;

2. 背景图片background-image #

background-image:none; /*默认：无图*/
background-image:url(url地址);

3. 背景平铺background-repeat #

background-repeat:repeat; /*默认：纵横都平铺*/
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;

4. 背景图片位置backgroud-position #

backgroud-position:x y;

5. 背景图像固定backgroud-attachment #

backgroud-attachment:scroll; /* 默认：随对象内容滚动 */
backgroud-attachment:fixed;  /*背景图像固定*/

6. 背景属性复合写法backgroud #

backgroud: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
backgroud: transparent url(image.jpg) repeat-y fixed top;

7. 背景颜色半透明rgba #

backgroud: rgba(0, 0, 0, 0.3);

• a:alpha 透明度，取值0-1
• CSS3新特性 IE9+版本浏览器才支持

8. 总结 #

Contributors #

winter wang