06001 PHP第六天学习笔记 – 恵玩科技



昨日回顾

盒子模型深入
	一个盒子的尺寸构成:是由以下几部分构成的
	margin  border  padding 内容区
块盒子的宽高:完全遵从上述规则
行内盒子的宽高:
	内容区的宽度由内容来决定,也就是说,我们设置的宽高属性是没有用的
	
行内盒子和块盒子可以相互转换:
	转换为块盒子:	display:block;
	转换为行内盒子:	display:inline;
	
背景:
	背景颜色: background-color
	背景图片: background--image:url(图片路径 url);
	背景图片的重复性:background-repeat: no-repeat;
	背景图片的定位
	背景综合: background: 背景颜色 背景图片  背景重复性 背景定位
	边框综合: border:线型  线宽  线色
	
列表样式:
	list-style-type:前导符设定
	
	
	margin:0 auto;
	最常用的居中代码
	
	只要看起来是平等的东西,就可以看成是列表,列表是行内盒子
	vertical-align:middle;图和文字并排时,垂直居中对齐
	
	布局基本思想
		一个内容设定一个id
		css针对不同的内容设定样式
		
绝对定位:
		position:absolute;绝对定位
		position:relative;相对定位
		position:fixed;固定定位
					--->常用于固定的导航栏
					--->拥有层叠顺序效果
						--->利用z-index:层数;控制属于哪个图层
						--->坐标系想,x,y,z轴
						
左浮动
	--->背景图
	左边:
		float:left;
	右边:
		float:left;
		background:url() right top;右对齐
		
		
	line-heigt:35px;行高等于盒子高度的时候,文字自然居中.
	行内元素都可以使用
		text-align:center;
		
居中总结:
		行内元素在块盒子水平居中
			text-align:center;
		行内元素在块盒子垂直居中
			设定行高等于盒子高  height=33px;line-height=30px;
		块盒子在父块盒子居中
			margin:0 auto;
		块盒子在父盒子垂直居中
			无属性可以自己做到
			方法:position:relative;top:50%;margin-top:50%; 最后距离顶部的值可以写成行高的一半
			em:文字高度
			
			
			web文件越少,性能越好!
			称之为 css精灵技术
			
		只要有子盒子浮动,一定要第一时间给父盒子加overflow:hidden;
		
		
		css选择器权重最高的是  !important  用法举例: color:red !important;
		
		
			
		
	

 

打赏作者