css2

初始包含块
浮动元素的包含块是离他最近的块级祖先元素}(浮动提升半级)
定位元素
包含块-根元素(html)的包含块成为初始包含块(由用户代理创建,她是一个视窗大小的矩形)
对于一个非根元素,其position值为relative或static包含块由最近块父及构成
对于一个非根元素,其position值为absolute,包含块设置为最近的position值不是static的祖先元素,
1.如果这个元素是块级元素包含块设置为标准盒模型的内容区(浏览器厂商规范为div+css,而不是行内元素,行元素)

在这里插入图片描述
各属性默认值
left top right bottom width height默认值为auto
margin padding 为零
border-width默认值为中等大小
百分比参照与margin
嵌套元素margin padding 参照的是父元素的width
三列布局
1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
4.不要用定位来布局框架(他会脱离文档流,给后面布局带来影响)

	body{
				/*2*left+right*/
				min-width: 600px;
			}
			div{
				height: 100px;
			}
			#left,#right{
				width: 200px;
				background: pink;
			}
			#left{
				float: left;
			}
			#right{
				float: right;
			}
			#middle{
				background: deeppink;
			}
			//*中间列优先显示*/
		<div id="middle">middle</div>
		<div id="left">left</div>
		<div id="right">right</div>

圣杯布局无固定高宽

body{
				min-width: 600px;
			}
			#content{
				padding: 0 200px;
			}
			#header,#footer{
				height: 20px;
				text-align: center;
				border: 1px solid  deeppink;
				background: gray;
			}
			#content .middle{
				float: left;
				width: 100%;
				background: pink;
				/*padding: 0 200px;*/
			}
			#content .left{
				position: relative;
				left: -200px;//根据前端坐标系,往外为负值
				margin-left: -100%;//margin决定元素之间边界,负值史元素镂空
				float: left;
				width: 200px;
				background: yellow;
			}
			#content .right{
				position: relative;
				right: -200px;
				margin-left: -200px;
				float: left;
				width: 200px;
				background: yellow;
			}
			
			
			
			.clearfix{
				*zoom: 1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="content" class="clearfix">
			<div class="middle">
				<h4>middle</h4>
				<h4>middle</h4>
				<h4>middle</h4>
				<h4>middle</h4>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">footer</div>
	</body>

圣杯布局的技术要点
浮动:搭建完整的布局框架
margin为负值:调整旁边两列的位置,(使三列布局到一行上)
使用相对定位:调整旁边两列的位置,(是两列调整到两头)

注意的知识点float,absolute下margin左右auto会失效,浮动定位不能撑开父元素
伪等高圣杯布局

#wrap{
				width: 750px;
				border: 1px solid;
				margin: 0 auto;
				overflow: hidden;/*溢出隐藏*/
			}
			#wrap .left{
				float: left;
				width: 200px;
				background: pink;
				padding-bottom: 1000px;
				margin-bottom: -1000px;
			}
			#wrap .right{
				float: left;
				width: 500px;
				background: deeppink;
				padding-bottom: 1000px;
				margin-bottom: -1000px;
			}
			
			
			
			.clearfix{
				*zoom: 1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="wrap" class="clearfix">
			<div class="left">
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
				left <br />
			</div>
			<div class="right">
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
			</div>
		</div>

双飞翼布局

<head>
		<meta charset="UTF-8">
		<title></title>
		<!--两组实现的对比:
		1.俩种布局方式都是把主列放在文档流最前面,使主列优先加载。
		2.两种布局方式在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局。
		3.两种布局方式的不同之处在于如何处理中间主列的位置:
				圣杯布局是利用父容器的左、右内边距+两个从列相对定位;
				双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
		-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			
			
			/*头部 脚部样式*/
			#header,#footer{
				border: 1px solid;
				background: gray;
				text-align: center;
			}
			
			/*三列的伪等高布局*/
			#content .middle,#content .left,#content .right{
				/*padding-bottom:10000px ;
				margin-bottom: -10000px;*/
				height: 50px;
				line-height: 50px;
				float: left;
			}
			技术要点:将元素用padding往外扩,margin往里收
			/*双飞翼布局*/
			#content{
				overflow: hidden;
			}
			#content .middle{
				width: 100%;
				background: deeppink;
			}
			#content .middle .m_inner{
				padding: 0 200px;
			}
			#content .left,#content .right{
				background: pink;
				width: 200px;
				text-align: center;
			}
			#content .left{
				margin-left: -100%;
			}
			#content .right{
				margin-left: -200px;
			}
			
		</style>
	</head>
	<body>
		<div id="header">
			<h4>header</h4>
		</div>
		<div id="content">
			<div class="middle">
				<div class="m_inner">
					middle
				</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">
			<h4>footer</h4>
		</div>
	</body>
	```
	技术要点:margin为负值(不影响元素的位置)
	负值往里收
	正直往外扩
	
  **绝对定位模拟固定定位(两个只有在出现滚动条的时候不一样)**
禁止默认滚动条
将滚动条加给body
让body的尺寸变成视口的尺寸

 <style type="text/css">
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				height: 100%;
				overflow: auto;
			}
			.inner{
				position: absolute;
				width: 200px;
				height: 200px;
				left: 0;
				top: 0;
				background: darkgreen;
			}
		</style>
	</head>
	<body>
		<div id="wrap" style="height: 1000px;">
			<div class="inner"></div>
		</div>
	</body>
      绝对定位参照于包含块
      固定定位参照视口
      
**粘连布局**
*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			#wrap{
				min-height: 100%;
				background: chartreuse;
				text-align:center;
				overflow: hidden;
				
			}
			#wrap .main{
				padding-bottom:50px ;
			}
			#footer{
				height: 50px;
				line-height: 50px;
				background: green;
				text-align: center;
				margin-top: -50px;
			}
			
			/*粘连布局
			 stickFooter是什么
			 当<main>足够长的时候,footer跟紧在<main>后面
			 当<mian>小于屏幕的宽度的时候,footer在最底部
			 * */
		</style>
	</head>
	<body>
		<div id="wrap" >
			<div class="main">
				
				
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				
			</div>
		</div>
		<div id="footer">
			footer
		</div>
**BFC**
box是css布局的对象和基本单位
box的类型由元素的类型和display决定
display为block,会生成块级盒子
display为inline,会生成行级盒子
BFC决定了内部的块级盒子怎么布局,并且这个区域与外部没有关系
**BFC布局规则**
内部的box会垂直的一个一个放置
BFC区域不会与浮动盒子重叠
内部的Box垂直方向距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠
计算BFC的高度式,浮动元素也要参与浮动(清除浮动 haslayout)
BFC就是页面上一个隔离的容器,容器里的元素不会影响外面的元素,反之也是

**BFC什么时候出现(元素生成BFC)**
根元素
float不为none
position为absolute或fixed
display为inline-block table-cell table-caption flex inline-flex

两列布局

#wrap{
				width: 300px;
				border: 1px solid;
				margin: 0 auto;
			}
			
			#left{
				float: left;
				width: 80px;
				height: 80px;
				background: url(img/xfz.png) no-repeat;
				background-position: -50px -50px;
			}
			
			#des{
				padding-left:10px ;
				display: block;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;//形成BFC,margin重叠
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="left"></div>
			<div id="des">
				此产品贱卖  买一送三 此产品贱卖  买一送三此产品贱卖  买一送三 此产品贱卖  买一送三<br />
				此产品贱卖  买一送三 此产品贱卖  买一送三<br />
				此产品贱卖  买一送三 此产品贱卖  买一送三<br />
				此产品贱卖  买一送三 此产品贱卖  买一送三<br />
				此产品贱卖  买一送三 此产品贱卖  买一送三<br />
				此产品贱卖  买一送三 此产品贱卖  买一送三<br />
				此产品贱卖  买一送三 此产品贱卖  买一送三<br />
			</div>
		</div>

在同一个BFC下,margin会重叠
css hack
条件注释表达式
自定义低版本函数检测

</body>
<script type="text/javascript">
		console.log(isIE(8));

		//js中的作用域都是函数作用域
		function isIE(version){
			var b = document.createElement("b");
			b.innerHTML="<!--[if IE "+version+"]><i></i><![endif]-->";
			return   b.getElementsByTagName("i").length == 1 ;
		}

	//伪数组:  具有length属性的js对象
console.log(document.body.getElementsByTagName("i").length);
</script>
<script type="text/javascript">

左右查询
//左查询 对等号左侧的变量进行查询 在作用域链中进行查找 没找到在全局var 一个

	test()
	function test(){
		var a=8;
		b=a;
		console.log(b);//8
	}
	console.log(b)//8
	console.log(a)//undefined
	//右查询  等号的非左侧 作用域链中进行查找,没找到报错
	//		console.log(b);
</script>

清除浮动
··1.给父级加高度
扩展性不好

2.开启BFC
	overflow:hidden
	定位
	浮动(都是加给父级)
	
	ie 6 7底下不支持BFC
	
3.br标签
	ie6 不支持
	违反了结构 行为 样式相分离的原则
	
4.空标签
	违反了结构 行为 样式相分离的原则
		ie6下元素的最小高度为19px
			可以尝试给元素的fontsize设为0---> 2px

5.伪元素 + 开启haslayout
	因为ie6 7 下不支持伪元素  
	所以要额外的去开启haslayout

元素垂直水平居中
方式一

*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 200px;
				height: 200px;
				line-height: 200px;
				background: pink;
				margin: 0 auto;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="test">
			test
		</div>

方式二
已知高度的元素水平垂直居中方案

	#wrap{
				position: relative;
				width: 400px;
				height: 600px;
				background: pink;
				margin: 0 auto;
			}
			
			#inner{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -50px;
				margin-top: -50px;
				width: 100px;
				height: 100px;
				background: deeppink;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">
					test
			</div>
		</div>
	</body>

方式三

	<!--
	绝对定位盒子的特性
		高宽有内容撑开
		水平方向上:   left + right + width + padding + margin = 包含块padding区域的尺寸
								 0        0           100        0                0            400
		垂直方向上:   top + bottom + height + padding + margin = 包含块padding区域的尺寸
								0          0          	100          0                 0			600
	-->
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#wrap{
			position: relative;
			width: 400px;
			height: 600px;
			background: pink;
			margin: 0 auto;
		}
		
		#inner{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 100px;
			height: 100px;
			background: deeppink;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="inner">
				test<br />
				test<br />
				test<br />
				test<br />
		</div>
	</div>
</body>

方式四

	<!--未知高度的元素水平垂直居中方案-->
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				position: relative;
				width: 400px;
				height: 600px;
				background: pink;
				margin: 0 auto;
			}
			
			#inner{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
				background: deeppink;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">
					testtesttesttesttesttesttest<br />
					testtesttesttesttesttesttest<br />
					testtesttesttesttesttesttest<br />
					testtesttesttesttesttesttest<br />
					testtesttesttesttesttesttest<br />
					testtesttesttesttesttesttest<br />
			</div>
		</div>
	</body>

字体
font-size css属性指定字体大小,该属性被用于计算em的长度单位
默认值为medium chrome下是16px 可继承 最小为12px
px
em是动态的 当定义font-size属性的时候 1em等于父元素的字体大小
font-style 默认值normal Italic与oblique表示斜体
font-weight normal blod常规使用
font-family:指定字体 能管理一类字体
简写属性:font:font-style font-weight font-size/line-height font-family
文本属性
line-height:由顶线 中线 基线 底线
行高(上一个基线到下一行基线),行距(底线到顶线 计算行高减去字体大小),半行距
内容区(一行顶线到底线) 行内框((行高-font-size大小)/2) 行框 (一行上垂直垂直对齐时以行高最大行内框为基准)
字体总结
在web前端开发中,line-height要大于font-size的1.5
行高 :行高因子1设置代表父元素fontsize的1倍(行高一般用于垂直居中)
其他文本属性
color
text-align(只对行内元素与内联元素有作用,浮动元素没用)
text-indent:首行缩进(两格2em)
word-spacing:单词空格之间的距离
text-decoration:下划线等
letter-spacing:字母之间的间距
white-space控制换不换行
vertical-align(只对内联元素起作用垂直方向)
垂直居中

<body>
        <div style="background-color:deeppink; margin-top:50px ;">
            <span style="font-size:30px;background-color:pink;line-height:1.5;vertical-align: bottom;">中文English</span>
            <span style="font-size:40px;background-color:pink;line-height:1.5;">中文English</span>
            <span style="font-size:50px;background-color:pink;line-height:3;">中文English</span>
        </div>
    </body>

史图片垂直水平居中

#wrap{
				height: 400px;
				width: 400px;
				border: 1px solid ;
				margin: 0 auto;
				text-align: center;
			}
			#wrap:after{
				content: "";/*利用伪元素来设置*/
				display: inline-block;
				height: 100%;/*创建一个参满行的元素,记住设置为inline-block*/
				width: 0px;
				background: pink;
				vertical-align: middle;
			}
			#wrap img{
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<img src="img/img2.jpg" width="150"/>
		</div>
	</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值