行内元素、块元素、行内块元素
行内元素不可设置宽高
块元素可设置宽高并且独占一行
行内块元素可设置宽高
锚点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点</title>
<style>
div{
width:100%;
height:300px;
}
a{
font-size:24px;
}
#div1{
background-color:red;
}
#div2{
background-color:blue;
}
#div3{
background-color:yellow;
}
#div4{
background-color:gray;
}
</style>
</head>
<body>
<div id="div1">模块1</div>
<div id="div2">模块2</div>
<div id="div3">模块3</div>
<div id="div4">模块4</div>
<a href="#div1">跳往模块1</a>
<a href="#div2">跳往模块2</a>
<a href="#div3">跳往模块3</a>
<a href="#div4">跳往模块4</a>
</body>
</html>
清除浮动
清除浮动方法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动方法1</title>
<style>
*{
margin:0;
padding:0;
}
ul li{
list-style: none;
width:100px;
height:100px;
background-color:red;
float:left;
margin:10px;
}
/* 这句是重点 */
p{
clear:both;
}
</style>
</head>
<body>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
<p>我是在ul下面的内容</p>
</body>
</html>
清除浮动方法2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动方法2</title>
<style>
*{
margin:0;
padding:0;
}
/*这句是重点*/
ul{
overflow:hidden;
}
ul li{
list-style: none;
width:100px;
height:100px;
background-color:red;
float:left;
margin:10px;
}
</style>
</head>
<body>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
<p>我是在ul下面的内容</p>
</body>
</html>
清除浮动方法3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动方法3</title>
<style>
*{
margin:0;
padding:0;
}
/*这句是重点*/
ul:after,ul:before{
content:'';
display:table;
}
ul:after{
clear:both;
}
ul{
zoom:1;
}
ul li{
list-style: none;
width:100px;
height:100px;
background-color:red;
float:left;
margin:10px;
}
</style>
</head>
<body>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
<p>我是在ul下面的内容</p>
</body>
</html>
清除浮动方法总结
1.第二个因为有浮动浮起来的标签添加
clear:both
2.因为子元素导致父元素没有高度在父标签上添加overflow:hidden
3.定义一个通用class每次给没有被浮动后没有撑起来的父级添加class名,例如：给以上例子的ul添加cf的class
.cf:after,.cf:before{
content:'';
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
左边固定右边自适应
方法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>左边固定右边自适应1</title>
<style>
/*方法一
#div1{
width:200px;
float:left;
height:200px;
background-color:red;
}
#div2{
width:calc(100% - 200px);
float:right;
height:200px;
background-color:blue;
}*/
/*方法二*/
#div1{
float:left;
width:100px;
height:200px;
background-color:red;
}
#div2{
margin-left:100px;
height:200px;
background-color:blue;
}
/*方法三
#div1{
height:200px;
float:left;
width:300px;
background-color:red;
}
#div2{
overflow:hidden;
height:200px;
background-color:blue;
}*/
/*方法四
#content{
display:flex;
}
#div1{
height:200px;
width:400px;
background-color:red;
}
#div2{
flex:1;
height:200px;
background-color:blue;
}*/
</style>
</head>
<body>
<div id="content">
<div id="div1"></div>
<div id="div2"></div>
</div>
</body>
</html>
左边固定 右边固定 内容自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
#container {
overflow: hidden;
}
#mid,
#left,
#right {
float: left;
position: relative;
}
#mid {
width: 100%;
padding: 0 300px 0 300px;
box-sizing: border-box;
background: salmon;
}
#left {
width: 300px;
margin-left: -100%;
background: yellow;
}
#right {
width: 300px;
margin-left: -300px;
background: lightblue;
}
</style>
<div id='container'>
<div id='mid'>mid</div>
<div id='left'>left</div>
<div id='right'>right</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.left,
.main,
.right{
float: left;
min-height: 130px;
}
.left{
margin-left: -100%;
width: 100px;
background: red;
}
.right{
margin-left: -220px;
width: 220px;
background: blue;
}
.main{
width: 100%;
}
.main-inner{
margin-left: 100px;
margin-right: 220px;
min-height: 130px;
background: green;
word-break: break-all;
}
.footer{
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="main">
<div class="main-inner">
<p>center</p>
</div>
</div>
<div class="left">
<p>leftText</p>
</div>
<div class="right">
<p>rightText</p>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
indexof用法
-1为不存在
网友评论