HTML之CSS属性相关

1.设置宽度和高度：width、height

块级标签才能设置宽度，内联标签的宽度由内容来决定。

   *{
    		width：120px
    		height：120px
    	}

2.字体属性:

1)浏览器的默认字体

#i1 {font-family："Microsoft Yahei"
}

2)字体大小

#i1 {font-size：20px
}

3)字重（粗细）

#i1 {font-weight:
		normal	默认值，标准粗细
		bold	粗体
		bolder	更粗
		lighter	更细
		}

4)文本颜色

#i1 {
background-color：rgb(x,x,x)或#eeeeee 或red(颜色名)---3种方式
}

3.文字属性：

1)文字对齐

#i1 {
text-align：
		left	左边对齐 默认值
		right	右对齐
		center	居中对齐
		justify	两端对齐
}

2)文字装饰

#i1 {
text-decoration：
			none	默认。定义标准的文本
			underline	定义文本下的一条线
			overline	定义文本上的一条线
}

3)首行缩进：

#i1 {
text-indent：20px
}

4.边框属性：

#i1 {
 border：2px solid red
		none	无边框
		dotted	点状虚线边框
		dashed	矩形虚线边框
		solid	实线边框
}

可以单独为某一个边框设置样式

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

5.实现圆角边框的效果：

#i1 {
border-radius：50%
}

6.dispaly属性（用于控制HTML元素的显示效果）：

block：			默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
inline：		按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响
inline-block：	使元素同时具有行内元素和块级元素的特点

7.CSS盒子：

margin(外边距):

用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到  				相互隔开的目的	

#i1 {
		margin-top(上)：1px
		margin-right(右)：1px
		margin-bottom(下)：1px
		margin-left(左)：1px
}
.i1 {
	margin：10px 20px 20px 10px 上-右-下-左 （顺时针方向）
	margin：10px 20px 30px 上 -左右 -下
	margin：10px 20px 上下 -左右

padding(内填充)

用于控制内容与边框之间的距离

#i1 {
		padding-top(上)：1px
		padding-right(右)：1px
		padding-bottom(下)：1px
		padding-left(左)：1px
}
简写：
.i1 {
	padding：10px 20px 20px 10px 上-右-下-左 （顺时针方向）
	padding：10px 20px 30px 上 -左右 -下
	padding：10px 20px 上下 -左右
}

Border(边框)

围绕在内边距和内容外的边框

Content(内容)

盒子的内容，显示文本和图像

8.float浮动：

left：向左浮动
right：向右浮动
none：默认值，不浮动
clear：left/right   清除浮动

9.overflow溢出属性 ：

visible：默认值。内容不会被修剪，会呈现在元素框之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto：	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	：规定应该从父元素继承 overflow 属性的值

10.定位（position）脱离文档流

定位有三种方式：相对定位、绝对定位、固定定位

向右浮动，下面的会顶替到上面
float: right;

相对定位，下面的不会顶替*/
position: relative;

绝对定位，下面的会顶替到上面
position: absolute;

固定定位，下面的会顶替到上面
position: fixed;