前端——css盒模型
生活随笔
收集整理的這篇文章主要介紹了
前端——css盒模型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 盒模型的屬性
- 如圖：
- padding
- 清除默認邊距
- border
- 看下border四邊分別是什么形狀？
- maigin
- 嵌套如果內層超過外層會顯示？
盒模型的屬性
width：內容的寬度
height: 內容的高度
padding：內邊距，邊框到內容的距離
border: 邊框，就是指的盒子的寬度
margin：外邊距，盒子邊框到附近最近盒子的距離
如圖：
padding
設置方法：
<style type="text/css">.box{width: 300px;height: 300px;/*background-color這個屬性將填充padding以及所有的border以內的區域*/background-color: red; 方法一：padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;方法二：/*上 右 下 左*/padding: 20px 30px 40px 50px ;/*上 左右 下*/padding: 20px 30px 40px;/* 上下 左右*/padding: 20px 30px;/*上下左右*/padding: 30px}</style>清除默認邊距
一些標簽顯示時有默認的邊距，影響使用
<style type="text/css">/*清除默認的邊距，效率不高*/*{padding: 0;margin: 0;}</style>用并集選擇器清除
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0;padding: 0;}border
邊框有三個要素： 粗細 線性 顏色
1、如果顏色不寫，默認是黑色的
2、如果 線性樣式 solid 不寫 不顯示。
3、只寫 線性樣式solid，默認的有上下左右 3px的寬度 顏色為黑（谷歌瀏覽器），樣式有多種：solid dotted double dashed等。
border屬性兩種設置方式：
<style type="text/css">.box{width: 200px;height: 200px;border: 5px solid red;方法一：按照3要素border-width: 5px;border-style: solid;border-color: red;對應位置與padding一致border-width: 5px 10px;border-style: solid dotted double dashed;border-color: red green yellow;方法二：按照方向分border-top-width: 10px;border-top-color: red;border-top-style: solid;border-right-color: blue;border-right-width: 5px;border-right-style: dashed;border-bottom-width: 10px;border-bottom-color: red;border-bottom-style: solid;border-left-width: 10px;border-left-color: red;border-left-style:solid;所有沒有樣式border: none;設置border沒有樣式border-left: none;}</style> </head> <body><div class="box"></div></body>看下border四邊分別是什么形狀？
分別把兩邊設置成透明（transparent）
.box{width: 100px;height: 100px;border-top:20px solid transparent;border-left: 20px solid red;border-right: 20px solid red;border-bottom: 20px solid transparent; width: 100px;height: 100px;border-top:20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red; width: 0px;height: 0px;border-top:20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red;maigin
外邊距 指的是距離
與padding類似，設置方式為：
嵌套如果內層超過外層會顯示？
*{margin: 0;padding: 0;}div{width: 300px;height: 300px;border: 20px solid red;background-color: green;margin: 100px;}/*maigin外邊距指的是距離*/p{width: 300px;height: 300px;padding: 10px;border: 10px solid ;background-color: red;margin: 50px;}<div class="box"><p>盒子里嵌套盒子</p></div>總結
以上是生活随笔為你收集整理的前端——css盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用户体验要素：以用户为中心的产品设计
- 下一篇： HTML——盒模型