我們html只是對網頁的一種基本結構,而網頁想美化和各種布局還是要依賴css,其中布局是很重要的一塊,盒子模型就看做是乙個矩形,而網頁就是各種矩形組成的,當然矩形裡面還可以放置其他矩形,其中div標籤就是最典型的盒子.
乙個盒子中主要的屬性就5個：width、height、padding、border、margin。如下：
border有三個屬性分別是border-width border-style border-color，對應分別是邊框寬度 邊框樣式 邊框顏色
上面的div 設定了border的三個屬性，其中border-width這個不要講的,border-style是邊框的樣式,比如是實線還是虛線等,有如下一些屬性
上面是四個邊都有框,那麼想其中乙個有邊框,比如右邊框,是有這個屬性的
border-right: 10px;
border-left: 10px;
border-bottom: 10px;
border-top: 10px;
border-bottom-style: solid;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-color: red;
border-right-color: red;
border-top-color: red;
border-left-color: red;
border: 1px solid #333;比如你只要求上邊框
border-top:1px solid #333;比如我們很多文字標題下面有一條線 很多情況下不會是使用hr標籤來做 而是直接使用border-bottom 就可以搞定
去掉所有的邊框
border: 0;border-width: 1px 5px 10px 15px;它的格式是: 上 右 下 左 按順時針來的
注意:邊框設定太大會導致盒子的寬高發現變化,因為盒子的寬度=border+padding+width
padding
padding設定值有如下幾種情況,
padding:10px; 表示上右下左 都是10px
padding:10px 20px 表示上下 10px 左右20px
padding:10px 20px 30px 表示 上10px 左右20px 下30px
padding:10px 20px 30px 40px表示上10px 右20px 下 30px 左30px
但是padding有個問題 就是你設定padding後它父容器寬高都會變化
上邊是正常的 下邊是設定了padding後導致寬度和高度發生了變化.
外邊距是控制盒子與盒子或者盒子與盒子裡面的子標籤之間的距離
你會發現二個盒子重疊的地方會導致邊框增加,上面說了padding值在各個情況下表示什麼意思,那麼marign也是一樣
marign設定值有如下幾種情況,
marign:10px; 如果父盒子的寬和高不是等於子盒子的kuan+20 高+20的情況下,那麼maring:10px就是離上面和左邊10px了
marign:10px 20px 表示上下 10px 左右20px
同理第一種情況
marign:10px 20px 30px 表示 上10px 左右20px 下30px
同理第一種情況
marign:10px 20px 30px 40px表示上10px 右20px 下 30px 左30px
如果想要上面的子盒子在父盒子中居中怎麼顯示呢？
垂直居中：就是左右二邊邊距相等就可以辦到
margin: 10px 50px 30px 50px;margin: 0 auto;margin: auto;如果我想把子盒子在右邊顯示呢？
margin-left: auto;前提是子盒子必須設定了寬和高的值,否則無效.
css樣式學習筆記七
注 其中的內容只是自己學習時的一些筆記，好記性不如爛筆頭，在此記錄方便以後鞏固！一 屬性選擇器 css3.0以後的版本會支援的 1 選擇器 屬性 值 比如 p align right input type button 2 選擇器 屬性 input value 二 邊距 外邊距 1 ie6容易出現雙...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...