成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS學(xué)習(xí)（二）

Near_Li / 1210人閱讀

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

CSS學(xué)習(xí)（二）

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

1.盒子模型

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

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

solid 單實(shí)線用的最多
dashed  虛線
dotted 點(diǎn)線
double 雙實(shí)線

3.邊框綜合寫法

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

4.表格細(xì)線邊框

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

5.圓角邊框

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




        
        Document
        


        
20px

        
50%或者100px

        
10px 40px

        
20px 40px 80px

        
10px 20px 40px 80px

        
123

        
檸檬

6.內(nèi)邊距(padding)

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



        
        Document
        


        
內(nèi)邊距就是內(nèi)容距離邊框的距離

7.外邊距 margin

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

8.內(nèi)外邊距清潔

margin: 0;清除外邊距
padding:0;清除內(nèi)邊距

9.行內(nèi)元素，只有左右外邊距，沒有上下外邊距，內(nèi)邊距。

10.外邊距合并

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

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




        
        Document

11.盒子尺寸計(jì)算

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



        
        Document
        
        


        

                新聞

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

 width 經(jīng)常使用寬度剩余法或者高度剩余法
 padding 會影響盒子大小，需要進(jìn)行加減計(jì)算
 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);
水平 垂直 模糊距離 陰影尺寸 陰影顏色 內(nèi)/外陰影；
前兩個(gè)屬性必須寫  內(nèi)陰影inset ,外陰影不用寫 默認(rèn)






        
        Document
 
 
 
        


        
水晶圖片

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113357.html

相關(guān)文章

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會不定期更...

    princekin 評論0 收藏0

  • CSS學(xué)習(xí)（二）：背景圖片如何定位？

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

    winterdawn 評論0 收藏0

  • 我的webpack學(xué)習(xí)筆記（二）

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

    mcterry 評論0 收藏0

  • 我的webpack學(xué)習(xí)筆記（二）

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

    awokezhou 評論0 收藏0

  • 我的webpack學(xué)習(xí)筆記（二）

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

    hedzr 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<