盒模型

所有的HTML标签都可以看成矩形盒子,由width，height，padding，border构成，称为盒模型。

盒子的总宽度 = width + 左右padding + 左右border

盒子的总高度 = height + 上下pading + 上下border

width

表示盒子内容的宽度。

width属性的单位通常是px，也会涉及到 百分数、rem等单位。

当块级元素（div，h系列，li 等）没有设置width属性的时候，它将自动撑满，但这并不意味着width可以被继承。

height

表示盒子内容的高度

height属性的单位通常是px，也会涉及到 百分数、rem等单位

当块级元素（div，h系列，li 等）没有设置height属性的时候，它将自动撑满，但这并不意味着height可以被继承。

padding

padding 是盒子的那边距，即盒子边框内壁到内部文字（或者子元素）的距离

四个方向的padding，可以分别用小属性进行设置

padding 合并写法

padding: 10px 10px 10px 10px;


padding: 10px 20px 10px;


padding: 10px 20px

margin

margin 是盒子的外边距，即盒子和其他盒子间的距离。

margin 的四个方向

两个盒子之间的，margin 不会叠加，只以大的margin的值为准。

一些元素都有默认的margin，在开始制作网页的时候，要清除他们，比如 body、ul、p等

实践：盒子实现水平居中的实现方式

.box1 {
    margin: 10px auto;
}

box-sizing 属性

默认值为 content-box ， 此时的width和height 表示的是去除掉 边框和内边距后剩余的空间。

如上图，一个盒子 默认情况下， 它留给子元素的空间就是 宽300像素，高200像素的可用面积。即 width 和 height属性的区域。

box-sizing: border-box

如果添加了 如上的属性后，此时留给子元素的可用空间只有 宽270px 、高170px了。可用面积 面积 = (width - pading * 2 - border * 2) * (height - pading * 2 - border* 2) 。

也就是 width和height 就是 盒子的全部高度和宽度

display 属性

块级元素

• 独占一行，并且有宽高的区域。
• 特点：如果不设置宽高，会被内容元素自动撑满。
• 例如：div、section等。

行内元素

• 可以和其他的行内元素并排显示。
• 特点：无法设置宽高。
• 例如 span 等。

行内块

img 是特殊的行内块，他们既能设置宽度和高度，也能并排显示。

行内元素和块级元素的相互转换

将行内元素转块级元素

.clickA {
    display: block;
    width:200px;
    height: 200px;
    background-color: red;
}

我是点击

隐藏元素的两种写法

我是点击





我是点击

请关于一下啦^_^

微信公众号