12018-01-01-WEB预习第三天-CSS盒模型

CSS中将每一个元素都设置为了一个矩形的盒子,便于方便的页面布局。


12018-01-01-WEB预习第三天-CSS盒模型_第1张图片
盒子模型

盒子的组成部分

  • 内容区,内边距,边框,外边距。

12018-01-01-WEB预习第三天-CSS盒模型_第2张图片
内容区

12018-01-01-WEB预习第三天-CSS盒模型_第3张图片
边框

边框必须指定的三个样式

  • border-width:边框的宽度;
    • 如果指定了4个值,会分别设置给:上,右,下,左。(顺时针方向)
    • 三个值:上,左右,下;
    • 两个值:上下,左右;
    • 另外两个样式同理。
  • border-color:边框的颜色;
  • border-style:边框的样式;

大部分浏览器中,边框宽度 和 颜色都有默认值,而边框的样式默认值都为none;

使用border设置边框
同时设置4个边框
不区分 样式,颜色,宽度 的顺序。
可以使用border-top:,border-right:,border-bottom:,border-left:;分别设置四个边框。


12018-01-01-WEB预习第三天-CSS盒模型_第4张图片
内边距

内边距(padding),指的是盒子的内容区与盒子边框之间的距离。

内边距会影响盒子的可见框大小,元素的背景会延伸到内边距。

一共有四个方向的内边距,可以通过:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

来设置四个方向的内边距

盒子的大小由 内容区,内边距和边框共同决定。
使用padding可以同时设置四个边框的样式,规则和border一致。


12018-01-01-WEB预习第三天-CSS盒模型_第5张图片
外边距

外边距指的是当前盒子与其它盒子之间的距离
它不会影响可见框大小,会影响盒子的位置

四个外边距:

  • margin-top
  • margin-right
  • margin_bottom
  • margin_left

上外边距,左外边距 改变自己位置。(向左向上看齐
下外边距,右外边距 改变别人位置。

外边距可以为 负值,使元素反方向移动。

margin还可以设置为auto

  • 单独设置左,右为auto时为最大值;
  • 同时设置左右为auto时水平居中。
  • 垂直方向设置为auto,外边距默认为0;(一般不用垂直方向)

相邻的垂直外边距的重叠
垂直方向的,相邻,外边距,重叠。(即取较大值,而非取和)

父子元素的垂直外边距相邻时,子元素的外边距会给父元素。
解决方法:

  • 使其不相邻:加边框,内边距。
  • 直接使用父元素内边距调整位置(父元素本身形状会受影响)

浏览器的默认样式

浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,
所以为很多的元素都设置了一些默认的margin和padding,

而它这些默认样式,正常情况我们是不需要使用的。
往往在编写样式之前需要将浏览器中的默认的margin和padding统统去掉。

*{
    margin:0;
    padding:0;
}

12018-01-01-WEB预习第三天-CSS盒模型_第6张图片
内联元素的盒子模型

内联元素垂直padding不会影响布局,只会单纯调整大小,相邻的直接覆盖。


12018-01-01-WEB预习第三天-CSS盒模型_第7张图片
display,visibility,overflow

文档流

12018-01-01-WEB预习第三天-CSS盒模型_第8张图片
文档流

一个文档就是网页。(网页即html文档)
网页是多层结构,文档流就是最下面那层的地基。

块元素 只有在文档流中才会独占一行(自上向下排列)。

当元素的高度或宽度的值为auto时,此时指定内边距不会影响可见框的大小,而是会自动修改宽度,以适应内边距。(高度被内容撑开)

你可能感兴趣的:(12018-01-01-WEB预习第三天-CSS盒模型)