前端基础——CSS基本样式及盒模型

font 样式

字体大小/行高 字体

font:14px/30px "宋体";

 

/*
	font
	font-size 文字大小
	font-weight 文字加粗(bold加粗/normal正常)
	font-style 文字倾斜(italic倾斜/normal正常)
	line-height 行高 （文字在一行上下居中）
	font-family 字体 
	-------------------------------------
	font:font-weight font-style font-size/line-height font-family;
	font:font-size font-family(必须要写,若是这两个属性没加，整个font样式无效)
*/

文本样式

/*
	color 文字颜色
	text-indent 首行缩进 (1em=1个文字大小)
	text-align 文本对齐方式(left/center/right)
	text-decoration 文本修饰(underline下划线/line-through 删除线/overline 上划线/none)
	letter-spacing 字母间距(字间距，也可以是每个汉字之间的距离)
	word-spacing:10px; 单词间距 在中文中就是空格间距  比如：今天 天气 不错 这里就是调试的空格间距 
　　注意：不同字体的空格间距不同，所以改字体的时候需要重新设置下空格间距的大小
*/

　　

CSS盒模型

 padding

#box{width:100px;height:100px;background:red;border:10px solid #000; padding:20px 50px 80px 100px;}
#div{width:100px;height:100px;background:blue;}
/*
padding 内填充(padding在元素的边框以内，内容之外，padding同样显示元素的背景)
padding-top
padding-right
padding-bottom
padding-left

可视宽(高):可视宽(高)=border+padding+width(height);
*/

margin

#box{width:200px;height:200px;background:Red;border:10px solid #000; margin:30px;}
#div{width:200px;height:200px;background:blue;border:10px solid #ccc; margin:40px;}
/*
	margin 外边距(margin元素的边框之外不显示元素背景)
	margin:10px 20px;
	margin:10px 20px 40px;
	margin:10px 20px 40px 60px;
	margin-top
	margin-right
	margin-bottom
	margin-left
	
	margin叠加相邻两个元素的上下margin是叠加在一起
*/

 

#box{ background:red;}
#div{width:200px;height:200px;background:blue;margin:100px;}
#footer{height:50px;background:yellow;}
/*
	margin传递，子元素的上下margin会传递给父级
*/