찾다
웹 프론트엔드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 30, 2025 am 12:03 AM

HTML은 웹 페이지의 골격 일뿐 만 아니라 많은 분야에서 더 널리 사용됩니다. 1. 웹 페이지 개발에서 HTML은 페이지 구조를 정의하고 CSS와 JavaScript를 결합하여 풍부한 인터페이스를 달성합니다. 2. 모바일 애플리케이션 개발에서 HTML5는 오프라인 스토리지 및 지리적 위치 기능을 지원합니다. 3. 이메일 및 뉴스 레터에서 HTML은 이메일의 형식 및 멀티미디어 효과를 향상시킵니다. 4. 게임 개발에서 HTML5의 Canvas API는 2D 및 3D 게임을 만드는 데 사용됩니다.

HTML 문서의 루트 태그는 무엇입니까?HTML 문서의 루트 태그는 무엇입니까?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesasthetop-levellement thatenCapsulateslotherContent, 프로퍼 디코 언어 구조에있는 BrowserParsing을 보장합니다.

HTML 태그와 요소가 같은 것입니까?HTML 태그와 요소가 같은 것입니까?Apr 28, 2025 pm 05:44 PM

이 기사는 HTML 태그가 요소를 정의하는 데 사용되는 구문 마커이고 요소는 태그 및 내용을 포함한 완전한 단위라고 설명합니다. 그들은 웹 페이지를 구조화하기 위해 협력합니다. character count : 159

& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?Apr 28, 2025 pm 05:43 PM

이 기사는 & lt; Head & gt의 역할에 대해 설명합니다. & lt; Body & 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

기사는 UTF-8에 중점을 둔 HTML에서 문자 인코딩 지정에 대해 논의합니다. 주요 이슈 : 올바른 텍스트 표시 보장, 멍청한 문자 방지 및 SEO 및 접근성 향상.

HTML의 다양한 형식 태그는 무엇입니까?HTML의 다양한 형식 태그는 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 웹 컨텐츠를 구조화하고 스타일링하는 데 사용되는 다양한 HTML 서식 태그에 대해 논의하여 텍스트 모양에 미치는 영향과 접근성 및 SEO에 대한 시맨틱 태그의 중요성을 강조합니다.

'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 고유성, 목적, CSS 구문 및 특이성에 중점을 둔 HTML의 'ID'와 '클래스'속성의 차이점에 대해 설명합니다. 웹 페이지 스타일링 및 기능에 어떤 영향을 미치는지 설명하고 모범 사례를 제공합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.