CSS学习笔记--盒模型，块级元素和行内元素的区别和区别_html/css_WEB-ITnose

今天本来打算根据自己的计划进行前端自动化的学习的，无奈早上接到一个任务需求需要新增一个页面。自从因为工作需要转前端之后，自己的主要注意力几 乎都放在JavaScript上面了，对CSS和HTML这方面其实基础真的很差，今天在写页面的时候就被浮动啊、内外边距啊这些耽误了不少时间。

反思一下，自己确实在这些基础方面的不足很多，所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法。其中可能中会有JS、CSS、HTML各方面的，我会把自己每一天学到的内容都记录一下，辅助自己打好基础。

今天在码代码的过程中记录了几个问题，这几个问题自己确实也是迷迷糊糊答不上来的：

1.盒模型到底是啥？肯定不是简单的div..

2.行内元素和块级元素的区别和他们的特点是什么？

3.CSS的定位机制主要有哪几种？

 

第一个问题：盒模型到底是什么？（下面是我查资料看书自己总结的）

盒模型是CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的属性，我在后面详细介绍。

盒模型的概念明白了，就该注意盒模型的种类了

目前有：标准盒子模型和IE盒子模型 2种盒模型。他们各自长这样：

 

根据上图可以看出他们的不同：

标准盒模型：元素的width和height = content

IE盒模型：元素的width和height =( content+border+padding )

因为存在这样的差异，所以要满足跨浏览器的时候就会比较麻烦。当然两种方式肯定是标准盒模型比较好，这里有一个解决跨浏览器的方案：

在网页顶部增加DOCTYPE的声明：

    <p><br>这样会使所有浏览器按照W3C标准盒模型去解析页面元素，就满足了跨浏览器的要求了。</p>    <p>上面还提到了盒子模型是有空间的，主要表现在组成盒子的各个部分的层次不同。他们从上到下的顺序是</p>    <p><strong>border----->content、padding----->background-image----->background-color----->margin</strong></p>    <p>所以在处理页面元素的样式时还需要注意到这点。</p>    <p>第二个问题：行内元素和块级元素的区别和他们的特点是什么？总结如下：</p>    <p><strong>块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.</strong></p>    <p><strong>行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.　另外</strong></p>    <ol>         <li><strong>块级元素可以设置width,height属性.</strong></li>     <li><strong>行内元素设置width,height属性无效，它的长度高度主要根据内容决定.</strong></li>     <li><strong>块级元素即使设置了宽度,仍然是独占一行.</strong></li>     <li><strong>块级元素可以设置margin和padding属性.</strong></li>     <li><strong>行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.</strong></li>     <li><strong>块级元素对应于display:block.</strong></li>     <li><strong>行内元素对应于display:inline.</strong></li>    </ol>    <p>块级元素常见的有：<strong>div</strong>......行内元素常见的有：<strong>a</strong>，<strong>span</strong></p>    <p>如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。</p>    <p>第三个问题：CSS的定位机制主要有几种？</p>    <p><strong>1.标准文档流形式（自上向下自左向右）</strong></p>    <p><strong>2.浮动float（主要针对块级元素设置）</strong></p>    <p><strong>3.绝对定位。</strong></p>    <p>怎么样，是不是又有问题了。。。浮动是什么？绝对定位又是什么？人生真是一场场问与答啊！这两个问题明天解决。</p>    <p>2016年1月8日</p>    <p>不积跬步，无以至千里</p>    <p> </p>    <p>PS：我查阅的大部分资料都是来自于网络，如有侵权，请联系我删除</p>      <p class="sycode"></p>   <p class="sycode"></p>   <p class="sycode">       </p><p class="sycode"></p>    <p class="sycode"></p>    <p class="sycode">        </p>    <p class="sycode"></p>    <p class="sycode"></p>