CSS学习-盒子模型

Austyn
138 阅读5分钟

盒子模型组成

盒子模型∶就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括︰边框、外边距、内边距、和实际内容

image.png

border

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

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

padding 内边距

使用

  1. padding:5px:一个值，代表上下左右都有5像素
  2. padding:5px 10px:两个值，代表上下5像素，左右10像素
  3. padding:5px 10px 20px:三个值，代表上有5像素，左右10像素，下有20像素
  4. padding:5px 10px 20px 30px:四个值，代表上下左右像素分别为5 10 20 30 顺时针方向

padding会影响盒子实际大小

解决方案与border相同

margin 外边距

水平居中

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

  1. 盒子必须指定了宽度
  2. 盒子左右的外边距都设置为auto 行内元素或者行内块元素水平居中可以给其父元素添加text-align:center

嵌套块元素塌陷

对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，则父元素会塌陷较大的外边距值

image.png

解决方案：

  1. 为父元素定义上边框
  2. 为父元素定义上内边距
  3. 为父元素添加overflow:hidden

清楚内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此，在布局前，首先要清楚下网页元素默认的内外边距

* {
    padding: 0; /*清除内边距*/
    margin: 0; /*清除外边距*/
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外编辑，但是转换为块计和行内元素就可以了

网页布局

过程

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

标准流

标准流：标签按照规定好的默认方式排列

  1. 块级元素独占一行，按从上到下的顺序排列：div hr p h1-h6 ul ol dl form
  2. 行内元素会按照顺序，从左到右排列，碰到父元素边缘则自动换行：span a em

浮动流

典型应用：可以让多个块级元素一行内排列显示 网页布局： 多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动流

浮动特性

  1. 浮动元素会脱离标准流（脱标） 脱离标准流的控制（浮）移动到指定位置（动），浮动的盒子不再保留原先的位置
  2. 浮动元素会一行内显示并且元素顶部对齐 浮动的元素是互相贴靠在一起的，不会有缝隙。如果父级宽度装不下浮动的盒子，多出的盒子会另起一行对齐
  3. 浮动元素会具有行内块元素的特性
  • 任何元素都可以浮动，添加浮动后具有行内块元素相似的特性
  • 块级元素没有设置宽度时，默认宽度和父级一样宽，但是添加浮动后，大小根据内容决定

使用

  • 先用标注流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，从而约束浮动元素位置
  • 先设置盒子大小，再设置盒子的位置
  • 一个元素浮动了，理论上其余的兄弟元素也要浮动

清除浮动

由于父级盒子在很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0，会影响到下面的标准溜盒子 由于浮动元素不再占用原文档流的位置，所以会对后面的元素排版产生影响

注意：

  • 清除浮动的本质是清除浮动元素脱离标准流造成的影响
  • 清除浮动的策略是闭合浮动，只让浮动在父和子内部影响，不影响父盒子外面的其他盒子
  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的方法：

  • 额外标签法（隔墙法）： 在浮动元素末尾添加一个空的标签。如 <div sytle="clear:both></div>

    优点：通俗易懂，书写方便

    缺点：添加许多无意义的标签，结构化较差

    注意：要求这个新的空标签必须是块级元素

  • 父级添加over-flow 父级over-flow属性值设置为hidden

    优点：代码简洁
    缺点：无法显示溢出的部分

  • :after伪元素法 给父元素添加 设置clearfix类

        .clearfix:after {
    content: "";
    display: block; /*将行级元素转化为块级元素*/
    height: 0; /*高度为0，不会对原布局产生影响*/
    clear: both;
    visibility: hidden;
}

.clearfix { /*IE6、IE7专有*/
    *zoom: 1;
}

优点：没有增加标签，结构更简单 缺点：需要额外照顾低版本浏览器

  • 双伪元素清除浮动
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

优点：代码更简洁 缺点：照顾低版本浏览器

avatar
文章
阅读
粉丝