深远驾驭css盒子模型

详解CSS盒模型

2015/11/04 · CSS · 1
评论 ·
盒模型

原作出处:
小灰狼的脑袋(@狼狼的蓝胖子)   

正文首如果读书CSS盒模型的笔记,总计了部分基本概念,知识点和细节。

有的基本概念

HTML的大部因素都以块级(block)成分或行内(inline)成分

html文书档案中的各种成分都没描绘成矩形盒子,这个矩形盒子通过3个模型来描述其占据用空间,这一个模型称为盒模型

详解CSS盒模型

 

读书目录

  • 一些基本概念
  • 盒模型

原作地址:

本文首就算读书CSS盒模型的笔记,总括了一部分基本概念,知识点和细节。

重临顶部

有个别基本概念

HTML的大部成分都以块级(block)成分或行内(inline)成分

块级元素

私下认可景况下,块级成分会另起一行,并尽量的满载整个容器。
块级成分得以涵盖行内成分和别的块级成分,相比较于行内成分得以成立更扑朔迷离和重型的结构

盒模型通过四个境界来讲述:
  • margin(外边距)
  • border(边框)
  • 深远驾驭css盒子模型。padding(内边距)
  • content(内容区域)

美高梅开户网址 1

盒模型.png

一些基本概念

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:水平分割线

盒模型基础属性:
  • width(宽度)
    ├─ min-width
    ├─ max-width

  • height(高度)
    ├─ min-height
    ├─ max-height

  • padding(内边距)
    ├─ padding-top
    ├─ padding-right
    ├─ padding-bottom
    ├─ padding-left

  • border(边框)
    ├─ border-top
    ├─ border-right
    ├─ border-bottom
    ├─ border-left

  • margin(外边距)
    ├─ margin-top
    ├─ margin-right
    ├─ margin-bottom
    ├─ margin-left

块级成分

默许情形下,块级成分会另起一行,并尽量的充满整个容器。
块级元素得以涵盖行内成分和其他块级元素,比较于行内成分得以创制更扑朔迷离和重型的结构

块级成分列表:

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:水平分割线

行内成分

行内成分不会另起一行只占据它对应的标签的边框所涵盖内容的空中,
只好分包数据和别的行内成分

一 、padding,border,margin都以可选的,默许值为0,但浏览器会自行安装成分的margin和padding,通过在CSS样式表中设置,来覆盖浏览器样式。
*{
    margin:0;
    padding:0;
}
块级成分列表:

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

贰 、水平居中。

对于固定宽度的块级元素,设置margin-left:auto,margin-right:auto,即可兑现程度居中。

<div class = "container">
  内容
</div>

.container{
    width:500px;/*max-width:500px*/
    margin:auto;
}

行内成分

行内成分不会另起一行只占据它对应的价签的边框所蕴藏内容的上空,
唯其如此分包数据和其余行内成分

行内成分列表

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.默许宽度是容器的百分之百

行内成分:
1.和任何因素在平等行内
2.莫斯中国科学技术大学学和宽窄就是内容的莫斯科大学和宽窄
3.方可安装margin-left和margin-right属性,无法设置margin-top和margin-bottom属性
4.border和padding能够设置,不过border-top和padding-top到页面顶部后就不再扩张

3、外边距合并

在常规流下,外边距会举办合并。

a、相邻成分边距汇合并。

<h1>好好学习</h1>
<h2>天天旷课</h2>

h1 { margin: 20px 0; }
h2 { margin: 30px 0; }

b、父子成分合并。
c、浮动元素和相对定位成分的异乡距不会计统计一

行内成分列表

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.私下认可宽度是容器的百分百

行内成分:
1.和其余因素在一如既往行内
2.可观和宽窄就是内容的惊人和幅度
3.能够安装margin-left和margin-right属性,不能设置margin-top和margin-bottom属性
4.border和padding能够安装,但是border-top和padding-top到页面顶部后就不再增添

正常流

平常流指:从左到右,从上到下彰显。要让2个要素不在符合规律流中,唯一的主意是让要素浮动或定点

④ 、外边距为负

安装 margin-left margin-right 为负数能够扩展块状成分宽度。

<div class="T"></div>

<style>
  .T{
  width: 20px;
  height: 300px;
  margin: 50px auto;
  background: orange;
  }
  .T::after{
  content: '';
  height: 20px;
  margin: 0 -100px;
  display: block;
  background: red;
  }
</style>

美高梅开户网址 2

外市距为负.png

块级成分和行内成分的分别

块级成分:
1.会另起一行,
2.方可设置width,height,margin,padding,border属性
3.暗中同意宽度是容器的百分之百

行内元素:
1.和其余因素在同等行内
2.惊人和增长幅度就是内容的中度和宽度
3.足以安装margin-left和margin-right属性,不可能设置margin-top和margin-bottom属性
4.border和padding可以设置,不过border-top和padding-top到页面顶部后就不再扩展

正常流

常规流指:从左到右,从上到下展现。要让四个要素不在正常流中,唯一的主意是让要素浮动或定点

非替换来分

若是成分的剧情包罗在文书档案中,则称为非替换到分。比如三个段子的文书都在该因素本身之内,那几个段落就是二个非替换到分。

5、box-sizing

box-sizing用于转移总结成分的小幅和可观的暗许的CSS盒模型。
box-sizing:content-box;(默认值)

.box{
    width:200px;
    border:30px;
}

渲染出来的盒子宽度为:260px;

box-sizing:border-box;

.box{
   width: 300px;
   border: 10px;
   padding: 10px;
   box-sizing: border-box;
}

渲染出来的盒子宽度为:300px;

正常流

例行流指:从左到右,从上到下呈现。要让3个因素不在通常流中,唯一的办法是让要素浮动或稳定

非替换来分

假定成分的始末包蕴在文书档案中,则称为非替换元素。比如多个段子的文书都在该因素本身之内,那么些段落就是四个非替换到分。

轮换来分

用作任何内容占位符的3个成分称为替换来分,依据标签和质量的值来体现内容的要素。比如img成分,它只是指向一个图像文件,那几个文件插入到文档流中。大部分表单成分(input,根据type属性来呈现内容)也是替换到分。

六 、水平格式化

水平格式化的7大属性:
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
那几个属性值之和 = 父级元素width的值

里面 margin-left,margin-right,width可以安装为auto。

a、一本性质设置成auto

 <div class="parent">
    <div class="block">块级元素</div>
 </div>


 <style>
    .parent {
      width: 600px
    }

    div {
      background: red;
    }

    .block {
      background: yellow;
      margin-left: auto;
      margin-right: 100px;
      padding: 30px;
      width: 100px;
    }
  </style>

借使多少个属性中某些属性设置为auto,其他八个为特定的值,那么设置auto的属性为分明所需的因素,从而使得成分框的大幅度等于父级成分的width。

美高梅开户网址 3

效果图.png

美高梅开户网址 4

盒模型图.png

棉被服装置为auto的margin-auto属性值为340px。
margin-left + border-left + padding-left + width + padding-right +
border-right + margin-right = 父成分的width
↓↓↓
340+0+30+100+30+0+100=600

b、总和不对等父成分的width

应用auto能够弥补实际值与所需总和的差异,就算三个特性都设置一定的值,不过总和不等于父级成分的width。
修改上面例子中的margin-left为100px,即

    .block {
      background: yellow;
      margin-left: 100px;
      margin-right: 100px;
      padding: 30px;
      width: 100px;
    }

美高梅开户网址 5

效果图.png

美高梅开户网址 6

盒模型图.png

在地点的CSS中,margin-left,width,margin-right都设置了一定值,七大属性总和≠父级成分的width。

c、width设置为auto
比方margin-left和margin-right都设置一定的值,width设置为auto,则width将会等于有个别特定值以高达父级成分的width。

.block {
  background: yellow;
  margin-left: 100px;
  margin-right: 100px;
  padding: 30px;
  width: auto;
}

美高梅开户网址 7

效果

美高梅开户网址 8

盒模型图

要素的width将被设定为340来使总和达到父级成分的width。

d、margin-left和margin-right设置成auto

要是margin-left和margin-right都安装为auto,则它们会设置相等的值,因而成分将在父级元素中居中,那是将块级成分居中的一种格局。(2有提过)
专注:text-align设置为center只适用于块级元素中的内联内容居中,并无法使块级成分居中。

.block {
  background: yellow;
  margin: 0 auto;
  padding: 30px;
  width: 100px;
}

美高梅开户网址 9

效果

美高梅开户网址 10

盒模型

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

e、有些外边距和width设置为auto

设若设置某些外边距和width为auto,则设置为auto的各省距为0,width会设置为所需的值来填充父级元素。

美高梅开户网址 11

效果

美高梅开户网址 12

盒模型

安装margin-left和width为auto,则margin-left将棉被服装置为0,width会棉被服装置为440px来满意父级成分的width。

f、全安装为auto

一旦margin和width都安装为auto,则五个异地距会设置为0,width会尽或者宽。

.block {
  background: yellow;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  width: auto;
}

美高梅开户网址 13

效果f

美高梅开户网址 14

盒模型f

八个值都安装为auto,则多个外市距会设置为0,width会被设置为540px

g、负外边距

几个属性只要都以过量等于0的值,总和连接等于父级成分的width,不会超越父级成分的区域
不过足以由此制订负外边距来赢得比父级成分width更大的区域

.block {
  background: yellow;
  margin-left: 100px;
  margin-right: -400px;
  padding: 30px;
  width: auto;
}

美高梅开户网址 15

效果g

美高梅开户网址 16

盒模型g

设置margin-right为-400px,则成分会抢先父级成分width,因为100+0+30+840+30+0-400=600,成分的width为840px.

非替换到分

设若成分的内容包涵在文书档案中,则名为非替换到分。比如一个段子的公文都在该因素本人之内,那个段落就是1个非替换来分。

轮换成分

作为任何剧情占位符的叁个因素称为替换来分,依照标签和质量的值来呈现内容的成分。比如img成分,它只是指向3个图像文件,这些文件插入到文书档案流中。超越54%表单成分(input,遵照type属性来展现内容)也是替换到分。

根元素

坐落文书档案树的顶端,在html文书档案中就是html成分

7、outline

要是您看到被选中的 <a> <input> <button>
周围有一圈黄或紫铜色的外框,正是 outline了,能够透过安装 outline: 0
outline: none 去除。

轮换来分

用作任何情节占位符的3个因素称为替换到分,依据标签和质量的值来体现内容的要素。比如img成分,它只是指向一个图像文件,这几个文件插入到文书档案流中。超越二分之一表单元素(input,依照type属性来显示内容)也是替换到分。

根元素

坐落文书档案树的顶端,在html文档中便是html成分

盒模型

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

美高梅开户网址 17

CSS盒模型

8、overflow

overflow用来控制内容溢出含有它的块状成分时的展现形式。
overflow-xoverflow-y分级用于控制水平溢出和垂直溢出。

  • visible 暗中认可值 显示溢出的剧情
  • hidden 内容被裁剪且不会出现滚动条
  • scroll 内容被裁剪但现身滚动条
  • auto 由浏览器决定

根元素

座落文书档案树的上方,在html文书档案中就是html成分

回来顶部

盒模型

html文书档案中的种种成分都被描绘成矩形盒子,这个矩形盒子通过四个模子来叙述其占据空间,那几个模型称为盒模型。盒模型通过三个边界来描述:margin(外边距),border(边框),padding(内边距),content(内容区域),如图所示:
美高梅开户网址 18

CSS盒模型

几点提示

1.padding,border,margin都以可选的,默许值为0,不过浏览器会自动安装成分的margin和padding,通过在css样式表中设置

*{
     margin:0;
     padding:0
 }

 

来覆盖浏览器样式。注意:那里的*表示拥有因素,可是这么质量倒霉,建议逐项列出常用的成分来安装

2.比方给成分设置背景,并且边框的颜色为透明,背景将使用于内容,内边距和边框组成的区域。

3.浏览器包容性
若果为页面设置了合适的
DTD,大部分浏览器都会依照上边的图示来显示内容。但是 IE 5 和 6
的表现却是不得法的。
根据 W3C 的标准,成分内容占据的空间是由 width 属性设置的,而内容周围的
padding 和 border 值是此外总结的。
不好的是,IE5.X 和 6 在奇特情势中接纳本身的非标准化准模型。这么些浏览器的
width 属性不是内容的增加率,而是内容、内边距和边框的大幅度的总数。

九 、行内成分的盒模型

行内成分也是有盒模型的,不过有几点要注意:
a、对于非替换到分,比如a,span标签等

(1)能够安装margin-left和margin-right属性,无法设置margin-top和margin-bottom属性

(2)行内成分border和padding能够设置,不过border-top和padding-top到页面顶部后就不再增添

b、对于替换来分,比如input,img标签margin,
padding,border都有机能

盒模型

html文档中的各样成分都被描绘成矩形盒子,这一个矩形盒子通过一个模型来讲述其占据空间,那一个模型称为盒模型。盒模型通过八个境界来叙述:margin(外边距),border(边框),padding(内边距),content(内容区域),如图所示:
美高梅开户网址 19

CSS盒模型

几点提示

1.padding,border,margin都以可选的,暗许值为0,可是浏览器会自行安装成分的margin和padding,通过在css样式表中设置

CSS

*{ margin:0; padding:0 }

1
2
3
4
*{
     margin:0;
     padding:0
}

来覆盖浏览器样式。注意:这里的*代表拥有因素,不过如此品质倒霉,建议逐项列出常用的因向来设置

2.一旦给成分设置背景,并且边框的颜色为透明,背景将利用于内容,内边距和边框组成的区域。

3.浏览器包容性
一旦为页面设置了适当的
DTD,一大半浏览器都会遵从上面的图示来表现内容。然则 IE 5 和 6
的彰显却是不正确的。
基于 W3C 的标准,成分内容占据的上空是由 width 属性设置的,而内容周围的
padding 和 border 值是其它总计的。
不佳的是,IE5.X 和 6 在奇特方式中应用本身的非标准化准模型。那个浏览器的
width 属性不是内容的大幅,而是内容、内边距和边框的增幅的总数。

水平格式化

几点提示

1.padding,border,margin都以可选的,暗中认可值为0,可是浏览器会活动安装成分的margin和padding,通过在css样式表中设置

1 *{
2     margin:0;
3     padding:0
4 }

来覆盖浏览器样式。注意:那里的*代表拥有因素,不过如此品质糟糕,建议逐项列出常用的因平素安装

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。那九个属性值加起来往往是父级成分的width值。

其间margin-left,width,margin-right能够安装为auto。
重视有上面二种状态:

水平格式化

非替换来分的水准格式化

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

中间margin-left,width,margin-right能够设置为auto。
珍视有上面两种境况:

壹天品质设置成auto

一旦多脾特性中某些属性设置了auto,别的八个为一定的值,那么设置auto的属性为显著所需的要素,从而使得成分框的大幅度等于父级成分的width。

例子

HTML代码

 <div class="parent"> 
     块级元素 
 </div>

CSS代码

.parent{
    width:600px
}

div {
    background: #eeb3b3 none repeat scroll 0 0;
}

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: auto;
    margin-right: 100px;
    padding: 30px;
    width: 100px;
}

美高梅开户网址 20

美高梅开户网址 21

被设置为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

非替换来分的水准格式化

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

当中margin-left,width,margin-right能够安装为auto。
关键有下面二种处境:

1天性质设置成auto

倘使三个天性中有个别属性设置了auto,其他五个为一定的值,那么设置auto的品质为分明所需的要素,从而使得成分框的增长幅度等于父级成分的width。

例子

HTML代码

XHTML

<div class=”parent”> <span
class=”block”>块级成分</span> </div>

1
2
3
<div class="parent">
     <span class="block">块级元素</span>
</div>

CSS代码

CSS

.parent{ width:600px } div { background: #eeb3b3 none repeat scroll 0
0; } .block { background: #ffd800 none repeat scroll 0 0; display:
block; margin-left: auto; margin-right: 100px; padding: 30px; width:
100px; }

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

 

美高梅开户网址 22
美高梅开户网址 23

被安装为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,即

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: 100px;
    margin-right: 100px;
    padding: 30px;
    width: 100px;

}

美高梅开户网址 24

美高梅开户网址 25

在地点的CSS中,margin-left,width,margin-right都安装了特定值,不过七大属性总和不等于父级成分的width。那种景观下:
在FF中,margin-right的值为开发者设定的值
在Chrome中,margin-right被强制为auto

1脾质量设置成auto

倘使多少个属性中有些属性设置了auto,其他七个为特定的值,那么设置auto的属性为分明所需的因素,从而使得成分框的小幅度等于父级元素的width。

例子

HTML代码

1 <div class="parent"> 
2     块级元素 
3 </div>

CSS代码

美高梅开户网址 26

 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 }

美高梅开户网址 27

美高梅开户网址 28
美高梅开户网址 29

棉被服装置为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,即

CSS

.block { background: #ffd800 none repeat scroll 0 0; display: block;
margin-left: 100px; margin-right: 100px; padding: 30px; width: 100px; }

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

 

美高梅开户网址 30
美高梅开户网址 31

在上头的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,即:

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: 100px;
    margin-right: 100px;
    padding: 30px;
    width: auto;

}

美高梅开户网址 32

美高梅开户网址 33

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

总数不等于父级元素的width

选取auto能够弥补实际值与所需总和的差别,即便多个属性都设置了一定值,但是总和不对等父级成分的width。
修改上边例子中的margin-left为100px,即

美高梅开户网址 34

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 }

美高梅开户网址 35

 

美高梅开户网址 36
美高梅开户网址 37

在地点的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,即:

CSS

.block { background: #ffd800 none repeat scroll 0 0; display: block;
margin-left: 100px; margin-right: 100px; padding: 30px; width: auto; }

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

 

美高梅开户网址 38
美高梅开户网址 39

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

margin-left和margin-right设置成auto

如若margin-left和amrgin-right都设置为auto,则它们会安装相等的值,由此成分将在父级成分中居中。那是将块级成分居中的一种办法。注意:text-align设置为center只适用于块级成分中的内联内容居中,并不可能使块级成分居中。
设置margin属性为margin:0 auto

美高梅开户网址 40

美高梅开户网址 41

margin-left和margin-right的值会棉被服装置为相等,使得成分居中

 
margin-left和margin-right设置成auto

倘若margin-left和amrgin-right都设置为auto,则它们会设置相等的值,由此成分将在父级成分中居中。那是将块级成分居中的一种办法。注意:text-align设置为center只适用于块级成分中的内联内容居中,并无法使块级元素居中。
设置margin属性为margin:0 auto

CSS

.block { background: #ffd800 none repeat scroll 0 0; display: block;
margin: 0 auto; padding: 30px; width: 100px; }

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

 

美高梅开户网址 42
美高梅开户网址 43
margin-left和margin-right的值会棉被服装置为相等,使得成分居中

有个别外边距和width设置成auto

假若设置某些外边距和width为auto,则设置为auto的异乡距会为0,width会设置为所需的值来填充父级成分。

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: auto;
    margin-right: 100px;
    padding: 30px;
    width: auto;
}

美高梅开户网址 44

美高梅开户网址 45

安装margin-left和width为auto,则margin-left将被设置为0,width会被安装为440px来满意父级成分的width

width设置为auto

尽管margin-left和margin-right都安装一定值,width设置为auto,则width将会等于有些特定值以高达父级成分的width。
如果将width修改为auto,即:

美高梅开户网址 46

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 }

美高梅开户网址 47

美高梅开户网址 48
美高梅开户网址 49

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

有些外边距和width设置成auto

如若设置有个别外边距和width为auto,则设置为auto的异地距会为0,width会设置为所需的值来填充父级成分。

CSS

.block { background: #ffd800 none repeat scroll 0 0; display: block;
margin-left: auto; margin-right: 100px; padding: 30px; width: auto; }

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

 

美高梅开户网址 50
美高梅开户网址 51
设置margin-left和width为auto,则margin-left将被安装为0,width会棉被服装置为440px来知足父级成分的width

全安装成auto

万一margin和width都设置为auto,则三个异地距会设置为0,width会尽恐怕宽。

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    width: auto;
}

美高梅开户网址 52

美高梅开户网址 53

八个值都安装为auto,则五个异地距会设置为0,width会棉被服装置为540px

margin-left和margin-right设置成auto

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

美高梅开户网址 54

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 }

美高梅开户网址 55

美高梅开户网址 56
美高梅开户网址 57
margin-left和margin-right的值会棉被服装置为相等,使得成分居中

全安装成auto

只要margin和width都设置为auto,则三个内地距会设置为0,width会尽大概宽。

CSS

.block { background: #ffd800 none repeat scroll 0 0; display: block;
margin-left: auto; margin-right: auto; padding: 30px; width: auto; }

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

 

美高梅开户网址 58
美高梅开户网址 59

多个值都设置为auto,则五个异地距会设置为0,width会被装置为540px

负外边距

九个天性只要都是出乎等于0的值,总和一而再等于父级成分的width,不会超过父级成分的区域
而是足以因此制定负外边距来取得比父级成分width更大的区域

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: 100px;
    margin-right: -400px;
    padding: 30px;
    width: auto;
}

 

美高梅开户网址 60

美高梅开户网址 61

安装margin-right为-400px,则成分会超越父级成分width,因为100+0+30+840+30+0-400=600,成分的width为840px

有个别外边距和width设置成auto

即便设置某些外边距和width为auto,则设置为auto的异地距会为0,width会设置为所需的值来填充父级成分。

美高梅开户网址 62

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 }

美高梅开户网址 63

美高梅开户网址 64
美高梅开户网址 65
安装margin-left和width为auto,则margin-left将被安装为0,width会棉被服装置为440px来满意父级成分的width

负外边距

8个属性只要都以出乎等于0的值,总和连接等于父级成分的width,不会超过父级成分的区域
然则足以透过制订负外边距来博取比父级成分width更大的区域

CSS

.block { background: #ffd800 none repeat scroll 0 0; display: block;
margin-left: 100px; margin-right: -400px; padding: 30px; width: auto; }

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

 

美高梅开户网址 66
美高梅开户网址 67

安装margin-right为-400px,则成分会超过父级成分width,因为100+0+30+840+30+0-400=600,成分的width为840px

轮换来分的程度格式化

轮换来分的水准格式化规则和非替换来分的条条框框类似,只有五个width有分别,若是width设置为auto,则成分的小幅度是内容的本来面目宽度。注意:对于img标签,假如width不对等其固有增长幅度,则height也会等比例扩大,除非设置特定值。反过来假诺height设置高度,width也会等比例扩充

全安装成auto

万一margin和width都安装为auto,则多少个外市距会设置为0,width会尽只怕宽。

美高梅开户网址 68

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 }

美高梅开户网址 69

美高梅开户网址 70
美高梅开户网址 71

四个值都设置为auto,则八个各州距会设置为0,width会被安装为540px

轮换来分的水平格式化

轮换来分的品位格式化规则和非替换来分的平整类似,只有四个width有分别,假如width设置为auto,则成分的宽窄是内容的原来宽度。注意:对于img标签,假如width不等于其固有大幅度,则height也会等比例增多,除非设置特定值。反过来如若height设置中度,width也会等比例扩展

垂直格式化

垂直格式化和水准格式化类似,也有捌个有关属性:margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom,那八个属性的总和必须等于父级成分的height属性。
中间margin-top,margin-bottom和height能够安装成auto
1个符合规律流中的块元素的margin-top和margin-bottom设置为auto后,会被安装为0,即不能够将成分垂直居中,实际元夕素没有异地距。定位成分即使设置成auto有差别的处理结果。

假设符合规律流成分的height设置为auto,则其惊人将会棉被服装置为其剧情成分的莫斯中国科学技术大学学总和。

负外边距

捌本个性只要都以超越等于0的值,总和连接等于父级成分的width,不会超过父级成分的区域
可是能够透过制订负外边距来获得比父级成分width更大的区域

 

美高梅开户网址 72

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 }

美高梅开户网址 73

美高梅开户网址 74
美高梅开户网址 75

安装margin-right为-400px,则成分会压倒父级成分width,因为100+0+30+840+30+0-400=600,成分的width为840px

垂直格式化

垂直格式化和程度格式化类似,也有多少个有关属性:margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom,这7个属性的总和必须等于父级成分的height属性。
其间margin-top,margin-bottom和height能够安装成auto
3个经常流中的块成分的margin-top和margin-bottom设置为auto后,会被安装为0,即不可能将成分垂直居中,实际上元节素没有异地距。定位成分假诺设置成auto有例外的处理结果。

假诺不荒谬流成分的height设置为auto,则其高度将会棉被服装置为其剧情成分的莫斯中国科学技术大学学总和。

垂直外边距合并

垂直外边距合并:当八个垂直外边距相遇时,它们将形成3个各州距。合并后的外市距的可观等于八个产生合并的异乡距的冲3月的较大者。

例子:

html代码

<div class="m20"> 外边距20px </div>
<div class="m10"> 外边距10px </div>

 

css代码

.m20 { padding: 20px; }
.m10 { padding: 10px; }

 

美高梅开户网址 76

如图所示,多少个div标签的异地距分别是20px,10px,不过最后多个div之间的偏离是20px,而不是20+10=30px

轮换到分的水平格式化

轮换来分的品位格式化规则和非替换来分的条条框框类似,唯有一个width有分别,即使width设置为auto,则成分的上升幅度是内容的原本宽度。注意:对于img标签,倘若width不对等其固有增长幅度,则height也会等比例增添,除非设置特定值。反过来要是height设置中度,width也会等比例增添

笔直外边距合并

垂直外边距合并:当多少个垂直外边距相遇时,它们将形成三个外边距。合并后的异地距的惊人等于三个产生合并的各地距的可观中的较大者。

例子:

html代码

XHTML

<div class=”m20″> 外边距20px </div> <div class=”m10″>
外边距10px </div>

1
2
<div class="m20"> 外边距20px </div>
<div class="m10"> 外边距10px </div>

css代码

CSS

.m20 { padding: 20px; } .m10 { padding: 10px; }

1
2
.m20 { padding: 20px; }
.m10 { padding: 10px; }

美高梅开户网址 77
如图所示,四个div标签的异乡距分别是20px,10px,不过最后三个div之间的距离是20px,而不是20+10=30px

行内成分的盒模型

行内成分也是有盒模型的,可是有几点要留心:

1.对此非替换来分,比如a,span标签等
(1)能够安装margin-left和margin-right属性,无法设置margin-top和margin-bottom属性
(2)行内成分border和padding能够安装,可是border-top和padding-top到页面顶部后就不再增添

2.对此替换到分,比如input,img标签

margin,padding,border都有效益

垂直格式化

垂直格式化和程度格式化类似,也有几个相关属性:margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom,那三个天性的总数必须等于父级成分的height属性。
里头margin-top,margin-bottom和height能够设置成auto
八个符合规律流中的块成分的margin-top和margin-bottom设置为auto后,会被设置为0,即不能够将成分垂直居中,实际上元节素没有异地距。定位元素固然设置成auto有两样的处理结果。

若是平日流成分的height设置为auto,则其入骨将会被设置为其剧情成分的可观总和。

行内成分的盒模型

行内成分也是有盒模型的,但是有几点要专注:

1.对于非替换来分,比如a,span标签等
(1)能够设置margin-left和margin-right属性,不可能设置margin-top和margin-bottom属性
(2)行内成分border和padding能够设置,不过border-top和padding-top到页面顶部后就不再扩大

2.对于替换来分,比如input,img标签

margin,padding,border都有机能

2 赞 9 收藏 1
评论

美高梅开户网址 78

笔直外边距合并

笔直外边距合并:当多少个盒子(恐怕是手足关系也说不定是先人关系)的垂直外边距相遇时,它们将形成八个异地距。合并后的异乡距的惊人等于三个产生合并的异地距的惊人中的较大者。

例子:

html代码

1 <div class="m20"> 外边距20px </div>
2 <div class="m10"> 外边距10px </div>

 css代码

1 .m20 { margin: 20px; }
2 .m10 { margin: 10px; }

美高梅开户网址 79
如图所示,三个div标签的异乡距分别是20px,10px,可是最终四个div之间的离开是20px,而不是20+10=30px

行内元素的盒模型

行内元素也是有盒模型的,然则有几点要注意:

1.对此非替换到分,比如a,span标签等
(1)能够安装margin-left和margin-right属性,不大概设置margin-top和margin-bottom属性
(2)行内成分border和padding可以安装,但是border-top和padding-top到页面顶部后就不再扩大

2.对此替换来分,比如input,img标签

margin,padding,border都有效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图