CSS初探学习总结提高三

Posted 2023-03-01 xj_love

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS初探学习总结提高三相关的知识，希望对你有一定的参考价值。

前面一二两节记录的都是CSS的基础知识，并且都是标准布局，块级，行级元素自上而下的布局，也称作标准布局。接下来认识CSS三个布局中（标注，浮动，定位）的浮动布局。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动布局</title>
	<style type="text/css">
		* 
			margin: 0;
			padding: 0;
		
		.headView,
		.twoView,
		.fourView,
		.bottomView 
			width: 960px;
			margin: 0 auto;
			margin-bottom: 10px;
		
		.headView 
			height: 80px;
			background-color: pink;
		
		.leftView 
			width: 160px;
			height: 350px;
			background-color: skyblue;
			margin-right: 10px;
			float: left;
		
		.rightView 
			width: 790px;
			height: 350px;
			background-color: deeppink;
			float: left;
		
		.clearfix:before, .clearfix:after  /*双伪元素清除浮动*/
			content: "";
			display: block;  /* 触发bfc 防止外边距合并 */
		
		.clearfix:after 
			clear: both;
		
		.clearfix 
			*zoom: 1;   /*只在ie6,7中生效*/
		
		.fourView 
			height: 400px;
			background-color: orange;  
		
		ul 
			list-style: none; /*列表去除小数点*/
		
		.fourView ul li 
			margin-right: 13px;
			height: 400px;
			width: 230px;
			background-color: pink;
			float: left;
			text-align: center;
		
		.fourView ul li:last-child 
			float: right;
			margin: 0;
		
		.fourView ul li:nth-child(even)  /*even偶数*/ /*odd奇数*/
			background-color: skyblue;
		
		.bottomView 
			height: 150px;
			background-color: #ccc;
		
		
	</style>
</head>
<body>
	<div class="headView"></div>
	<div class="twoView clearfix">
		<div class="leftView"></div>
		<div class="rightView">
			<p>1.浮动布局，不给宽，宽取决内容的多 float:left right none</p>
			<p>2.有了浮动布局后，元素具有行内块元素的特性</p>
			<p>3.浮动布局保证父级是标注布局</p>
			<p>4.多个布局，要保证同时具备浮动布局，一个有，一个没有，会叠加</p>
			<p>5.浮动的目的让多个块级元素在同一行，并且没有缝隙</p>
			<p>6.浮动布局不会遮住内外边距</p>
			<p>7.清除浮动：不给父级高度，高度由子级内容撑开，入股子级有浮动布局，父级要清除浮动</p>
			<p>7.1 额外标签发 clear:both  左右全部清除 额外写一个标签声明</p>
			<p>7.2  父级添加overflow属性方法</p>
			overflow:hidden 触发BFC,可以清除浮动auto,scroll</p>
			<p>7.3 after伪元素清除浮动 .clearfix:after content:”.”,display:block,heitht:0,visiblity:hidden(隐藏盒子),cleat:both.clearfix*zoom:1 代表只有ie,67使用</p>
			<p>7.4 双伪元素清除浮动（推荐）
			.clearfix:before,.celarfix:aftercontent:””,display:block .clearfix:afterclear:both .clearfix*zoom:1</p>
		</div>
	</div>
	<div class="fourView clearfix">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
	<div class="bottomView"></div>
</body>
</html>

以上是关于CSS初探学习总结提高三的主要内容，如果未能解决你的问题，请参考以下文章

CSS初探学习总结提高 三

CSS初探学习总结提高三