前端-CSS-6-盒子模型
阿新 • • 發佈：2018-11-07
上面的佈局寬度
div{
width: 200px;
height: 200px;
border: 10px solid red;
padding: 20px;
}
------------------------------------
<!-- padding: 就是內邊距。 padding的區域是有背景顏色。並且背景顏色和內容區域顏色一樣
也就是說background-color這個屬性將填充所有的border以內的區域 就是邊框到內容之間的距離 padding有四個方向。所以說我們能分別描述4個方向的padding 方法有兩種：1.寫小屬性 2.寫綜合屬性 用空格隔開 --------------------------------------------------------------------------------
.box{
width: 300px;
height: 300px;
/*padding: 30px;*/
background-color: red;
/*border: 5px solid yellow;*/
/*小屬性設定*/
/*padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;*/
/*綜合屬性設定，用空格隔開*/
/*上 右 下 左*/
/*padding: 20px 30px 40px 50px ;*/
/* 三個值表示的時候 上20px 左右30px 下40px*/
padding: 20px 30px 40px;
/*兩個值表示的時候：上下為20px 左右為30px*/
/*padding: 20px 30px;*/
/*一個值表示的時候 上下左右都是 20px*/
/*padding: 20px;*/
------------------------------------------------------------------
一些標籤預設有padding
那麼我們一般在做站的時候，是要清除頁面標籤中預設的padding和margin。以便於我們更好的去調整元素的位置。 我們現在初學可以使用萬用字元選擇器*{ padding:0; margin:0; } But，這種方法效率不高。 所以我們要使用並集選擇器來選中頁面中應有的標籤（不用背，因為有人已經給咱們寫好了這些清除預設的樣式表，reset.css） https://meyerweb.com/eric/tools/css/reset/
----------------------------------------------------------------------------
盒模型的屬性
盒模型的屬性 width：內容的寬度 height: 內容的高度 padding：內邊距，邊框到內容的距離 border: 邊框，就是指的盒子的寬度 margin：外邊距，盒子邊框到附近最近盒子的距離 如果讓你做一個寬高402*402的盒子，您如何來設計呢？ 答案有上萬種，甚至上一種。
-------------------------------------------------------
border: 邊框，就是指的盒子的寬度
border: 5px solid red;
border: 5px solid red;
border:邊框的意思，描述盒子的邊框
border:5px(粗細) solid(線性樣式) red(顏色)
邊框有三個要素： 粗細 線性樣式 顏色 border: solid 如果顏色不寫，預設是黑色。如果粗細不寫，不顯示邊框。如果只寫線性樣式，預設的有上下左右 3px的寬度,實體樣式，並且黑色的邊框。 按照3要素來寫border border-width: 3px; border-style: solid; border-color: red; /* 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-width: 10px; border-right-color: red; border-right-style: solid; border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; border-left-width: 10px; border-left-color: red; border-left-style:solid; 上面12條語句，相當於 bordr: 10px solid red; 另外還可以這樣： border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10px solid red; 清除邊框的預設樣式，比如input輸入框 border:none; border:0; 使用border來製作小三角 /*小三角 箭頭指向下方*/ div{ width: 0; height: 0;
border-top: 10px solid red; top 上 border-bottom: 20px solid red; bottom 下 border-left: 20px solid transparent; left 左 透明色 border-right: 20px solid transparent; right 右 }
<body>
<div></div>
</body>
-------------------------------------------------
margin
margin：外邊距的意思。表示邊框到最近盒子的距離。(兄弟之間) /*表示四個方向的外邊距離為20px*/ margin: 20px; /*表示盒子向下移動了30px*/ margin-top: 30px; /*表示盒子向右移動了50px*/ margin-left: 50px; margin-bottom: 100px;