標籤：間隔 大小 apple auto 方向 最好 替換 上下
一、盒子模型 包括外邊距margin 邊框border 內邊距padding 和元素本體
#id{
marigin:10px; 外邊距上下左右都是10像素； 外邊距可以設定成盒子與盒子之間的距離
padding:20px; 內邊距上下左右都是20px； 內邊距會使元素變大
margin-top:30px; 單獨設定某個邊距為30px；內外邊距皆可。top上 bottom下 left左 right右
padding:1px 2px 3px 4px; 分別設定上右下左的邊框為1，2，3，4.如果寫兩個值，則為上下，左右。如果寫三個值 為上，左右，下
}
#id-1{id元素裡的子項目。
margin:0px auto; 水平置中 auto是自動的意思
z-index:1; 在z軸的上的索引值，用於給元素確定上下順序，按數字大小排可用數字為負無窮到正無窮，在排序使用時最好按照間隔為10的數字排序，方便以後修改。
overflow:hidden; 元素溢出內容屬性 visible不修剪 會呈現在元素框之外 預設 hidden修剪並隱藏溢出內容 scroll加捲軸 auto自動 如果溢出就加捲軸
visibility:hidden; 可視性 hidden隱藏 visible可見 但是依然佔據位置
display:none; 佔據空間 none 不佔位置 block 作為區塊層級元素前後換行 inline 作為內嵌元素 前後不換行
opacity:0.5; 透明度 0-1 0為全透明 1為不透明
border-radius:10px; 元素倒圓角 可以填像素也可以填百分比。四個角都倒
border-bottom-left-radius:20px; 單倒一個角 下右 下左 上右 上左
border-bottom:10px solid red; 單加一個方向的邊框
text-shadow:2px 2px 2px black; 文字陰影 同元素陰影
}
二、列表方塊
.li{ 用於修改ul或ol的屬性
list-style:none； 列表不加序號
margin-left:10px; 用於解決列表序號偏左出了元素邊界的問題
list-style-image:url(引用的圖片.jpg)；用圖片其他清單的序號
}
三、課上練習
<style> * { margin:0px; } #d1 { width:200px; height:200px; background-color:red; color:white; margin:10px 20px 40px 30px; padding:10px; /*margin-bottom:10px;*/ /*overflow:hidden*/ /*visibility:visible; hidden display:block; none*/ } #d2 { width: 200px; height: 200px; background-color: yellow; color:black; margin-left:20px; overflow:hidden; /*scroll*/ opacity:0.9; /*border-radius:50%; 20px*/ /*border-bottom-right-radius:20px;*/ border-bottom:10px solid red; text-shadow:2px 2px 1px red; } #d1-1 { width:50px; height:50px; background-color:green; /*margin:-20px 0px 0px 0px;*/ margin:0px auto; /*z-index:-1;*/ } li { /*list-style:none;*/ list-style-image:url(img/apple.png); } .rongqi { border:2px solid black; } </style>
<body> <div id="d1"> <div id="d1-1">一個</div> </div> <div id="d2"> <p>兩個</p><p>兩個</p><p>兩個</p><p>兩個</p> <p>兩個</p><p>兩個</p><p>兩個</p><p>兩個</p> <p>兩個</p><p>兩個</p><p>兩個</p><p>兩個</p> </div> <div class="rongqi"> <ul> <li>一列</li> <li>二列</li> <li>三列</li> <li>四列</li> <li>五列</li> </ul> </div></body>
四、
HTML CSS 層疊樣式表 三
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
