웹 프론트엔드 HTML 튜토리얼 7.css盒模型_html/css_WEB-ITnose

7.css盒模型_html/css_WEB-ITnose

Jun 24, 2016 am 11:17 AM

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

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

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으로 문의하세요.

핫 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 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

See all articles