粘连布局
粘连布局(css sticky footer):我们有一块内容<main>
。
当<main>
的高度足够长的时候,<footer>
应该紧跟在<main>
元素的后面。
当<main>
元素比较短的时候(比如:小于屏幕高度),我们期望这个<footer>
元素能够“粘连”在屏幕的底部。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#wrap .main{
padding-bottom: 50px;
}
#wrap{
min-height: 100%;
background: pink;
text-align: center;
}
#footer{
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}
</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 />
</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>
效果图:
BFC
- BFC是什么?
BFC(Formatting Context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box 如何布局,并且这个区域与外部毫不相干。
- BFC布局规则:
1、内部的Box会在垂直方向,一个接一个地放置
2、BFC的区域不会与float box重叠
3、内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
4、 计算BFC的高度时,浮动元素也参与计算。(清除浮动 haslayout)
5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此 - BFC什么时候出现(哪些元素会生成BFC?)
根元素
float属性不为none
position为absolute或fixed
overflow不为visible
display为inline-block,table-caption,flex,inline-flex
两列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 600px;
}
div{
height: 200px;
}
#left{
width:200px;
background: pink;
float: left;
}
#right{
background: deeppink;
overflow: hidden; /*开启BFC,BFC和float box不重叠*/
}
</style>
</head>
<body>
<div id="left">left</div>
<div id="right">right</div>
</body>
</html>
效果图:
商品列
- 文字溢出,显示省略号:
display:block;
white-space: nowrap; (表示文本不换行)
text-overflow: ellipsis;
overflow: hidden;
这四条缺一不可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 300px;
border: 1px solid;
margin: 0 auto;
}
#left{
float: left;
width: 80px;
height: 80px;
background: url(../img/2.jpg) no-repeat;
background-position: -28px -28px;
}
#desc{
padding-left: 10px;
overflow: hidden;
display:block;
white-space: nowrap;
text-overflow: ellipsis;
}
/*
* 文字溢出,显示省略号
* display:block;
* white-space: nowrap;
* text-overflow: ellipsis;
* overflow: hidden;
* 这三条缺一不可
*/
</style>
</head>
<body>
<div id="wrap">
<div id="left"></div>
<div id="desc">
此商品买一送三此商品买一送三<br />
此商品买一送三此商品买一送三<br />
此商品买一送三此商品买一送三<br />
此商品买一送三此商品买一送三<br />
此商品买一送三此商品买一送三<br />
此商品买一送三此商品买一送三<br />
</div>
</div>
</body>
</html>
效果图:
margin重叠
内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。(相邻的父子元素、相邻的兄弟元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#up,#down{
width: 200px;
height: 200px;
background: pink;
margin: 50px;
}
</style>
</head>
<body>
<div id="up">up</div>
<div id="down">down</div>
</body>
</html>
效果图:
margin不重叠
margin不重叠有两种方法:BFC不同、不相邻
1、BFC不同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*
* 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
* 此时,它们的BFC不同
*/
#up,#down{
width: 200px;
height: 200px;
background: pink;
margin: 50px;
}
</style>
</head>
<body>
<div id="up">up</div>
<div style="overflow: hidden;">
<div id="down">down</div>
</div>
</body>
</html>
2、不相邻
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*
* 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
* 此时,不相邻
*/
#up,#down{
width: 200px;
height: 200px;
background: pink;
margin: 50px;
}
</style>
</head>
<body>
<div id="up">up</div>
<div style="height: 1px;"></div>
<!--<br />-->
<!--br标签有默认高度-->
<div id="down">down</div>
</body>
</html>
检测低版本IE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义检测低版本ie的函数</title>
</head>
<body>
</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>
</html>
左右查询
左查询,对等号左侧的变量进行查询,沿着作用域链查询,若查询不到,则js会自动在全局作用域var b
右查询,对等号右侧的变量进行查询,沿着作用域链查询,若查询不到,则报错
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//左查询,对等号左侧的变量进行查询,沿着作用域链查询,若查询不到,则js会自动在全局作用域var b
var a=8;
test()
function test(){
b=a;//对a使用右查询,对b使用左查询
console.log(b);
}
//右查询,沿着作用域链查询,若查询不到则报错
//console.log(b);
</script>
</html>
vertical-align
vertical-align用来指定inline-block的垂直对齐方式。
我们经常会在img、input(替换元素)上使用vertical-align属性。
使图片水平居中:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
height: 400px;
width: 400px;
border: 1px solid;
margin: 0 auto;
text-align: center;
}
#wrap:after{
content: "";
display: inline-block;
height: 100%;
width: 0px;
background: pink;
vertical-align: middle;
}
#wrap img{
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrap">
<img src="../../../img/1.jpg" width="150px"/>
</div>
</body>
</html>
效果图: