CSS 盒子模型
in CSS笔记 with 0 comment

CSS 盒子模型

in CSS笔记 with 0 comment

CSS 盒子模型

盒子模型

页面布局有三大学习核心,盒子模型、浮动和定位,盒子模型能非常好的帮助我们布局页面。

看透网页布局的本质

网页布局过程:

  1. 先准备好相关的网页元素,网页元素基本都是盒子。
  2. 利用 CSS 设置好盒子样式,然后摆放到相应位置。
  3. 往盒子里面装内容。

盒子模型(Box Model)的组成

CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,分别是:边框、外边距、内边距和实际内容。

边框

border可以设置元素的边框,边框有三部分组成:边框宽度、边框样式、边框颜色
语法规范:

border : border-width || border-style || border-color
属性作用
border-width定义边框粗细,单位是 px
border-style边框的样式
border-color边框颜色

表格的细线边框

boder-collapse : collapse;

边框会影响盒子的实际大小

边框会额外增加盒子的大小,因此我们有两种方案解决:

  1. 测量盒子大小的时候,不量边框。
  2. 如果测量的时候包含了边框,则需要减去 width/height 的宽度。

内边距

padding用于设置盒子的内边距

值的个数表达意思
padding : 5px;代表上下左右均为 5px
padding : 5px 10px;代表上下为 5px,左右为 10px
padding : 5px 10px 20px;代表上为 5px,左右为 10px,下为 20px
padding : 5px 10px 20px 30px;代表上为 5px,右为 10px,下为 20px,左为 30px

外边距

margin属性用于设置外边距,即控制盒子和盒子之间的距离

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
外边距典型应用

外边距可以让块级盒子水平居中,但是必须满足两个条件:

  1. 盒子必须指定了宽度(width)
  2. 盒子左右的外边距都设置为 auto
    常见的写法有以下三种:
- margin-left:auto;margin-right:auto;
- margin:auto;
- magin:0 auto;

注意:以上方法是让块级元素水平居中,若要让行内元素或行内块元素水平居中,只需要给父元素添加:text-algin:center即可

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素,父元素上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:

  1. 给父元素定于上边框
  2. 给父元素定义上内边距
  3. 给父元素添加overflow:hidden
  4. 浮动、固定、绝对定位的盒子等
清除内外边距
*{
    padding:0;   /*清除内边距*/
    margin:0;    /*清除外边距*/
}

留言: