CSS定位布局及溢出

定位：

CSS定位（position）属性允许你自由设定元素的位置。
定位的基本思想很简单，他允许你定义元素框相对于其正常位置应该出现的位置，或者相对于有定位的父元素，另一个元素甚至浏览器窗口本身的位置
CSS有三种基本的定位机制：普通流，浮动和绝对定位。

• position定位
  position:static 静止定位 元素默认状态
  position:absolute 绝对定位 相对于最近的有定位的父元素进行定位
  position:relative 相对定位 相对于自己原来位置进行定位
  position:fixed 固定定位 相对于浏览器可视窗口进行定位

• absolute定位：元素相对于最近的，有定位的父级元素定位，如果其父级元素都无定位属性，则相对于body定位。元素脱离文档流（从文档流中删除），原本所占空间不保留。元素定位后生成一个行内块级盒子。绝对定位的框可以从它的包含块向上、右、下、左移动。绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

• relative定位：相对定位被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

• fixed定位：fixed固定定位相对于浏览器可视窗口进行定位，其他表现类似absolute绝对定位表现。

• z-index：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  相同的定位元素，结构后面的元素在重叠的情况下会默认覆盖结构之前的定位元素；元素可拥有负的 z-index 属性值。
  Z-index 仅能在定位元素上奏效（例如 position:absolute/fixed/relative;）

• **溢出overflow：**当一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性来控制这种情况
  值: visible | hidden | scroll | auto | inherit初始值: visible
  应用于: 块级元素、替换元素、表单元格

  overflow-x和overflow-y的属性原本是IE浏览器独自拓展的属性，后来被CSS3采用，并标准化。overflow-x主要用来定义。
  对水平方向内容溢出的剪切，而overflow-y主要用来定义对垂直方向内容溢出的剪切。
  visible 元素的内容在元素框之外也可见
  auto 如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容
  scroll 元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容[图片]
  hidden 元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见
  CSS - 文本溢出省略号代替（单行文本）
  overflow：hidden; //超出隐藏
  text-overflow:ellipsis; // 文本超出省略号代替
  white-space:nowrap; // 禁止文字自动换行

CSS图片精灵sprites

css sprites就是CSS精灵。简单理解就是通过将多个图片融合到一张图里面，然后通过背景定位技术布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
适合：一般小图标素材
小的图标ico类素材，一般图标很小十多像素几十像素的宽度高度，这种适合拼合成一张图实现sprites background背景定位布局。小icon太多自然加载网页时瞬间会消耗些http 请求链接数；
不适合：大图大背景
大背景一般用于网页背景，拼合时，设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小，网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些，所以大图不推荐拼接拼合来使用css sprites背景定位布局。
sprites适合推荐小结
一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。

css三列布局（实现自适应）

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。

• 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
• 浮动法 ：此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。
• 弹性盒布局：min方法定义了元素的最小的宽高度，该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值宽与高，但不能比其矮。不允许指定负值。取值单位：px/%;
  max方法定义了元素的最大的宽高度，该属性值会对元素的高度设置一个最大限制。因此，元素可以比指定值宽与高，但不能比其高。不允许指定负值。此属性很少使用，是为了避免内容太多将高度撑太高影响布局美化统一，这个时候我们设置最大高度限制。比如一个table tr td表格对象里装一个图片，而图片高度不确定，如果太高了不想图片撑破tr td表格，这个时候通过css max-height限制图片最大高度是有必要的

隐藏元素功能：

visibility和display两个属性都有隐藏元素的功能，display:none和visibility:hidden的区别，简单的总结一句话就是：visibility:hidden隐藏，但在浏览时保留位置；而display:none视为不存在，且不加载

body {
	margin: 0;
	padding: 0;
}
ul,li,ol {
	list-style-type: none; 
}

.wp {
	width: 730px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -350px;
	overflow: hidden;
}


.choose {
	width: 220px;
	height: 50px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: -110px;
}

.choose>ul>li {
	display: block;
	float: left;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 20px; 
	background-color: violet;
	border: 1px solid violet;
}

label {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
}

input,img {
	display: none;
}

input:checked+img {
	display: block;
}

	"utf-8">
	"X-UA-Compatible" content="IE=edge">
	
	"stylesheet" href="demo7.css">


	
"wp">
			
"img">
			
"1" type="radio" name="banner">"../makeruhead/img/TB18o6AMXXXXXahXVXX6o7KSVXX-730-300.jpg" alt="">
			
"2" type="radio" name="banner">"../makeruhead/img/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg" alt="">
			
"3" type="radio" name="banner">"../makeruhead/img/TB1srspLFXXXXbJXVXX6o7KSVXX-730-300.jpg" alt="">
			
"4" type="radio" name="banner">"../makeruhead/img/TB1JzkjLXXXXXaCaXXX6o7KSVXX-730-300.jpg" alt="">
		
		
"choose">
			

			
"1">
			
"2">
			
"3">
			
"4">
		
		
	
	
	
"test">
		"radio" name="1222">
	

* {
	margin: 0;
	padding: 0;
}



div {
	padding-left: 50px;
	padding-right: 100px;
	padding-top: 20px;
	padding-bottom: 10px;
	background-color: violet;
	width: 300px;
	height: 200px;
	float: left;
}


#div2 {
	visibility: hidden;
}
#div1 {
	display: none;
}