1.項目實戰(zhàn)筆記
- 標簽內(nèi)如果文字不垂直居中，與行高有關(guān)系，行高與高度值相等的話，會使內(nèi)容垂直居中； 如果一個標簽整體不垂直居中，則通過上下margin值來調(diào)節(jié)；
- 通過行高與高度的變化，調(diào)節(jié)內(nèi)容在垂直方向的位置，兩者相等，則垂直居中，不等，則上下移動；
- a標簽必須重新設(shè)置顏色；
- 父容器的高度是不會繼承給后代，而行高會繼承，所以在父容器中若高度與行高不相同，那只有行高會繼承給子元素，這樣子元素就默認高度與行高值相同，不會繼承父元素的高度；所以必須重新設(shè)置高度；
- 在頁面開發(fā)中l(wèi)ogo一般放在h1標簽中，用a鏈接添加圖片，即達到logo可點擊效果；
<div class="logo">
<h1><a href="#" target="_blank"><img src="images/logo01.png" alt="logo圖標"/></a></h1>
</div>
- 頁面開發(fā)時，當前選中狀態(tài)用類選擇器選中，用交集選擇器設(shè)置；
- 圖片添加用img添加，則圖片不會居中顯示，會按原尺寸大小填充；用background填充背景圖片；
- 透明度
- rgba（255,255,255,0.4）；
- opacity處理，但是兼容性問題；
- opacity: 0.4;
- filter:alpha(opacity=40);//兼容IE6,7瀏覽器；
- 居中方法
- 設(shè)置寬度，然后margin:0 auto;
- 設(shè)置絕對定位和寬度，然后left：50%，margin-left:-寬度/2
- line-height會實現(xiàn)繼承
- 編寫頁面時，遵循由外向內(nèi)，先寫外部，再逐步向內(nèi)部寫；
- 容器內(nèi)部設(shè)置padding時，寬度與高度都應(yīng)該減去相應(yīng)的數(shù)值；
- 項目開發(fā)中除了用無序列表（ul-li）,也可用有序列表（ol-li）；
- background-color在沒有高度的時候，不能設(shè)置；
- 當設(shè)置行高為0時，內(nèi)容文字會在整個區(qū)域的頂部，通過調(diào)節(jié)行高值來使內(nèi)容文字在區(qū)域的右上角顯示（也可以用sup標簽）；
2.重置樣式代碼
/*重置樣式start*/
/*去除所有元素的margin及padding*/
*{
margin: 0;
padding: 0;
}
/*去除a標簽中的默認下劃線及默認顏色*/
a{
text-decoration: none;
color: #444866;
}
/*去除li元素前的小圓點及數(shù)字序號*/
li{
list-style: none;
}
/*去除圖片的默認邊框*/
img{
border: 0;
}
/*去除文本框的聚焦邊影*/
input{
outline: none;
}
/*重置樣式end*/
3.清除浮動的偽類設(shè)置
/*設(shè)置清除浮動的clear偽類元素*/
.clearfix::after{
display: block;
height: 0;
content:"";
clear: both;
}
4.遮罩層的設(shè)置
<style>
body,html{
width: 100%;
height: 100%;
}
.shadow{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
position: absolute;
left: 0;
top: 0;
}
.login{
position: absolute;
width: 200px;
height: 100px;
background-color: #fff;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -50px;
}
</style>
<body>
<div class="shadow">
<div class="login">
這是一個遮罩層
</div>
</div>
</body>
- 第二種方法：固定定位+display:flex+margin:auto(display:flex必須配合margin:auto;才能實現(xiàn)上下左右同時居中)
<style>
.shadow{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #333333;
display: flex;
}
.login{
width: 200px;
height: 100px;
background-color: #fff;
margin: auto;
}
</style>
<body>
<div class="shadow">
<div class="login">
這是一個用固定定位實現(xiàn)的水平垂直居中
</div>
</div>
</body>
- 創(chuàng)建一個html模板
- file-setting-Editor-Code style-live templates-點擊"+"-選擇live templates-填寫內(nèi)容及簡寫碼-點擊define-選擇該模板的應(yīng)用場景：比如html-點擊apply-點擊OK;
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
