搜尋
首頁web前端html教學7.css盒模型_html/css_WEB-ITnose

  所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西。

  而根据元素的特效,其盒模型的特效也不同,下面是一些总结:

1.块级元素(区块)

  所谓块级元素,就是能够设置元素尺寸、有隔离其他元素功能的元素、比如

等分组元素

2.行内元素(内联)

  所谓行内元素,是不能够设置元素尺寸的,它只能自适应内容、无法隔离其他元素,其他元素会紧跟其后。比如等文本元素。

3.行内-块元素(内联块)

  所谓行内-块元素,可以设置元素尺寸,但无法隔离其他元素。比如7.css盒模型_html/css_WEB-ITnose

4.隐藏元素

  设置了隐藏属性的元素。

 

  明白了这些分离以后,就可以进行相应的属性的学习了,其实这些属性可以看成是对盒子的操作。

一.元素尺寸

  元素尺寸的设置,说白了就是对盒子大小的设置,按照上面的分类的解释,对行内元素无效,有以下的属性可用:

属性 说明 CSS 版本
width auto、长度值或百分比 设置元素的宽度 1
height auto、长度值或百分比 设置元素的高度 1
min-width auto、长度值或百分比 设置元素最小宽度 2
min-height auto、长度值或百分比 设置元素最小高度 2
max-width auto、长度值或百分比 设置元素最大宽度 2
max-height auto、长度值或百分比 设置元素最大高度 2

 

div {    width: 200px;    height: 200px;} 

 

  解释:设置元素的固定尺寸。

div {    min-width: 100px;    min-height: 100px;    max-width: 300px;    max-height: 300px;} 

 

  解释:这一组主要是应对可能动态产生元素尺寸变大变小的问题,从而限制它最大和最小的值。

 

div {     width: auto;     height: auto; } 

 

  解释:auto 是默认值(),width 在 auto 下是 100%的值;height 在 auto 下是自适应。

<div id="a">    <div id="b">scolia</div></div> 

 

#a {    background: silver;     width: 200px;     height: 200px; } #b {     background: gray;     width: 80%;     height: 80%; }

 

  解释:百分比就是相对于父元素长度来衡定的。

  注意:为什么元素的大小是用宽和高表示,而不是我们熟悉的长和宽呢?因为我们的网页是在屏幕里显示的,而最初没有移动设备的时候,显示器都是放在桌面上的,可以看作将平面立了起来。所以就变成了用高和宽来表示了。

 二.元素内边距

  CSS 盒模型中可以设置元素内部边缘填充空白的大小,我们称为内边距。

属性 说明 CSS 版本
padding-top 长度值或百分比 设置顶部内边距 1
padding-bottom 长度值或百分比 设置底部内边距 1
padding-left 长度值或百分比 设置左边内边距 1
padding-right 长度值或百分比 设置右边内边距 1
padding 1 ~ 4 个长度值或百分比 简写属性 1

 

  可以分开设置: 

div {     padding-top: 10px;     padding-bottom: 10px;     padding-left: 10px;     padding-right: 10px;}

 

  也是可以用简写形式:

div {     padding: 10px 10px 10px 10px; }

 

  四个值的时候代表按顺序设置上、右、下、左,也就是按逆时针方向。

 

div {     padding: 10px 50px 200px; }

 

  三个值代表按顺序设置上、左右、下,即左右合并。

 

div {     padding: 10px 20px; }

 

  两个值代表按顺序设置上下、左右。

 

div {     padding: 10px; }

 

  一个值,代表上下左右都设置为这个值。

  注意:内边距的设置其实就是向盒子里面填充东西,会使盒子变大。如果同时设置了背景颜色,内边距越大,背景颜色的面积越大。

     另外内边距比较特别的是,对于内联元素也有作用,但是一般也用不到这个特性,了解一下就好。

三.元素外边距

  CSS 盒模型中可以设置元素外部边缘填充空白的大小,我们称为外边距。其实也就是盒子搬开,增加其间隔。和内边距不同,外边距不会改变盒子的大小。

  有下面属性可供选择:

属性 说明 CSS 版本
margin-top 长度值或百分比 设置顶部内边距 1
margin-bottom 长度值或百分比 设置底部内边距 1
margin-left 长度值或百分比 设置左边内边距 1
margin-right 长度值或百分比 设置右边内边距 1
margin 1 ~ 4 长度值或百分比 简写属性 1

  注意:其使用特性和外边距一样,这里就不再重复说明。

 

 

四.处理溢出

  当设置了元素固定尺寸且内容过大时,就会出现溢出的问题。其实就是我们规定了盒子的大小以后,要装的东西太多,而盒子又装不下时,东西就会满出来。而满出来的行为是怎么样的,我们可以进行设置。

溢出主要朝两个方向:右侧和底部。我们可以通过 overflow 系列样式来控制它。

属性 说明 CSS 版本
overflow-x 溢出值 设置水平方向的溢出 3
overflow-y 溢出值 设置垂直方向的溢出 3
overflow 溢出值 简写属性 2

溢出处理主要有四种处理值:

说明
auto 浏览器自行处理溢出内容。如果有溢出内容,就显示滚动条,否则就不显示滚动条
hidden 如果有溢出的内容,直接剪掉
scroll 不管是否溢出,都会出现滚动条。但不同平台和浏览器显示方式不同
visible 默认值,不管是否溢出,都显示内容

 

div {     overflow-x: auto; }

 

  总结:可以看出溢出处理的逻辑是,先确定从溢出的方向,再确定对溢出的部分怎么处理。

 

五.元素的可见性

  我们在按特性对元素分类的时候,还剩下一个隐藏元素没有解释清楚,所谓的设置了隐藏属性的元素中的隐藏属性就是我们接下来要说的。

属性 说明 css版本
visibility visible 默认值,元素在页面上可见 2
hidden 元素不可见,但会占据空间 2
collapse 元素不可见,隐藏表格的行与列,如果不是表格,则和hidden一样 2

div {     visibility: hidden; }

 

   解释:设置元素隐藏,但占位,也就是该元素的分组效果依然会存在。

table tr:first-child {     visibility: collapse; };

 

   解释:隐藏表格的行或列,但不占位,支持度一般。

六.元素类型转换

  我们按元素的特性对其进行了分类,但其实可以使其转换,从而实现别的元素的特性。

属性 说明 CSS 版本
display block 盒子为块级元素 1
inline 盒子为行内元素 1
inline-block 盒子为行内-块元素 2
none 盒子不可见,不占位 1

 

span {    background: silver;     width: 200px;     height: 200px;     display: block; }

 

   解释:将行内元素转成块级元素,原来无效的属性也可以使用了,其他就不再演示了。

 

 七.元素的浮动

  我们一直在二维空间中设置元素的盒模型,但其实可以将元素向上浮动一层,注意是一层

属性 说明 CSS 版本
float left 浮动元素靠左 1
right 浮动元素靠右 1
none 禁用浮动 1

  那么,上浮一层是什么意思?

  这就需要一定的空间思维能力的,如果我们将同一层的元素都当成是一张张的小卡片,一般情况下,他们都放在地面上,都在同一层,按着一定的顺序排列。这时,上浮一层,就相当于与你将卡片拿起来,然后在用一块玻璃将地方的卡片压住,在将拿去来的卡片放在玻璃上。但浮动还不仅仅做了这个动作,当你把一种卡片拿走以后,卡片原来占有的位置就会被剩下的卡片挤掉。如果此时你将卡片放在玻璃上的话,必然会遮挡住下面那层的卡片,为了解决遮挡的问题,又有下面的属性可用。

属性 说明 CSS 版本
clear none 允许两边均可浮动 1
left 左边界不得浮动 1
right 右边界不得浮动 1
both 两边都不得浮动 1

 

#c {     clear: both; }

 

   解释:方法其实是一种非常强硬的方法,既然浮动会造成遮挡的话,那就不允许浮动就好了。

      但是还有一种比较取巧的方法,那就对被遮挡的元素进行外边距的设置,既然惹不起,那总躲得起吧。

 

 

 总结:

  下面总有了盒模型内容有哪些:

  1.设置元素尺寸

  2.内边距

  3.外边距

  4.尺寸固定后的溢出处理

  6.隐藏元素

  7.类型转换

  8.元素浮动

 

 

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML文檔中的根標籤是什麼?HTML文檔中的根標籤是什麼?Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,確保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML標籤和元素是同一件事嗎?HTML標籤和元素是同一件事嗎?Apr 28, 2025 pm 05:44 PM

文章解釋說,HTML標籤是用於定義元素的語法標記,而元素是完整的單位,包括標籤和內容。他們一起工作以構建網頁。查拉克計數:159

&lt; head&gt;的意義是什麼。 &&lt;身體&gt;在html中標記?&lt; head&gt;的意義是什麼。 &&lt;身體&gt;在html中標記?Apr 28, 2025 pm 05:43 PM

本文討論了Lt; Head&gt; &&lt;身體&gt; HTML中的標籤,它們對用戶體驗的影響以及SEO的影響。正確的結構增強了網站功能和搜索引擎優化。

&lt; strong&gt;,lt; b&gt;有什麼區別標籤和lt; em&gt;,&lt; i&gt;標籤?&lt; strong&gt;,lt; b&gt;有什麼區別標籤和lt; em&gt;,&lt; i&gt;標籤?Apr 28, 2025 pm 05:42 PM

本文討論了HTML標籤,和和關注其語義與表現用途及其對SEO和可訪問性的影響之間的差異。

請說明如何指示HTML中文檔使用的字符集?請說明如何指示HTML中文檔使用的字符集?Apr 28, 2025 pm 05:41 PM

文章討論了在HTML中指定字符,重點介紹了UTF-8。主要問題:確保正確顯示文本,防止亂七八糟的字符,並增強SEO和可訪問性。

HTML中的各種格式標籤是什麼?HTML中的各種格式標籤是什麼?Apr 28, 2025 pm 05:39 PM

本文討論了用於構建和造型Web內容的各種HTML格式標籤,強調了它們對文本外觀的影響以及語義標籤對可訪問性和SEO的重要性。

HTML元素的' ID”屬性與'類”屬性之間有什麼區別?HTML元素的' ID”屬性與'類”屬性之間有什麼區別?Apr 28, 2025 pm 05:39 PM

本文討論了HTML的“ ID”和“類”屬性之間的差異,重點是它們的獨特性,目的,CSS語法和特異性。它解釋了它們的使用如何影響網頁樣式和功能,並為

HTML中的'類”屬性是什麼?HTML中的'類”屬性是什麼?Apr 28, 2025 pm 05:37 PM

本文解釋了HTML“類”屬性在分組樣式和JavaScript操縱元素中的作用,將其與唯一的“ ID”屬性進行對比。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版