盒子模型
标准盒子模型
图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。
元素框的总宽度 = 元素（element）的width
+ padding + margin +border；
元素框的总高度 = 元素（element）的height
+ padding +margin +border。
CSS中的宽（width）=内容（content）的宽
CSS中的高（height）=内容（content）的高
IE盒子模型
CSS中的宽（width）=内容（content）的宽+（border+padding）
CSS中的高（height）=内容（content）的高+（border+padding）
注意点：许多浏览器都有自己默认的margin和padding值，我们可以通过将元素的margin和padding设置为0来覆盖原本的浏览器样式。
* {
margin: 0;
padding: 0;
}
box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css
reset中有可能会用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
即总宽度=margin+border+padding+width
(2) border-box,设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
即总宽度=margin+width
很多CSS框架，都会对盒子模型的计算方法进行简化。
(3)inherit,规定应从父元素继承 box-sizing 属性的值
关于border-box的使用：
1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课堂练习一</title>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
.out{
width: 100%;
height: 100%;
border:solid 1px red;
box-sizing: border-box;
}
.in{
height: 100px;
border: solid 2px plum;
padding: 10px;
margin: 20px;
}
</style>
<body>
<div class="out">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</body>
</html>
元素分类
块级元素：display属性取block、table、flex、grid和list-item的元素。
1.独占一行显示（width默认为100%，height为0）；
2.可以设置尺寸属性（width、height等）
常见的块级元素有：div、p、h1~h6、ul、li、ol、dd、dt、dl、table、hr、blockquote、address、pre、menu
行内级元素：display属性取inline的元素。
1.一行可以显示多个；
2. 元素的高度、宽度及顶部和底部边距不可设置；
3. 元素的宽度就是它包含的文字或图片的宽度，不可改变
4. 内联元素之间的间距问题：当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。解决方法：写在一行，之间不要有空格之类的符号。
常见的行内元素有：span、img、input、a、label、button、select、textarea、sup、sub、abbr、s、i、em、u、strong、small
行内块级元素：display属性取inline-block、inline-table、inline-flex和inline-grid的元素
1、和其他元素都在一行上；（而块状元素是另起一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
每个元素初始都会带有一些样式属性，例如：div默认的display是block，span的display是inline。我们可以在css中设置他们的display属性去改变他们的类型。
网友评论