목차
一些基本概念
块级元素
行内元素
块级元素和行内元素的区别
正常流
非替换元素
替换元素
根元素
盒模型
几点提示
水平格式化
垂直格式化
行内元素的盒模型
웹 프론트엔드 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 옷 제거제

Video Face Swap

Video Face Swap

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

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

HTML은 초보자를 위해 쉽게 배우나요? HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML의 시작 태그의 예는 무엇입니까? HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까? 웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까? Apr 04, 2025 pm 11:30 PM

웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...

Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Apr 04, 2025 pm 11:54 PM

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구 HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구 Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까? CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까? Apr 05, 2025 am 06:15 AM

이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...

See all articles