整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS基礎-盒子模型

          SS盒模型本質上是一個盒子,每一個元素都被抽象成一個盒子,每一個盒子又包括四部分

          內容(content),內填充(padding),邊框(border),外邊距(margin)

          盒子模型簡圖

          標準盒子模型&&IE盒子模型

          • IE盒子模型

          width = content-width + padding-width + border-widthheight = content-height + padding-height + border-height

          • 標準盒子模型

          width = content-widthheight = content-height

          BFC塊級元素

          一個塊格式化上下文(block formatting context) 是Web頁面的可視化CSS渲染的一部分。它是塊盒子的布局發生,浮動互相交互的區域。

          • CSS2.1中規定滿足下列CSS聲明之一的元素便會生成BFC
          - 根元素,即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上有自己的表達樣式
          

          偽元素

          • ::before
          在元素內容之前插入額外生成的內容
          
          • ::after
          在元素內容之后插入額外生成的內容
          
          • ::first–letter
          選取元素的首個字符
          
          • ::first–line
          選取元素的第一行
          
          • ::selection
          對用鼠標鍵盤等已選取的文字部分應用樣式
          
          • ::spelling-error
          表示瀏覽器標記為不正確拼寫的文本段
          只有一小部分CSS屬性可用于 ::spelling-error 偽元素選擇器:
          color/background-color/cursor/caret-color/outline
          text-decoration/text-emphasis-color/text-shadow
          
          • ::grammar-error
          偽元素應用于瀏覽器標識為語法錯誤的文本段
          只有一小部分的css能夠應用在::grammar-error的選擇器中
          color/background-color/cursor/text-emphasis-color/text-shadow/outline/text-decoration
          
          • ::focus-within
          當元素本身或其后代獲得焦點時,:focus-within偽類的元素就會有效
          

          focus-within兼容情況

          SS3中包含幾個新的文本特征。

          在我這里您將了解以下文本屬性:

          • text-shadow

          • box-shadow

          • text-overflow

          • word-wrap

          • word-break


          瀏覽器支持

          屬性




          text-shadow4.010.03.54.09.5
          box-shadow10.04.0 -webkit-9.04.03.5 -moz-5.13.1 -webkit-10.5
          text-overflow4.06.07.03.111.09.0 -o-
          word-wrap23.05.53.56.112.1
          word-break4.05.515.03.115.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;
          }

          Border

          元素邊框:我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。

          按如下代碼設置Div(TsetMiddle)的Border(邊框):

          border-style:solid;
          border-width: 10px;
          border-color: aqua;

          刷新頁面如下圖:此時TsetMiddle這個盒子的總寬度已經變成200+30+30了,而且可以設置其底色和線條樣式。

          Border

          Margin

          margin 控制周圍的元素區域。margin 沒有背景顏色,是完全透明的。通過margin可以控制元素與四周元素的空隙距離;

          按如下代碼設置Div(TsetMiddle)的margin(外邊距):

          margin: 30px auto;

          刷新頁面如下圖:此時TsetMiddle這個盒子的總寬度已經變成200+30(Border)+30(Margin)+30(Border)+30(Margin)了。

          Margin

          Padding

          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、可以利用盒子的各種屬性,調整其內容在父容器中的位置。


          主站蜘蛛池模板: 国产主播福利一区二区| av一区二区三区人妻少妇| 高清一区二区三区视频| 免费av一区二区三区| 精品在线一区二区三区| 波多野结衣一区二区| 色窝窝无码一区二区三区色欲 | 精品无码AV一区二区三区不卡| 久久国产精品最新一区| 精品理论片一区二区三区| 日韩一区二区三区无码影院| 精品国产AⅤ一区二区三区4区| 美女AV一区二区三区| 国产在线观看精品一区二区三区91| 激情内射亚洲一区二区三区爱妻| 无码国产精成人午夜视频一区二区 | 日韩经典精品无码一区| 国模精品视频一区二区三区| 国产福利一区二区三区在线观看 | 国产主播在线一区| 波多野结衣一区二区| 亚欧在线精品免费观看一区| 亚洲一区中文字幕在线电影网| 色欲AV蜜臀一区二区三区 | 精品国产日韩亚洲一区| 一区二区在线播放视频| 亚洲AV无码一区二区三区在线观看 | 亚洲爆乳精品无码一区二区| 亚洲AV一区二区三区四区| 一区二区三区无码被窝影院| 精品免费国产一区二区三区 | 三上悠亚精品一区二区久久 | 国产aⅴ一区二区| 好湿好大硬得深一点动态图91精品福利一区二区| 视频一区二区在线观看| 亚洲中文字幕无码一区| 人体内射精一区二区三区| 国产乱码精品一区二区三区四川人| 日韩一区二区三区不卡视频| 国产亚洲情侣一区二区无| 久久精品黄AA片一区二区三区|