整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS盒模型本質上是一個盒子，每一個元素都被抽象成一個盒子，每一個盒子又包括四部分
內容(content)，內填充(padding)，邊框(border)，外邊距(margin)
盒子模型簡圖
width = content-width + padding-width + border-widthheight = content-height + padding-height + border-height
width = content-widthheight = content-height
一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染的一部分。它是塊盒子的布局發生，浮動互相交互的區域。
- 根元素，即HTML元素 - float的值不為none - overflow的值不為visible - display的值為inline-block、table-cell、table-caption - position的值為absolute或fixed
- 自適應兩欄布局 - 可以阻止元素被浮動元素覆蓋 - 可以包含浮動元素——清除內部浮動 - 分屬于不同的BFC時可以阻止margin重疊
在 CSS 中，可替換元素（replaced element）的展現效果不是由 CSS 來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立于 CSS 的簡單來說就是通過修改某個屬性就使得顯示變換的元素
img/object/video/iframe/textarea/input
- 內容和外觀不受頁面上CSS的影響 - 有默認的尺寸，并且在很多CSS上有自己的表達樣式
在元素內容之前插入額外生成的內容
在元素內容之后插入額外生成的內容
選取元素的首個字符
選取元素的第一行
對用鼠標鍵盤等已選取的文字部分應用樣式
表示瀏覽器標記為不正確拼寫的文本段 只有一小部分CSS屬性可用于 ::spelling-error 偽元素選擇器： color/background-color/cursor/caret-color/outline text-decoration/text-emphasis-color/text-shadow
偽元素應用于瀏覽器標識為語法錯誤的文本段 只有一小部分的css能夠應用在::grammar-error的選擇器中 color/background-color/cursor/text-emphasis-color/text-shadow/outline/text-decoration
當元素本身或其后代獲得焦點時，:focus-within偽類的元素就會有效
focus-within兼容情況
SS3中包含幾個新的文本特征。
在我這里您將了解以下文本屬性：
text-shadow
box-shadow
text-overflow
word-wrap
word-break
瀏覽器支持
| 屬性 | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.04.0 -webkit- | 9.0 | 4.03.5 -moz- | 5.13.1 -webkit- | 10.5 |
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.09.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 的文本陰影
CSS3 中，text-shadow屬性適用于文本陰影。
您指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：
實例
給標題添加陰影:
h1{text-shadow:5px5px5px#FF0000;}
CSS3 box-shadow屬性
CSS3 中 CSS3 box-shadow 屬性適用于盒子陰影
實例
div{box-shadow:10px10px;}
接下來給陰影添加顏色
實例
div{box-shadow:10px10pxgrey;}
接下來給陰影添加一個模糊效果
實例
div{box-shadow:10px10px5pxgrey;}
嘗試一下 ?
你也可以在 ::before 和 ::after 兩個偽元素中添加陰影效果
實例
#boxshadow{position:relative; box-shadow:1px2px4pxrgba(0, 0, 0, .5); padding:10px; background:white;}#boxshadowimg{width:100%; border:1pxsolid#8a4419; border-style:inset;}#boxshadow::after{content: ''; position:absolute; z-index: -1; /* hide shadow behind image */box-shadow:015px20pxrgba(0, 0, 0, 0.3); width:70%; left:15%; /* one half of the remaining 30% */height:100px; bottom:0;}
陰影的一個使用特例是卡片效果
實例
div.card{width:250px; box-shadow:04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19); text-align:center;}
文字卡片 ? 圖片卡片 ?
CSS3 Text Overflow屬性
CSS3文本溢出屬性指定應向用戶如何顯示溢出內容
實例
p.test1{white-space:nowrap; width:200px; border:1pxsolid#000000; overflow:hidden; text-overflow:clip; }p.test2{white-space:nowrap; width:200px; border:1pxsolid#000000; overflow:hidden; text-overflow:ellipsis; }
嘗試一下 ?
CSS3的換行
如果某個單詞太長，不適合在一個區域內，它擴展到外面：
CSS3中，自動換行屬性允許您強制文本換行 - 即使這意味著分裂它中間的一個字：
CSS代碼如下：
實例
允許長文本換行:
p{word-wrap:break-word;}
嘗試一下 ?
CSS3 單詞拆分換行
CSS3 單詞拆分換行屬性指定換行規則：
CSS代碼如下：
實例
p.test1{word-break:keep-all;}p.test2{word-break:break-all;}
嘗試一下 ?
新文本屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| hanging-punctuation | 規定標點字符是否位于線框之外。 | 3 |
| punctuation-trim | 規定是否對標點字符進行修剪。 | 3 |
| text-align-last | 設置如何對齊最后一行或緊挨著強制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應用重點標記以及重點標記的前景色。 | 3 |
| text-justify | 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 | 3 |
| text-outline | 規定文本的輪廓。 | 3 |
| text-overflow | 規定當文本溢出包含元素時發生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規定文本的換行規則。 | 3 |
| word-break | 規定非中日韓文本的換行規則。 | 3 |
| word-wrap | 允許對長的不可分割的單詞進行分割并換行到下一行。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負責控制DOM元素的頁面布局和顏色、大小的屬性。
在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現大大代替了傳統的table表格嵌套。
雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內容之間的聯系個區別。
所有頁面的元素都可以看做一個盒子，占據著一定的頁面空間。一般來說這些被占據的空間往往會比單純的內容要大。因此，可以通過盒子的邊框和距離等參數來控制內容的位置。
Div+CSS 盒子模型
說明：
1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區域，外邊距是透明的。
2、Border：中文叫邊框，是圍繞在內邊距（Padding）和內容外的邊框。注意，它不是透明的。
3、Padding：中文叫內邊距，控制內容周圍的區域，內邊距是透明的。
4、Content：內容，盒子的內容，顯示文本和圖像。
5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。
6、盒子實際尺寸有可能大于內容尺寸：
盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;
盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區別。
頁面如圖所示：
原始樣式
代碼：
HTML:
<body>
<div class="TsetUpper"></div>
<div class="TsetMiddle"></div>
<div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}
.TsetMiddle{
width: 600px;
height: 200px;
background-color: red;
position: relative;
margin: auto;
}
.TsetDown{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}元素邊框：我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。
按如下代碼設置Div(TsetMiddle)的Border（邊框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30+30了，而且可以設置其底色和線條樣式。
Border
margin 控制周圍的元素區域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
margin: 30px auto;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
padding: 30px;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各屬性的值可以用px為單位，也可以用em，百分比等。
2、可以利用盒子的各種屬性，調整其內容在父容器中的位置。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
