溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“CSS語法的常用技巧有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS語法的常用技巧有哪些”這篇文章吧。
盒模型
content-box (W3C 標準盒模型)
border-box (IE 盒模型)
具體區別是： 1. border-box的寬度一旦確定，就不會改變。width = border + padding + 內容的寬度 2. content-box會根據padding增加或者是減小。width = 內容的寬度
BFC
就是一個容器，里外不相互影響，記住：清除浮動的時候，如果使用 overflow： hidden，是存在缺點的，如果超過了范圍，那么則被隱藏了
觸發原理
1 根元素 2 float屬性不為none,例如left、right 3 position為absolute或fixed 4 display為inline-block, table-cell, table-caption, flex, inline-flex 5 overflow不為visible，例如hidden、auto
規則
1. 內部的Box會在垂直方向，一個接一個地放置。 2. 屬于同一個BFC的兩個相鄰Box的margin會發生重疊。 3. BFC的區域不會與float box重疊。 4. BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素 5. 計算BFC的高度時，浮動元素也參與計算
作用
1. 清除浮動，BFC里面的浮動元素高度也會參與計算 2. 防止margin重疊
清除浮動
.clearfix:after{
content: '',
height: 0;
display: block;
visibility: hidden;
clear: both;
line-height:0;//行高為0
}布局
浮動布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 100px;
background-color: red;
}
.right {
float: right;
width: 300px;
height: 100px;
background-color: blue;
}
.center {
margin: 0px 300px 0px 300px;
background-color: black;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="left">1</div>
<div class="right">2</div>
<div class="center">3</div>
</div>
</body>
</html>缺點：會存在塌陷的問題
Flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
display: flex;
}
.left {
width: 300px
height: 100px;
background-color: red;
}
.center {
flex:1;
height: 100px;
background-color: black;
}
.right {
width: 300px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.left {
position: absolute;
left:0px;
left: 300px;
height: 100px;
background-color: red;
}
.right {
position: absolute;
right:0px;
width: 300px;
height: 100px;
background-color: blue;
}
.center {
position: absolute;
left:300px;
right:300px;
background-color: black;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="left">1</div>
<div class="center">2</div>
<div class="right">3</div>
</div>
</body>
</html>CSS優化
(1)壓縮 (2)屬性連寫： font ：font-style font-weight font-size (3)繼承：font clolr (4) CSS放入Head中，減少reflow repaint
以上是“CSS語法的常用技巧有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
