前端学习 -- Css -- 内联元素的盒模型
生活随笔
收集整理的這篇文章主要介紹了
前端学习 -- Css -- 内联元素的盒模型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
示例：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">span {background-color: #FFA500;}/*** 寬120 高120 顏色為#0000FF的div*/.box1 {width: 120px;height: 120px;background-color: #0000FF;}.s1 {/*內容區、內邊距 、邊框 、外邊距* *//** 內聯元素不能設置width和height,設置了也沒有效果*/width: 200px;height: 200px;/** 水平方向上內邊距左為100px,右為100px*/padding-left: 100px;padding-right: 100px;/** 垂直方向內邊距，內聯元素可以設置垂直方向內邊距，但是不會影響頁面的布局*/padding-top: 50px;padding-bottom: 50px;/** 為元素設置邊框,* 內聯元素可以設置邊框，但是垂直的邊框不會影響到頁面的布局*/border: 2px yellow solid;/** 水平外邊距100px*/margin-left: 100px;margin-right: 100px;/** 內聯元素不支持垂直外邊距,因此設置如下完全沒有效果*/margin-top: 200px;margin-bottom: 200px;}.s2 {/** 為右邊的元素設置一個左外邊距* 水平方向的相鄰外邊距不會重疊，而是求和*/margin-left: 100px;}</style></head><body><span class="s1">章臺路</span><span class="s2">還見褪粉梅梢</span><span>試花桃樹</span><span>愔愔坊陌人家</span><div class="box1"></div></body></html>效果：
代碼放到github上面了：
https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson16.html
自己可以運行下看看效果
總結
以上是生活随笔為你收集整理的前端学习 -- Css -- 内联元素的盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《Java核心技术 卷12》读书笔记
- 下一篇： 2017年html5行业报告,云适配发布