css设置 ul的内外边距,9月3日学习CSS选择器，背景设置，及内外边距知识总结
實例
html>
選擇器p:nth-of-type(2)?{
background-color:?crimson;
}
豬哥
朱老師西門大官人
歐陽克
潘金蓮運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
演示:padding 對盒子大小的影響與解決方案！
在下面html文檔中，div包含了一張像素為200px的圖片，如果設置圖片的內邊距各50像素，那么div盒子的右邊距及下邊距被撐開了多50px.
實例
html>
內邊距.box1?{
width:?300px;
height:?300px;
border:?1px?solid?black;
background-color:?lightgreen;
}
.box1?{
padding:?50px;
}
????????
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
下面兩個方法可以解決這個內邊距撐開的問題！
下列html文檔中，兩個div標簽中各包含了一張圖素，屬性像素為200px的元素.
第一個div
class="wrap"，和包含了div class=“box“d的圖片我們可以用寬度分離法，把圖片元素居中在第一個設置了寬高的div標簽容器中；如下代碼：
實例
html>
內邊距.wrap?{
width:?300px;
;
}
.box2?{
padding:?50px;
background-color:?lightblue;
border:?1px?solid?black;
}
????????????
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
第二種方法可以使用調整 box-sizing，把圖片的像素設置好后，設置box-sizing定位絕對值像素，這個像素是能讓圖片可以上下左右居中的數字，即可！如下代碼
實例
html>
內邊距.box3?{
width:?300px;
box-sizing:?border-box;
padding:?50px;
background-color:?brown;
border:?1px?solid?black;
????????
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
三.margin中的同級塌陷, 嵌套傳遞與自動擠壓, 并提出解決方案或應用場景html文檔中會出現margi同級塌陷的情況如下代碼所示
實例
html>
外邊距.box1?{
width:?100px;
height:?100px;
background-color:?lightblue;
margin-bottom:?30px;
}
.box2?{
width:?100px;
height:?100px;
background-color:?lightcoral;
margin-top:?100px;
}
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
當兩個盒子同級時；垂直方向，誰大按誰的像素顯示！所以在設置排版要注意
html文檔中會出現margi嵌套傳遞情況，如下代碼！
實例
html>
外邊距.box3?{
width:?200px;
height:?200px;
background-color:?lightblue;
}
.box4?{
width:?100px;
height:?100px;
background-color:?lightcoral;
margin-top:?100px;
}
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
這種方法可以解決，看如下代碼和圖片
實例
html>
外邊距.box3?{
width:?200px;
height:?200px;
background-color:?lightblue;
}
.box4?{
width:?100px;
height:?100px;
background-color:?lightcoral;
}
.box4?{
/*?margin-top:?50px;?*/
}
.box3?{
padding-top:?50px;
height:?150px;
}
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
html文檔margin自動擠壓情況，如下代碼，
實例
html>
外邊距.box5?{
width:?150px;
height:?150px;
background-color:?lightblue;
}
.box5?{
margin-left:?auto;
}
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
總結
以上是生活随笔為你收集整理的css设置 ul的内外边距,9月3日学习CSS选择器，背景设置，及内外边距知识总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网络设置中如何删除家庭组,【求助】
- 下一篇： css文本行高是哪个属性_CSS中的li