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小時內與您取得聯系。