Day6 边距

边距

外边距

• margin: 上 右 下 左指的盒子与盒子之间的距离

塌陷

	*{
	    margin: 0;
	    padding: 0;
	}
	.box{
	    width: 400px;   
	    height: 400px;
	    background-color: #ccc;
	    /* 万能老司机 */
	    overflow:hidden;
	    /* border-top:1px solid #000; */
	}
	.dv{
	    width: 150px;
	    height: 150px;
	    background-color: #f40;
	    margin-top: 50px;
	    /* margin 塌陷 */
	}
	
	/* margin  塌陷
	    如果是嵌套的两个元素  给子元素  margin-top 以后会把这个值  错误的加给父元素  
	    1、overflow:hidden;
	    2、给父元素 1px 的上边框
	 */

• 遇到塌陷问题,有两种方法:

1. 使用overflow属性,赋值hidden,使其在处理元素溢出边框时,内容被修剪
2. 使用border-top属性给父元素增加上边框

内边距

• padding: 上 右 下 左指盒子与盒内元素的距离
• 以span为例的横排列的元素不建议使用padding-top属性(因为效果跟预想不同)
• 元素的宽度与其占地面积并非相等,宽度=padding+content(内容)+border. 而占地面积=宽度+margin

居中

	div{
		width: 400px;
		height: 400px;
		background-color: #f40;

		/* auto  自动填充 */
		/* margin-left:auto;
		margin-right:auto; */
		margin:100px auto;
	    }

使用css制作表格线:

	table{
		border: 1px solid #ccc;
		border-spacing: 0;
		border-collapse: collapse;
		}
	td{
		border: 1px solid #ccc;
	}

其中,table属性中的border为表格外边框,
而td中的border属性为表格的线.
border-spacing:0则表示表格之间的间隔为0,
border-collapse:collapse表示合并单元格为一条线(而非html中的两条线并存)

使表单边框兼容其他浏览器

• 原理是使用自定义的border属性使得样式在各个浏览器上表现一致.

	input{
		width: 200px;
		height: 50px;
		outline: none;
		border: none;
		border: 1px solid #ccc;
	}

outline 是用来去除表单中的蓝色线条.
border: none属性用来清除默认的边框样式
border:1px solid #ccc用来设定新的边框样式
其主要原因是各个浏览器对于表单元素的默认边框样式定义不一样.

负值问题

• text-indent, margin, letter-spacing都可以给负值.
• padding 不能给负值.

宽高问题

• 结论: 所有从左到右排列的元素设置宽高没用, 除非加给他们浮动属性.
• 目标模式:
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
  让红色方框内皆可点击,而实际图片只有蓝色方框内的.

	.head{	
		height:100px;
	}
	.head .logo{
		float:left;
	}
	.head h1{
		width: 243px;
		height: 100px;
		margin-left: 21px;
	}
	.head a{
		float: left;
		width: 243px;
		height: 60px;
		padding-top: 40px;
	}
	.head a img{
		float: left;
	}

让a覆盖整个h1的范围,并且让其浮动并有40的上内边距.(浮动才能生效)

导航栏

• 要让导航栏左右都有适度的宽度,并且水平和垂直都居中.
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

	.nav{	
		height:59px;
		color:#fff;
		background-color:#2f2f2f;
	}
	.nav ul{
		height: 59px;
		padding-left: 27px;
	}
	.nav ul li{
		/* 去掉小圆点 */
		list-style: none;
		float: left;
		width: 119px;
		height: 59px;
		line-height:59px;
		text-align: center;
		border-left: 1px solid #494949;
	}
	.nav ul .li1{
		border-left:none;
	}
	.nav ul li a{
		color:#fff;
		text-decoration: none;
		font-size: 12px;
	}

核心在于,在行高=高以及水平居中的前提下,对ul属性的padding-left,让导航栏左右拉伸.