text-align: center;——子item居中對齊

display: flex;——子item橫向布局

-webkit-justify-content: center;——子item居中

margin: auto;——子item居中

?

background: #f4f4f4;——背景色（background-color: yellowgreen;）

opacity: 0.5;——透明度

?border-top: 0.13333rem solid #a1c9f8;——邊界寬度及顏色（上邊框）

?border: 1px solid #fff;——全邊框
?border-color: #0CD5E5 #0CD5E5 #0CD5E5 #0CD5E5;——四色邊框（漸變色）

?border-radius: 16px;——圓角邊框

?

style="background-image:url(images/mybg.png) ;height: 250px——背景圖片

<img src="image/01.jpg" height="270" width="479" >——加載圖片

letter-spacing:5px;——文本間距

?

（1）重疊布局

div實例

<div class="bigDiv"><div class="smallDiv1"></div><div class="smallDiv2"></div> </div>

css實現重疊布局

.bigDiv{
? ? position: relative;
}
.smallDiv1{
? ? position: absolute;
? ? z-index: 2;
}
.smallDiv2{
? ? position: absolute;
? ? z-index: 1;
}

附：

1、子絕父相：兒子絕對定位，父親相對定位
2、z-index：層次；值越大放置越靠上

?

（2）div固定在底部css

.footer{
height: 20px;
width: 100%;
? display: flex;
position: fixed;
bottom: 0;
text-align: center;
}

（3）input的無邊框顯示下劃線

.inputclass{
? ? border: none;
? ? font-size: 15px;
? ? height: 20px;
? ? width: 100%;
? ? margin-top: 3px;
? ? letter-spacing:5px;
? ? margin-left:12px;
? ? margin-right: 40px;
? ? padding-bottom: 5px;
? ? border-bottom: 1.5px solid #DBDBDB;
}

（4）相對定位與絕對定位布局

母層使用相對布局：

?? ?position: relative;

子層使用絕對布局，位居底部

?? ?.box .bg{
?? ??? ?background-color: #000;
?? ??? ?opacity: 0.5;
?? ??? ?width: 100%;
?? ??? ?height: 40px;
?? ??? ?/* 絕對定位 */
?? ??? ?position: absolute;
?? ??? ?bottom:0px;
?? ??? ?
?? ??? ?/* 層級： */
?? ??? ?z-index:100; ?/* ?-999-0+999 */
?? ??? ?}

?

?

?

?

?

?

微信小程序——wxss:

flex-direction: row;——橫向布局

flex-direction: column;——縱向布局+display: flex;

flex: 1;——————————單行

justify-content: space-between;——item平分母尺寸居中顯示

border-bottom: 1px solid rgb(197, 199, 199);——item底部分割線

?

總結

以上是生活随笔為你收集整理的css属性基础以及wxss——居中，渐变色边框，圆角边框，横向布局，重叠div，div固定在底部，input的无边框显示下划线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。