行內元素、塊元素、行內塊元素
行內元素不可設置寬高
塊元素可設置寬高并且獨占一行
行內塊元素可設置寬高
錨點
<!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為不存在
