CSS常用样式和属性

1./* */ 样式里的注释

/*单行多行都可以 */

2.设置宽度

width:300px;

3.设置高度

height:300px;

4.设置背景色

background:gold;

5.设置四周边框, 10像素粗细，solid实线，black黑色

border: 10px dotted black;
/* 线的样式：solid（实线边框）、
			dashed（虚线边框）、
			dotted（点线边框）、
			double（双线边框）、
			inset（3D嵌入式边框，效果取决于边框的颜色值）、
			outset（3D突出式边框，效果取决于边框的颜色值）、
			groove（3D沟槽边框，效果取决于边框的颜色值）、
			ridge（3D脊边框，效果取决于边框的颜色值）  */

6.边框拆分设置

border-top: 10px dotted blue;

底部：border-bottom
顶部：border-top
左边：border-left
右边：border-right */

border-bottom: 10px ridge red;
border-left:10px solid orange;
border-right:10px solid orchid;

8.设置四个边的内边距

padding:20px;
设置上下左右的边距
顶边距padding-top
底边距padding-bottom
左边距padding-left
右边距padding-right

9.设置四个边的外边距

margin:100px;
外边距拆分设置
顶外边距margin-top
底外边距margin-bottom
左外边距margin-left
右外边距margin-right

10.设置元素浮动:让块元素排列在一行 left左浮动 right右浮动

float:right;

11.设置字体大小

font-size:30px;

12.设置字体

font-family:'Microsoft YaHei';

13.设置文字是否加粗 bold加粗 normal不加粗

font-weight:bold;

14.设置文字行高度

line-height:24px;

15.设置文字下划线 none无装饰

blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线*/
text-decoration:underline;

16.设置文字水平对齐方式: center居中 left左对齐 right右对齐 justify撑满行

text-align:center;

17.设置文字首行缩进

text-indent:24px;

18.display属性是用来设置元素的类型及隐藏的

display:none; 元素隐藏且不占位置
display:inline; 元素以行内元素（内联元素）显示
display:block; 元素以块元素显示

19.overflow设置项:元素溢出，由父元素进行设置

overflow:visible 默认值。内容不会被修改，会呈现在父元素框之外
overflow:hidden 内容会被修改，并且其余内容不会显示在父元素框外部
overflow:scroll  不会显示在父元素矿外部，但是可以通过父元素的滚动条来查看溢出的内容
overflow:auto  如果内容溢出父元素框，则显示滚动条，否则不显示滚动条

20.定位 position

position:relative;  生成相对定位元素，依然占据原有文档流，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对body来定位
position:absolute;  生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
position:fixed; 固定定位，元素脱离文档流，不占据文档流位置，相对于浏览器窗口进行定位