一些常见的CSS基础概念 + 盒模型

笔记一篇，备查。

盒模型：

margin：外边距
border：边框
padding: 内边框

元素的总width = margin-left + margin-right + padding-left +padding-right + 元素的width
元素的总height = margin-top + margin-bottom + padding-top +padding-bottom + 元素的height

这篇文章介绍的很详细，此处搬运大神写的教程地址：
盒模型的介绍传送门

块元素（block）

占行(自动换行， 可设置高宽)，例如：<div>，<p>,<h1>，<h1-h6>,<pre>,<label>,<table>,<form>,<li>,<ol>,<ul>等

行内元素（inline）

不占行(不自动换行，无法设置宽高)，例如：<span>，<a>，<img>，<i>，<em>，<sub>，<sup>等

行块级元素

拥有内在尺寸（可设置高宽，不会自动换行 )，例如：<button>，<input>，<textarea>，<select>，<img>
等

CSS基础概念

display的常见属性

none 隐藏元素
block 将元素设置为块级元素，元素前后会有换行符
inline 将元素设置为内联元素，元素前后没有换行符
inline-block 将元素设置为行内块元素。
inherit 从父元素继承 display 属性的值

position的定位属性

absolute
相对于 static 定位以外的第一个父元素进行绝对定位。
位置属性：“left”，“top”，“right” ， “bottom”

fixed
相对于浏览器窗口进行绝对定位。
位置属性：“left”，“top”，“right” ， “bottom”

relative
相对于其正常位置进行相对定位。

static
没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit
从父元素继承 position 属性的值。

文档流的概念

文档流：指的是文档中的对象在排列时所占用的位置。将窗体自上而下分成行，并在每行中按从左至右的顺序排列元素。

此处搬运大神写的教程
文档流的概念传送门
文档流的概念和position定位传送门