CSS文档流布局以及盒子模型

老白 2个月前 136浏览 0评论

页面布局 layout

文档流(normal flow)
网页是一个多层结构,一层叠着一层。通过CSS可以分别为每一层设置样式,而我们作为用户之只看到最上面这层
在这些层中,最底下的一层被称为文档流,文档流是网页的基础。我们所创建的元素默认都是在文档流中的。
 
元素在页面中主要有两个状态:
1、在文档流中
2、不在文档流中(脱离文档流)
元素在文档流中的特点:
块元素:
  • 块元素在文档流中独占一行,块元素在页面中独占一行

  • 默认宽度是父元素的全部(会把父元素撑满)

  • 默认高度被内容撑开(子元素)

行元素:
  • 行内元素不会独占页面一行,只占自身大小;

  • 行内元素在页面中水平向右排列,如果一行之中不能容纳的下所有行内元素,则元素会换到第二行继续自左向右排列。

  • 行内元素默认的高度和宽度都是被内容撑开。


盒子模型(box model)

盒子模型(框模型):CSS将页面中的所有元素都设置为一个矩形的盒子,将所有元素设置为矩形盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置。每一个盒子都由以下几个部分组成。
 
内容区content
内边距padding
边框border
外边框margin
注意:content、padding、border决定了盒子的大小,而外边距 margin 决定了盒子的位置。

一、内容 content

内容区(content) 元素中的所有子元素和文本内容都在内容区中排列,内容区的大小由 width和height 来决定。

width、height属性用以设置内容区的宽度和高度

 

二、边框 border

边框(border)边框属于盒子边缘,边框里面属于盒子的内部,出了边框都是盒子的外部,要设置边框至少需要三个样式。 

  • 边框的颜色 border-width

  • 边框的颜色 border-color 

  • 边框的样式 border-style  

1、 border-width 有默认值,一般是3个像素(必须写,会使用各个浏览器的默认值)

border-width可以用来指定四个方向的边框宽度

  • 四个值:上、右、下、左(顺时针方向)border-width: 1px 2px 3px 4px;

  • 三个值:上、左右、下 border-width: 1px 2px 3px

  • 两个值:上下、左右   border-width: 1px 2px 

  • 一个值:上下左右(四个边) border-width: 1px 

除了border-width 还有一组 border-xxx-width,xxx可以是 top、right、left、bottom,用来单独指定某一个边的宽度

2、 border-color 用来指定边框的颜色,同样可以分别指定四个边的边框,规则和 border-width 相同

border-color 可以省略不写,如果省略了就会自动使用 color的默认值

3、 border-style 指定边框的样式,不可以不设置,因为border-style的默认值是 none(没有)

  • solid 实线

  • dotted 点状虚线

  • dashed 虚线

  • double 双实线

border 简写属性:

border  通过 设置该属性可以同时设置边框所有的相关样式,并且没有顺序要求

除了border 之外还有四个 border-xxx

  • border-top

  • border-right

  • border-bottom

  • border-left

 

三、内边距 padding

内容区和边框之间的距离是内边距

一个有四个方向的内边距

  • padding-top

  • padding-left

  • padding-bottom

  • padding-left

内边距的设置会影响盒子的大小

背景颜色会延伸到内边距上,内边距默认是透明的 transparent

一个盒子的可见框大小,由内容区、内边距、边框共同组成,所以在计算盒子大小的时候,需要将这三个加到一起计算。

padding 内边距的简写属性,可以同时指定四个方向的内边距。

 

四、margin 外边距

外边距不会影响可见框的大小,但是外边距影响的是盒子的位置。影响实际占用网页空间的大小。元素有四个方向的外边距:

  • margin-top

  • margin-left

  • margin-right

  • margin-bottom

注意:默认情况下设置 margin-right 不会产生任何效果

left 左外边距,设置正值,元素会向右边移动;top 上外边距,设置正值,元素会向下移动

元素在页面中会按照自左向右顺序排列,所以默认情况下如果设置的是 左上,移动的是元素自身。

设置其他 下和右外边距会移动其他元素,把别的元素挤开。margin-top 和 margin-left挤开别人

margin-bottom 下外边距,设置正值,下边的元素会向下移动,如果是负值元素会向相反的方向移动。

简写属性

margin 直接设置四个边的外边距


发表评论