CSS样式中的盒子模型

盒子模型概述

打开chrome的开发者工具，我们可以看到下面一张图片：

从上图我们可以看到有这么几个属性

position：定位，一旦定位后会生成一个块级框，不论该元素本身是什么类型。

常用属性值	描述
static	默认值
relative	生成相对定位的元素，相对于其正常位置进行定位
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。

其中元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

margin：外边框
外边框可以上下左右单独设置，顺序为上、右、下、左，顺时针的方向。
如：margin:3px 4px 5px 6px;位上3px、右4px、下5px、左6px。
margin：0px auto；可以使东西居中

border：边框

常用属性值	描述
border-style	样式值有none:无边框；solid:实线边框；dashed:虚线边框；dotted:点状边框；double:双线边框；hidden:与none相同，应用于解决边框冲突
border-color	边框颜色也有上下左右，顺序为上、右、下、左，顺时针的方向。
border-width	边框粗细也有上下左右，顺序为上、右、下、左，顺时针的方向。可以写关键字:thin细、medium正常、thick粗，也可以写像素px。

简写border：border-style border-color border-width，顺序随意。
单独的话可以指定一种样式来覆盖。

padding：内边框
内边框可以上下左右单独设置，顺序为上、右、下、左，顺时针的方向。
如：padding:3px 4px 5px 6px;位上3px、右4px、下5px、左6px。

element：元素本身内容
其大小有元素的本身内容大小决定，但是也可以通过width宽，height高来改变，当然，其内容会展示不全或留有空白。

盒子模型的尺寸
盒子实际高度=上下外边框高度+上下边框厚度+上下内边距高度+内容高度
盒子实际宽度=上下外边框宽度+上下边框厚度+上下内边距宽度+内容宽度

有一个问题需要注意的就是，在平常已做好的样式后，其内容变更，但是内容的大小比原来的大，会将原本的盒子宽高给撑开了，原本的样式就变样了。这时候就需要加一个box-sizing属性。
box-sizing属性：有两个值，context-box，border-box。

{
      padding：20px；
      box-sizing:context-box；//与默认的一样，往外面加padding，向外扩充。
}

{
      padding：20px；
      box-sizing:border-box；//在原来的width的基础上忘内部加padding，而且将border的厚度也往内部缩进，最终的宽度为内容的width。
}

说到盒子模型，不得不提的是一般HTML标签元素分行内元素和块级元素。
行内元素无法设置宽高，设置外边距和内边距时，也无法在垂直方面扩开，内容的高度和宽度至于内容本身大小有关。
块级元素可以设置宽高，设置外边距和内边距时，也可以在垂直方面扩开，可以设置内容的高度和宽度。
常见的块级元素有：

<div>     //定义文档中的分区或节 
<h1>      //标题1
<h2>      //标题2
<h3>      //标题3
<h4>      //标题4
<h5>      //标题5
<h6>      //标题6
<p>       //段落
<ul>      //无序列表
<ol>      //有序列表
<li>      //列表内容
<dl>      //定义列表
<dt>      //定义列表条目
<dd>      //定义列表内容
<form>    //表单
<table>   //表格

常见的行内元素有：

<a>       //超链接
<span>    //行内区分块
<em>      //强调，斜
<i>       //斜
<br>      //换行
<strong>  //强调，粗
<sub>     //上标
<sup>     //下标
<input>   //输入框

但是每一个元素都有一个属性：display。
这个属性可以将行内元素转换成块级元素，块级元素转换行内元素等。

display在盒子模型常用属性值	描述
none	此元素不会被显示。
inline	此元素会被显示为内联元素，元素前后没有换行符。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline-block	行内块元素，是行内元素，但是可以设置宽高。

本博客仅用于记录web前端学习情况