布局的一点总结

1.box布局

Box布局实现了浮动，并且默认沿着一行排列div。超过部分在页面可视区域之外（一行的右边），超过部分不会跑到下一行。

Box布局的好处：如果左对齐，不用考虑子元素的宽度， box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。

2.选择按钮

如果用input的对象，选择按钮其实只有radio对象，button对象只在点击事件的时候使用。

Input选择按钮用其他的替代，不同状态改变class，这样做的好处是样式可以自定义，功能可以自定义：单选或者多选。以下是图片按钮的例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*按钮未选中状态*/
.select-icon{
	background: url("../images/yy/select-icon.png") no-repeat;
	background-size: 16px 16px;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 6px;
	top: 50%;
	margin-left:1px;
	z-index: 100;
}
/*按钮选中状态*/
.select-icon.cur{ background: url("../images/yy/selected-icon.png") no-repeat; background-size: 16px 16px; } 
</style> 
</head> 
<body> 
	<div class="select-icon"></div> 
    <div class="select-icon cur"></div> 
<script> 
//获取选中状态的元素
$(".cur") 
</script> 
</body>
</html>

第1个样式是为未选择状态，第2个样式是选中状态。第二个样式的写法注意：在第1个样式上，多了1个样式而非切换样式。这样的好处是很容易获取到操作。

这样，我们用js获取选中的按钮可以这么写：
$(".cur")

3.页面错乱

在修改少量的样式布局后，页面完全错乱，经常以下两种原因：

1）. 子元素浮动，为清除浮动，导致父元素高度塌陷，与父元素同级的元素占用这块区域，页面布局不正常。

2）. 绝对定位的问题，绝对定位跟元素层次有关系，定位的标准是寻找最近的有定位的父元素（position:relative也算）。如果父元素忘记写定位，会出现错位，这时候会一直向上找有定位的元素，直至body。

3）. 给元素设置高度，内容超出，下一个元素排列在超出部分的上面。这是因为：

div限定大小，内容超过大小，同级的下一个div会紧跟上一个div的大小进行排列，会出现覆盖超出部分的效果，例子：

4). margin重叠

4.图片居中的问题：

<img>也是inline元素，但是<img>和另一个inline元素input，都可以设置高度。他们有个称呼，叫替换元素。除了他们两这，还又<textarea>、<select>、<object>都是替换元素。他们是自身的某个属性决定显示的内容，这样一类元素。

Inline元素设置水平居中，在父级块级元素上设置属性：text-align:center；那么，现在的问题是垂直居中的问题了。

两种特殊的情况：1）块级父元素固定大小，<img>可以固定大小，这时候只需要一点计算，计算好margin,padding。图片自然能居中，电脑版网页有这么做的。

2）<img>可以固定大小，那么填充margin，padding这些。只要图片的这些填充四个方向的数值相同，图片放进去后自然居中。

复杂的情况是，图片要自适应。参考完阮一峰的博客胡，模仿写了一个，只在chrome下测试过。主要是这个：vertical-align:middle;display: table-cell

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{padding:0;margin:0}
.main{width:600px;height:1200px;text-align:center;border:1px solid #009;vertical-align:middle;display: table-cell;}
.main img{width:80%;margin:auto 0;}
</style>
</head>
<body>
	<div class="main">
    	<img src="../assets/images/yy/good.png"/>
    </div>
</body>
</html>

　5 轮播图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding:0;margin:0;
		}
		section{
			width:300px;
			overflow: hidden;
		}
		.container{
			width:30000px;
			margin:0px;
		}
		.container li {
			float: left;
		}
		.container li.active{
			display: block;
		}

		.container li img{
			width:300px;
		}
	</style>
</head>
<body>
	<section>
		<ul class="container">
			<li>
				<a>
					<img src="http://pic11.nipic.com/20101214/213291_155243023914_2.jpg"/>
				</a>
			</li>
			
			<li>
				<a>
					<img src="http://www.taopic.com/uploads/allimg/110915/15-1109150K62880.jpg"/>
				</a>
			</li>
			
			<li>
				<a>
					<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=66250564,3253305393&fm=23&gp=0.jpg"/>
				</a>
			</li>
			
		</ul>
	</section>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var _index = 0;
			function setPic(index){
				$('.container').animate({
        			marginLeft:"-300px"
				},1000,function(){
					$(".container").css({marginLeft:"0px"});
					$(".container li:first").remove().clone(true).appendTo(".container");
				})
			}

			setInterval(function(){
				_index++;
				console.log(_index)
				setPic(_index);
			},3000)
			
		})
	</script>
</body>
</html>

posted @ 2016-07-13 09:48 小虫1 阅读(313) 评论(0) 收藏举报

刷新页面返回顶部

小虫虫

布局的一点总结

公告