목차
一些基本概念
块级元素
行内元素
块级元素和行内元素的区别
正常流
非替换元素
替换元素
根元素
盒模型
几点提示
水平格式化
垂直格式化
行内元素的盒模型
웹 프론트엔드 HTML 튜토리얼 详解CSS_html/css_WEB-ITnose

详解CSS_html/css_WEB-ITnose

Jun 24, 2016 am 11:34 AM

本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节。

一些基本概念

HTML的大多数元素都是块级(block)元素或行内(inline)元素

块级元素

默认情况下,块级元素会另起一行,并尽可能的充满整个容器。
块级元素可以包含行内元素和其他块级元素,相比于行内元素可以创建更复杂和大型的结构

块级元素列表:

html5新增的元素:
figcation:图文信息组标题 ,article:文章,figure:图文信息组
output:表单输出,aside:侧栏内容,footer:区段尾或页尾,audio:音频播放
video:视频播放,section:页面区段,canvas:画布、绘制图形,header:区段头或页头
hgroup:标题组,

address:联系方式信息,ol:有序列表,p:行,form:表单,pre:预格式化文本,blockqute:块引用
h1-h6:标题,table:表格,dd:列表中条目描述,dl:定义列表,div,hr:水平分割线

行内元素

行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间,
只能包含数据和其他行内元素

行内元素列表

b,big,i,small,tt,
abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var,
a,bdo,br,img,map,object,q,script,span,sub,sup,
button,input,label,select,textarea

块级元素和行内元素的区别

块级元素:
1.会另起一行,
2.可以设置width,height,margin,padding,border属性
3.默认宽度是容器的100%

行内元素:
1.和其他元素在同一行内
2.高度和宽度就是内容的高度和宽度
3.可以设置margin-left和margin-right属性,无法设置margin-top和margin-bottom属性
4.border和padding可以设置,但是border-top和padding-top到页面顶部后就不再增加

正常流

正常流指:从左到右,从上到下显示。要让一个元素不在正常流中,唯一的办法是让元素浮动或定位

非替换元素

如果元素的内容包含在文档中,则称之为非替换元素。比如一个段落的文本都在该元素本身之内,这个段落就是一个非替换元素。

替换元素

作为其他内容占位符的一个元素称为替换元素,根据标签和属性的值来显示内容的元素。比如img元素,它只是指向一个图像文件,这个文件插入到文档流中。大多数表单元素(input,根据type属性来显示内容)也是替换元素。

根元素

位于文档树的顶端,在html文档中就是html元素

盒模型

html文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒模型。盒模型通过四个边界来描述:margin(外边距),border(边框),padding(内边距),content(内容区域),如图所示:

CSS盒模型

几点提示

1.padding,border,margin都是可选的,默认值为0,但是浏览器会自行设置元素的margin和padding,通过在css样式表中设置

1 *{2     margin:0;3     padding:04 }
로그인 후 복사

来覆盖浏览器样式。注意:这里的*表示所有元素,但是这样性能不好,建议一次列出常用的元素来设置

2.如果给元素设置背景,并且边框的颜色为透明,背景将应用于内容,内边距和边框组成的区域。

3.浏览器兼容性
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。
根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。
不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

水平格式化

非替换元素的水平格式化

水平格式化的7大属性是:margin-left,border-left,padding-left,width,padding-right,border-right,margin-right。这7个属性值加起来往往是父级元素的width值。

其中margin-left,width,margin-right可以设置为auto。
主要有下面几种情况:

一个属性设置成auto

如果三个属性中某个属性设置了auto,其余两个为特定的值,那么设置auto的属性为确定所需的元素,从而使得元素框的宽度等于父级元素的width。

例子

HTML代码

1 <div class="parent">2 3     <span class="block">块级元素</span>4 5 </div>
로그인 후 복사

CSS代码

 1 .parent{ 2     width:600px 3 } 4  5  6 div { 7     background: #eeb3b3 none repeat scroll 0 0; 8 } 9 10 11 .block {12     background: #ffd800 none repeat scroll 0 0;13     display: block;14     margin-left: auto;15     margin-right: 100px;16     padding: 30px;17     width: 100px;18 }
로그인 후 복사


被设置为auto的margin-auto属性值为340px,即margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=340+0+30+100+30+0+100=600

总和不等于父级元素的width

使用auto可以弥补实际值与所需总和的差距,如果三个属性都设置了特定值,但是总和不等于父级元素的width。
修改上面例子中的margin-left为100px,即

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: 100px;5     margin-right: 100px;6     padding: 30px;7     width: 100px;8 9 }
로그인 후 복사


在上面的CSS中,margin-left,width,margin-right都设置了特定值,但是七大属性总和不等于父级元素的width。这种情况下:
在FF中,margin-right的值为开发者设定的值
在Chrome中,margin-right被强制为auto

width设置为auto

如果margin-left和margin-right都设置特定值,width设置为auto,则width将会等于某个特定值以达到父级元素的width。
如果将width修改为auto,即:

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: 100px;5     margin-right: 100px;6     padding: 30px;7     width: auto;8 9 }
로그인 후 복사


元素的width将被被设定为340px来使总和达到父级元素的width

margin-left和margin-right设置成auto

如果margin-left和amrgin-right都设置为auto,则它们会设置相等的值,因此元素将在父级元素中居中。这是将块级元素居中的一种方法。注意:text-align设置为center只适用于块级元素中的内联内容居中,并不能使块级元素居中。
设置margin属性为margin:0 auto

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin: 0 auto;    5     padding: 30px;6     width: 100px;7 8 }
로그인 후 복사



margin-left和margin-right的值会被设置为相等,使得元素居中

某个外边距和width设置成auto

如果设置某个外边距和width为auto,则设置为auto的外边距会为0,width会设置为所需的值来填充父级元素。

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: auto;5     margin-right: 100px;6     padding: 30px;7     width: auto;8 }
로그인 후 복사



设置margin-left和width为auto,则margin-left将被设置为0,width会被设置为440px来满足父级元素的width

全设置成auto

如果margin和width都设置为auto,则两个外边距会设置为0,width会尽可能宽。

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: auto;5     margin-right: auto;6     padding: 30px;7     width: auto;8 }
로그인 후 복사


三个值都设置为auto,则两个外边距会设置为0,width会被设置为540px

负外边距

7个属性只要都是大于等于0的值,总和总是等于父级元素的width,不会超过父级元素的区域
但是可以通过制定负外边距来得到比父级元素width更大的区域

1 .block {2     background: #ffd800 none repeat scroll 0 0;3     display: block;4     margin-left: 100px;5     margin-right: -400px;6     padding: 30px;7     width: auto;8 }
로그인 후 복사


设置margin-right为-400px,则元素会大于父级元素width,因为100+0+30+840+30+0-400=600,元素的width为840px

替换元素的水平格式化

替换元素的水平格式化规则和非替换元素的规则类似,只有一个width有区别,如果width设置为auto,则元素的宽度是内容的固有宽度。注意:对于img标签,如果width不等于其固有宽度,则height也会等比例增加,除非设置特定值。反过来如果height设置高度,width也会等比例增加

垂直格式化

垂直格式化和水平格式化类似,也有7个相关属性:margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom,这7个属性的总和必须等于父级元素的height属性。
其中margin-top,margin-bottom和height可以设置成auto
一个正常流中的块元素的margin-top和margin-bottom设置为auto后,会被设置为0,即不能将元素垂直居中,实际上元素没有外边距。定位元素如果设置成auto有不同的处理结果。

如果正常流元素的height设置为auto,则其高度将会被设置为其内容元素的高度总和。

垂直外边距合并

垂直外边距合并:当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

例子:

html代码

1 <div class="m20"> 外边距20px </div>2 <div class="m10"> 外边距10px </div>
로그인 후 복사

css代码

1 .p20 { padding: 20px; }2 .p10 { padding: 10px; }
로그인 후 복사

 


如图所示,两个div标签的外边距分别是20px,10px,但是最终两个div之间的距离是20px,而不是20+10=30px

行内元素的盒模型

行内元素也是有盒模型的,但是有几点要注意:
1.行内元素可以设置margin-left和margin-right属性,无法设置margin-top和margin-bottom属性
2.行内元素border和padding可以设置,但是border-top和padding-top到页面顶部后就不再增加

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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 양식 검증 속성을 사용하는 것에 대해 설명합니다.

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

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

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

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

& 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