目錄
1. 定位
position:static | relative | absolute | fixed;
static 靜態定位
relative 相對
absolute 絕對
fixed 固定
1.1 靜態定位
靜態定位意味着“元素默認顯示文檔流的位置”。沒有任何變化。
1.2 相對定位 relative
1.特征：
- 給一個標准文檔流下的盒子單純的設置相對定位，與普通的盒子沒有任何區別
- 留“坑”，會影響頁面布局
2.作用：
- 1.用於微調元素
- 2.做“子絕父相”布局方案的參考
3.參考點：
- 以原來的盒子為參考點
4.相對定位的值：top 、bottom 、left 、right
<style>
.box {
width: 500px;
height: 600px;
border: 1px solid #000;
}
.box .a {
width: 200px;
height: 200px;
background-color: red;
}
.box .b {
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 30px;
left: 50px;
}
.box .c {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
1.3 絕對定位 absolute
1.參考點：
判斷是否有定位（相對定位，絕對定位，固定定位）的祖先盒子進行定位：
- 1.如果沒有定位的祖先盒子，以body為參考點
- 2.如果單獨設置了一個盒子為絕對定位：
- 1.以top描述，它的參考點是以body的（0，0）為參考點
- 2.以bottom描述，它的參考點是以瀏覽器的左下角為參考點
2.子絕父相
以最近的父輩元素的左上角為參考點進行定位
3.特征：
- 1.脫標
- 2.壓蓋
- 3.子絕父相
<style>
.box {
width: 500px;
height: 600px;
border: 1px solid #000;
position: relative;
float: right;
}
.box .a {
width: 200px;
height: 200px;
background-color: red;
}
.box .b {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 20px;
left: 20px;
}
.box .c {
width: 300px;
height: 200px;
background-color: blue;
}
</style>
浮動和絕對定位的特征：
<style>
/*span {*/
/*background-color: red;*/
/*!*float: left;*!*/
/*position: absolute;*/
/*width: 200px;*/
/*height: 60px;*/
/*}*/
.container{
width: 1226px;
height: 100px;
margin: 0 auto;
background-color: #000;
}
.logo{
width: 55px;
height: 55px;
background-color: #ff6700;
float: left;
margin-top: 20px;
}
</style>
</head>
<body>
<span>
mjj
</span>
<div class="container">
<div class="logo"></div>
</div>
</body>
1.4 固定定位 fixed
它跟絕對定位基本相似，只有一個主要區別：絕對定位固定元素是相對於html根元素或其最近的定位祖先元素，而固定定位固定元素則是相對於瀏覽器視口本身。這意味着你可以創建固定的有用的網頁效果，比如固定導航欄、回到頂部按鈕，小廣告等。
1.特征：
- 1.脫標
- 2.固定不變
- 3.提高層級
2.參考點：
以瀏覽器的左上角為參考點
<style>
body{
padding-top: 100px;
}
.active{
position: relative;
background-color: yellowgreen;
}
.fix{
width: 100%;
height: 100px;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<p>MJJwusir</p>
<p>wusir</p>
<p class="active">YAOwusir</p>
<div class="fix">固定不變</div>
<p>wusir</p>
<p>wusir</p>
</body>
1.5 z-index
1.z-index只應用在定位的元素，默認z-index:auto;(auto相當於0)
2.z-index取值為整數，數值越大，它的層級越高
3.如果元素設置了定位，沒有設置z-index，那么誰寫在最后面的，表示誰的層級越高。(與標簽的結構有關系)
4.從父現象。通常布局方案我們采用子絕父相，比較的是父元素的z-index值，哪個父元素的z-index值越大，表示子元素的層級越高。
/*從父現象*/
<style>
.box1 {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 60px;
border: 2px solid blue;
background-color: #000;
z-index: 10;
}
.box2 {
position: absolute;
top: 20px;
left: 0;
width: 200px;
height: 60px;
border: 2px solid red;
background-color: greenyellow;
z-index: 6;
}
</style>
<body>
<div class="father1" style="position: relative;z-index: 2;">
<span class="box1"></span>
</div>
<div class="father2" style="position: relative;z-index: 3;">
<div class="box2"> </div>
</div>
</body>
2. 背景圖
1.背景圖屬性
- 1.background-image:url("圖片地址"); 給一個元素設置一個或多個背景圖像
- 2.background-repeat:
- 定義背景圖像的重復方式。 背景圖像可以沿着水平軸，垂直軸，兩個軸重復，或者根本不重復。
- 屬性值：
- repeat 默認值。表示背景圖水平和垂直方向都平鋪
- no-repeat 表示背景圖水平和處置方向都不平鋪
- repeat-x 表示背景圖只有水平方向上平鋪
- repeat-y 表示背景圖只有垂直方向上平鋪
- 3.background-position
- 表示背景圖定位初始位置。
background-position是background-position-x和background-position-y的綜合屬性。如果想使用background-position屬性，那么必須先指定background-image屬性。 - 語法：
- 1.background-position:值1 值2;
- 2.background-position:position position;
- 表示背景圖定位初始位置。
<style>
.bg{
width: 1200px;
height:1200px;
border: 1px solid #000;
/*設置背景圖*/
background-image: url("xiaohua.jpg");
background-repeat: no-repeat;
/*調整背景圖的位置*/
/*background-position: -164px -106px;*/
background-position: center center;
color: green;
font-weight: 700;
font-size: 30px;
}
</style>
2.CSS Sprite 雪碧圖
CSS雪碧圖技術：即CSS Sprite,也有人叫它CSS精靈圖，是一種圖像拼合技術。該方法是將多個小圖標和背景圖像合並到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。
使用雪碧圖的使用場景:
-
靜態圖片，不隨用戶信息的變化而變化
-
小圖片，圖片容量比較小(2~3k)
-
加載量比較大
一些大圖不建議制作雪碧圖
優點:
- 有效的減少HTTP請求數量
- 加速內容顯示
雪碧圖的實現原理:
- 它通過css的背景屬性的backrground-position的來控制雪碧圖的顯示。
- 控制一個層，可顯示的區域范圍大消息，通過一個窗口，進行背景圖的移動。
<style>
.swiper {
width: 100%;
height: 460px;
}
.container {
width: 1226px;
position: relative;
margin: 0 auto;
}
.swiper span {
display: inline-block;
width: 41px;
height: 69px;
background: url("icon-slides.png") no-repeat 0 0;
position: absolute;
margin-top: -34px;
top: 50%;
cursor: pointer;
}
.swiper span.prev {
background-position: -83px 0;
left: 234px;
}
.swiper span.next {
background-position: -124px 0;
right: 0;
}
.swiper span.prev:hover{
background-position: 0 0;
}
.swiper span.next:hover{
background-position: -42px 0;
}
</style>
<div class="swiper">
<div class="container">
<span class="prev"></span>
<span class="next"></span>
</div>
</div>
3. 水平垂直居中
3.1 行內元素水平居中顯示
1.第一種方式：line-height+text-align
p {
width: 200px;
height: 200px;
background: #666;
color: #fff;
line-height: 200px;
text-align: center;
}
2.第二種方式：給父元素設置display:table-cell;,並且設置vertical-align:middle
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
3.2 塊級元素水平垂直居中
1.方法一：position+margin
<style>
.father{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.child{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<div class="father">
<div class="child">我是個居中的盒子</div>
</div>
2.方法二：display:table-cell
<style type="text/css">
.father{
width: 200px;
height: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
vertical-align: middle;
}
</style>
<div class="father">
<div class="child">我是個居中的盒子</div>
</div>
3.第三種：純position
<style>
.father{
width: 500px;
height: 300px;
background-color: red;
position: relative;
}
.child{
/*如何讓一個絕對定位的垂直居中： top設置50%，margin-top設置當前盒子的一半，並且是負*/
position: absolute;
width: 100px;
height: 140px;
background-color: green;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -70px;
}
</style>
<div class="father">
<div class="child">我是個居中的盒子</div>
</div>