CSS學習（二）

Near_Li 發布于2019-08-29 15:29 / 1199人閱讀

摘要：學習二一三大模型之盒子模型盒子模型每個矩形元素都由元素的內容，內邊距，邊框，和外邊距邊框盒子的厚度，如手機包裝盒的厚度內邊距內容與邊框之間的距離，如填充泡沫的厚度外邊距與其他盒子的距離邊框樣式格式單實線用的最多虛線點線雙實線邊框綜合寫法寫

CSS學習（二）

一、CSS三大模型之盒子模型

1.盒子模型

每個矩形元素都由元素的內容，內邊距，邊框，和外邊距
邊框：盒子的厚度Border，如手機包裝盒的厚度
內邊距：內容與邊框之間的距離，如填充泡沫的厚度Padding
外邊距：與其他盒子的距離Margin

2.邊框樣式格式：border-style: solid;

solid 單實線用的最多
dashed  虛線
dotted 點線
double 雙實線

3.邊框綜合寫法

寫法一：
 border-width: 1px;
 border-color: pink;
 border-style: solid;
寫法二推薦使用：
 border:1px solid blue;綜合性寫法 寬度 樣式 顏色
 border-top: 1px solid blue;改上邊框的屬性

4.表格細線邊框

border-collapse: collapse;合并相鄰的邊框，相鄰表格邊框會出現疊加的形式，如1px+1px=2px，使用該方法可以
合并，使邊框粗細一致，都為1px
復習：cellspacing="0"  表格中去除表格之間的內邊距  ，cellpadding="0"

5.圓角邊框

 border-radius：apx bpx cpx dpx;
 1個值表示4個角都是相同的10px的弧度*
 2個值左上角和右下角10px 右上角 左下角 40px對角線
 3個值左上角一個值,右上角，左下角一個值 右下角 一個值
 4個值表示 左上，右上， 右下，左下




        
        Document
        


        20px
        50%或者100px
        10px 40px
        20px 40px 80px
        10px 20px 40px 80px
        123
        檸檬

6.內邊距(padding)

內邊距就是內容距離邊框的距離 ,值也為順時針傳遞
4個值 順時針 上 右 下 左
padding  寫兩個個值 上下10px 左右30px
3個值 10 px 30 px 50px  上10 左右30 下50
1個值 上下左右都是一樣



        
        Document
        


        內邊距就是內容距離邊框的距離

7.外邊距 margin

margin-top  盒子距離上的邊距
margin-left  盒子距離左的邊距
margin:30px auto 左右自動 這樣可以塊級帶有寬度的盒子水平居中對齊,只有塊級元素有效，其余元素無效
文字水平居中與盒子水平居中：
文字水平居中：text-align: center;
盒子水平居中：margin: 10px auto;
文字垂直居中:
行高等于盒子高度
height: 42px;盒子高
line-height: 42px;行高
插入圖片更改大小 用width和height，同時插入圖片也是一個盒子，可以通過margin與padding 盒模型更改位置
背景圖片background: #fff url(圖片/劉德華3.jpg) 30px  50px 
背景圖片的大小只能用 backgroud-size
背景圖片的位置更改用background-position

8.內外邊距清潔

margin: 0;清除外邊距
padding:0;清除內邊距

9.行內元素，只有左右外邊距，沒有上下外邊距，內邊距。

10.外邊距合并

垂直方向：如果上面的盒子下外邊距給20px（margin-bottom:20px;），下面的盒子上外邊距給10px(margin-top:
10px;),最終會以大的邊距為準,不會出現上下30px;
內嵌式合并：父親盒子中，鑲嵌了一個孩子盒子，如果要使孩子盒子相對與父親盒子下移動，使用margin-top 20px;
會使兩個盒子都同時下移，不能達到我們想要的效果

解決方法：
1.可以為父元素定義1像素的上邊框(border: 1px solid red)或上內邊距(padding: 1px;)
2.可以為父元素添加
overflow: hidden;溢出隱藏




        
        Document

11.盒子尺寸計算

外盒尺寸空間尺寸：width+border+padding+margin 
內盒尺寸：width+border+padding  130 可以看見的
如果要使盒子內的內容往右移動，用padding-left,最終的盒子大小通過修改外盒子寬度就行



        
        Document
        
        


        
                新聞

**如果沒有寬度屬性，使用padding則不會影響
**如果父親沒有指定寬度則盒子會默認和父親一樣寬塊級元素則會默認和父親一樣寬
復習列表：list-style:none;去除列表默認中的小黑點
12.寬度剩余法

 width 經常使用寬度剩余法或者高度剩余法
 padding 會影響盒子大小，需要進行加減計算
 margin 會有外邊距合并 還有ie6下面的margin加倍BUG最后使用

13.盒模型
CSSS3新屬性box-sizing: border-box;

padding  border 不撐開盒子
盒子大小為width 就是說 padding 和border包含到width里面的
border: 15px solid red;

14.陰影
文字陰影

text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
text-shadow: 水平距離 垂直距離 模糊 陰影顏色

盒子陰影

box-shadow:5px 5px 3px 4px rgba(0,0,0,4);
水平 垂直 模糊距離 陰影尺寸 陰影顏色 內/外陰影；
前兩個屬性必須寫  內陰影inset ,外陰影不用寫 默認






        
        Document
 
 
 
        


        水晶圖片

云服務器 GPU云服務器深度學習二學習css css學習學習css布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113357.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
CSS學習（二）：背景圖片如何定位？

摘要：我們都知道屬性用來指定背景圖片應該出現的位置，可以使用關鍵字絕對值和相對值進行指定。使用相對值時，定位方式直觀上不好理解。但應清楚，最基本的方法是根據絕對值定位。上圖經過計算，背景圖片左上角被定位在處，故背景圖片被切除一半。我們都知道background-position屬性用來指定背景圖片應該出現的位置，可以使用關鍵字、絕對值和相對值進行指定。在CSS Sprites中，這個屬性使...

winterdawn 2019-08-30 15:54 評論0 收藏0
我的webpack學習筆記（二）

前言上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。多頁面css單獨打包首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

mcterry 2019-08-20 18:05 評論0 收藏0
我的webpack學習筆記（二）

前言上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。多頁面css單獨打包首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

awokezhou 2019-08-29 12:57 評論0 收藏0
我的webpack學習筆記（二）

前言上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。多頁面css單獨打包首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

hedzr 2019-08-01 17:11 評論0 收藏0