盒子模型

2018-09-11  本文已影响0人  心软脾气硬01

使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定

边框

  1. 要为一个元素设置边框必须指定三个样式：

border-width：边框的宽度
border-color：边框颜色
border-style：边框的样式
如果border-width指定四个值：上、右、下左
三个值：上、左右、下
两个值：上下、左右
一个值：全部
CSS中还提供了四个border-xxx-width：top、right、bottom、left

  1. 边框颜色

border-color

  1. 边框样式 border-style
    none:默认值，没有边框
    solid：实线
    dotted：点状边框
    dashed：虚线
    double：双线

内边距（padding)

  1. 指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：

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

  1. 盒子的大小由内容区、内边距和边框共同决定

盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

外边距

  1. 外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置

盒子有四个方向的外边距：
margin-top:盒子的上边框与其他盒子的距离
margin-right:右和下外边距
margin-bottom
margin-left

margin还可以设置为auto，auto一般只设置给水平方向的margin
如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto，则外边距默认就是0
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中
所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中

垂直外边距的重叠

在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

浏览器默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

    *{
        margin: 0;
        padding: 0;
    }

内联元素的盒模型

  1. 盒模型分成内容区、内边距 、边框 、外边距四个部分
    内联元素不能设置width和height
    设置水平内边距,内联元素可以设置水平方向的内边距

padding-left: 100px;
padding-right: 100px;

2.display和visibility

可选值：
inline：可以将一个元素作为内联元素显示
block: 可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素,可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
none: 不显示元素，并且元素不会在页面中继续占有位置

可选值：
visible 默认值，元素默认会在页面显示
hidden 元素会隐藏不显示

使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持

  1. overflow
    子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小
    如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示
    超出父元素的内容，我们称为溢出的内容
    父元素默认是将溢出内容，在父元素外边显示
    通过overflow可以设置父元素如何处理溢出内容：

可选值：

文档流

  1. 文档流
    文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
    元素在文档流中的特点

块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开

内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。

2.在文档流中，内联元素的宽度和高度默认都被内容撑开

  1. 浮动
    块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开
    如果希望块元素在页面中水平排列，可以使块元素脱离文档流
    使用float来使元素浮动，从而脱离文档流

可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动

文字浮动

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果
float: left;

  1. 内联元素的浮动
    在文档流中，子元素的宽度默认占父元素的全部
    /height: 100px;/
    background-color: #bfa;
    当元素设置浮动以后，会完全脱离文档流.
    块元素脱离文档流以后，高度和宽度都被内容撑开
    开启span的浮动，内联元素脱离文档流以后会变成块元素

高度塌陷

  1. 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高
  1. 解决高度塌陷
    根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的

当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC
1.设置元素浮动:使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block:可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式 overflow: hidden;

但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题

开启方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可

zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器都不支持

父元素加一个空白的div标签

清除浮动

由于受到box1浮动的影响，box2整体向上移动了100px
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能

可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素的浮动

解决高度塌陷

上一篇 下一篇

猜你喜欢

热点阅读