css經典問題
佈局
(一)聖盃佈局、雙飛翼佈局
- 聖盃佈局
<div class="box">
<div class="center">123</div>
<div class="left">1</div>
<div class="right">333</div>
</div>
===CSS==========
.box {
width: 500px;
height: 300px;
background-color: #2c3e50;
div {
float: left;
height: 100%;
text-align: left;
}
.center {
width: 100%;
background-color: yellow;
padding: 0 100px;
box-sizing: border-box;
}
.left {
width: 100px;
background-color: #42b983;
margin-left: -100%;
}
.right {
width: 100px;
background-color: bisque;
margin-left: -100px;
}
}
//這裏我是使用 box-size 如果不使用 則可以使用 position:relative 和 left right 來 達到效果
- 雙飛翼佈局
<div class="fly">
<div class="center">
<div class="body">123123</div>
</div>
<div class="left">1</div>
<div class="right">333</div>
</div>
.fly {
width: 500px;
height: 300px;
.center,
.left,
.right {
height: 100%;
float: left;
text-align: left;
}
.center {
width: 100%;
/*box-sizing: border-box;*/
background-color: yellow;
.body {
margin: 0 100px 0 50px;
background-color: bisque;
}
}
.left {
background-color: #42b983;
width: 50px;
margin-left: -100%;
}
.right {
background-color: #2c3e50;
width: 100px;
margin-left: -100px;
}
}
區別
:一個是margin 一個padding
(二)上下高度固定,中間自適應
<div class="common">
<div class="header">1</div>
<div class="body">123</div>
<div class="foot">4</div>
</div>
.common {
width: 500px;
height: 300px;
background-color: yellow;
position: relative;
.header,
.foot {
position: absolute;
height: 50px;
background-color: red;
width: 100%;
}
.header {
top: 0;
}
.foot {
bottom: 0;
}
.body {
height: 100%;
background-color: #42b983;
box-sizing: border-box;
padding: 50px 0;
}
}
走的 padding 來實現隔離距離
(三)垂直劇中
<h3>垂直劇中</h3>
<div class="ucenter">
<h4>relative 方法</h4>
<div class="u-relative">
<div></div>
</div>
<h4>absolute 方法</h4>
<div class="u-absolute">
<div></div>
</div>
</div>
==================CSS====
.ucenter {
width: 500px;
height: 500px;
overflow: auto;
.u-relative {
width: 100px;
height: 100px;
background-color: #2c3e50;
div {
margin: 0 auto;
width: 40px;
height: 40px;
background-color: #42b983;
transform: translateY(-50%);
position: relative;
top: 50%;
}
}
.u-absolute {
width: 100px;
height: 100px;
background-color: #2c3e50;
position: relative;
div {
width: 40px;
height: 40px;
background-color: #42b983;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
flex 佈局 操作 更簡單,暫不吹 ,有興趣的可以去看看
CSS 常見問題
(一)CSS優先級算法如何計算
-
選擇器的特殊性值表述爲4個部分,用 0,0,0,0 表示。
-
ID選擇器的特殊性值
0,1,0,0 -
類選擇器、屬性選擇器或僞類
0,0,1,0 -
元素和僞元素
0,0,0,1 -
通配選擇器*對特殊性沒有貢獻
0,0,0,0
a{color: yellow;} /*特殊性值:0,0,0,1*/
div a{color: green;} /*特殊性值:0,0,0,2*/
.demo a{color: black;} /*特殊性值:0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
#demo a{color: orange;} /*特殊性值:0,1,0,1*/
div#demo a{color: red;} /*特殊性值:0,1,0,2*/
<a href="">第一條應該是黃色</a> <!--適用第1行規則-->
<div class="demo">
<input type="text" value="第二條應該是藍色" /><!--適用第4、5行規則,第4行優先級高-->
<a href="">第三條應該是黑色</a><!--適用第2、3行規則,第3行優先級高-->
</div>
<div id="demo">
<a href="">第四條應該是紅色</a><!--適用第6、7行規則,第7行優先級高-->
</div>
(二)src與href的區別
- href是引用和頁面關聯,是在當前元素和引用資源之間建立聯繫
- src表示引用資源,表示替換當前元素
href 不會阻止文檔解析 ,script 會阻止 ,這就是 爲什麼js 放在 body下面的原因
(三)box-sizing 盒子模型
- 標準盒子模型 :content-box —總寬度=margin+border+padding+width
- IE盒子模型:border-box —總寬度=margin+width
(四)清除浮動
clear:both;
add 一個div 加 clear:both;
僞類 :after 加
::after{
/*只需要給浮動元素的父容器添加上這個類就可以了: clear_float*/
display: block;/*把::after設置成塊級元素*/
content: "";/*想讓僞類起作用, 必須添加這個屬性*/
clear: both;
}
(五)塊級元素、行內元素
- 塊級元素
div p hr ul form h1-h6 li 等
- 行內元素
a span i text label 等
(六)CSS3有哪些新特性
- rgba
- word-wrap
- box-shadow text-shadow
- border-radius
- 媒體查詢 等
(七)margin 摺疊
- 同級元素 選擇 最大邊距值
- 由父級別元素
.box-margin {
width: 500px;
height: 300px;
background-color: bisque;
.step-item {
width: 100%;
height: 40px;
&:first-child {
margin-bottom: 40px;
background-color: #42b983;
}
&:last-child {
margin-top: 100px;
background-color: red;
.step-self {
margin-top: 30px;
width: 100%;
height: 10px;
background-color: darkgreen;
}
}
}
}
<div class="box-margin">
<div class="step-item"></div>
<div class="step-item">
<div class="step-self"></div>
</div>
</div>
- 沒有內容將父元素和後代元素分開/空的塊級元素