CSS2：盒模型/背景

時間 2019-11-13

標籤 css2 css 模型背景欄目 CSS 简体版

原文原文鏈接

1. CSS盒模型

a. W3C標準盒模型

width/height:寬度/高度=內容的寬度/高度;
包括：內容，內邊距padding（指內容和邊框的距離），邊框border(solid,dashed(虛線),dotted（點線）)，外邊距margin（指邊框和其餘元素的距離）

b.怪異模型

在IE6下，沒有<!doctype html>會開啓怪異模型；
怪異模型的Height/width=內容+padding+border：應用：父子元素移動子元素的位置，在父元素加padding-top和
box-sizing:border-box；
box-sizing:border-box(將標準盒模型-->怪異盒模型/混雜模式)

2.背景background

background:red url() no-repeat 100px(水平方向改變背景圖片的位置相對於原來的位置) 200px（垂直方向）;
background-color: ;
background-image:url();
Background-repeat：repeat-x;/repeat-y;/no-repeat;
Background-position:left bottom;
Background-attachment:fixed/scroll;//背景圖像不隨頁面滾動

3.PC端/移動端/響應式佈局/固定佈局

PC端：電腦端
移動端：手機，ipai;
固定佈局：當頁面縮小時，頁面不會發生變化；
響應式佈局：當頁面縮小時，頁面的內容會發生位置的變化；

4.僞元素選擇器

：：after{}/：：before{}:必須定義content屬性;插入的元素是行級元素；若是content是空的，寫空字符串；content：‘’； Eg:php

<div>ddd</div> div::before{ Content:」222」; } ### **5.京東的省略號（...）** ###### 1. 單行文字,最後多餘文字隱藏： - White-space:nowrap;(不換行)； - Overflow:hidden - Text-overflow:ellipsis;(.........) 2. 多行文字，最後多餘文字隱藏：（只能用谷歌瀏覽器） Display:-webkit-box;(彈性盒模型) - -webkit-box-orient:vertical;(垂直方向) - -webkit-line-clamp:3;(最多顯示3行) - Overflow:hidden; - Text-overflow:ellipsis; ### **6. Display** - 塊級元素與display:block不是同一個概念; - <li>元素默認display值是list-item; - <table>元素默認display值是table; - 但它們均是「塊級元素，」，由於它們都符合塊級元素的基本特徵，也就是在一個水平流上只能顯示一行，多個塊級元素會換行顯示； - 正是因爲「塊級元素」具備換行的特性，所以能夠配合clear屬性來清除浮動帶來的影響，eg: ```html .clear:after{ Content:’’; Display:table;/block;/list-item; Clear;both; } ``` - 但在實際的開發中，不會使用display:list-item; - 理由：1會出現list-style;IE瀏覽器不支持僞元素設置display:list-item; - display:list-item會出現項目符號，是由於list-item生成了一個附加盒子（「標記盒子」），專門用來存圓點，數字等項目符號，IE瀏覽器下僞元素不支持，就是不能建立這個「標記盒子」)； - display:inline-block;(其實是由外在的「內聯盒子」，和內在的「塊級容器盒子」)；css

7.最大寬度

元素設置white-space:nowrap後的寬度；若是內部元素沒有塊級元素或塊級元素沒有設置寬度值，則「最大寬度」爲最大的連續內聯盒子的寬度；最大寬度的應用：eg:自定義滾動
方法1：藉助原生的scroll left/scroll top值變化，優勢簡單，缺點：效果呆板；
方法2：根據內部元素的尺寸和容器的關係，經過修改內部元素的位置實現滾動效果，優勢，效果能夠很綻開；eg:iScroll,若是咱們但願使用iSroll模擬水平滾動，只能使用最大寬度；
Eg:https://demo.cssworld.cn/3/2-7.php;
Width:默認爲auto;當width設置爲具體的值時，流就消失；

8.CSS流動佈局下的寬度分離原則

CSS中的width屬性不與影響寬度的padding/border(有時候包括margin)屬性共存；寬度分離原則讓頁面更加穩固；不用擔憂尺寸的變化；

.box{
Width:100px;
Border:1px solid;
}

此時整個盒子寬度是102px,若是增長padding設置，此時變爲142px;大了40px,與原來寬度明顯有差別，容易出現佈局問題；爲了避免影響以前的佈局，要減去40px的padding才行，因此width:60px;
若是使用寬度分離：

.father{
width: 102px;
}
.son{
margin: 0 20px;
padding: 20px;
border: 1px solid;
}

此時，父元素定寬，子元素的width默認爲auto,因此會充滿父級，而又設置了padding和margin,因此盒子不會變大；

9.改變width/height做用細節的box-sizing

Box-sizing:改變width的做用細節；
內在盒子：content-box,padding-box,border-box,margin-box;默認狀況下width是做用在content-box上的，box-sizing的做用是把width做用的盒子變成其餘幾個；

{
Box-sizing:content-box;//默認值
Box-sizing:padding-box;//
Box-sizing:border-box;//支持，此時，border和padding的內容平分width
Box-sizing:margin-box;//不支持
}

Eg:html

.box{//寬度100px
Width:100px;
box-sizing:border-box;
Border:1px solid;
}
.box{/寬度100px
Width:100px;
box-sizing:border-box;
Border:1px solid;
padding:20px;
}

box-sizing:border-box的應用:原生普通文本框<input >和文本域<textarea>的100%自適應父容器的寬度；<input >，<textarea>都有border,並且須要padding的大小，不然輸入的光標會頂着邊框。解決：

textarea{
Width:100%;
-ms-box-sizing:border-box;//IE
Box-sizing:border-box;
}

10.Height:auto

CSS的默認流是水平方向的，父元素的高度未設置由子元素撐開；而height：100%是多餘的；由於百分比高度值要起做用，其父級必需要有一個能夠生效的高度！！！
如何讓height：支持100%效果；
（1父級設置顯式的高度值，eg:設置具體的值，或者能夠生效的百分比比值高度,其相對於content box） Eg:

html,body{
Height:100%;
}

(2)子元素使用絕對定位；（其相對於padding box）/父元素相對定位；應用：想要兩個同樣大小的圖片

Http://demo,cssworld.cn/3/2-12.php
Eg: div{
Height:100%；
Position：absolute;
}

若是父元素的height爲auto,,只要子元素在文檔流中，其百分比比值就會徹底被忽略，
若是包含塊的高度沒有顯式指定，其高度由內容決定，而且該元素不是絕對定位，則計算值爲auto.
脫離文檔流的元素，默認是沒有寬高的；
浮動的元素是相對於父級的；若是父級沒有高度，子元素也是沒有高度的；
而絕對定位，若是父級沒有高度，子元素有高度，子元素能夠顯示，但此時父元素的高度也爲0；
若是子元素脫離文檔流，並設置了高度，而父元素沒有高度，則父元素是撐不開子元素的，但若是子元素是絕對定位，則子元素會顯示設置的高度；

11.min-width/max-width/min-height/max-height

min-width/max-width:用於自適應佈局/流體佈局：
Eg網頁寬度自適應：既知足不一樣屏幕大小，又能良好顯示；

.container{
Min-width:1200px;
Max-width:1400px
}

width/height:的默認值爲auto;
Max-height/max-width的默認值爲none;
Min-height/min-width的默認值爲auto;
Max-width的優先級遠遠大於width（不管是否加！important）;
而且min-width優先級>max-width；
任意高度元素的展開和收起的動畫技術（有滑動效果）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。