本文主要讲述 CSS&HTML 中最核心的几个概念，包括：HTML关键的几个元素、CSS盒模型、position、float等。这些是HTML& CSS 的基础，最常用的几个元素和属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。
HTML文档主要元素：
元素类型：
HTML 的元素可以分为两种：
块级元素（block level element）
内联元素（inline element 有的人也叫它行内元素）
两者的区别在于以下三点：
1. 块级元素会独占一行（即无法与其他元素显示在同一行内，除非你显式修改元素的 display 属性）
2.而内联元素则都会在一行内显示（行内元素初始设置 width、height不会生效，例如：span是行内元素：设置display：block。它就成了块级 元素）。
2.块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
3.块级元素可以设置 width、height 属性，而内联元素设置无效。
常见元素：
块级元素：
<div>、<li>、<h1>、<h2>、<h3>、<h4>、<p>、等。
行内元素：
具体说一下：
.demo {
width：100px;
height：100px;
}
为块级元素设置以上样式属性是有效果的，而对span这样的行内元素是不起任何作用的。
要想让<span> 也可以改变宽高，可以通过设置 display: block; 来达到效果。当 display 的值设为 block 时，元素将以块级形式呈现。
当 display 值设为 inline 时，元素将以内联形式呈现。
*行内块级元素 之所以称之为行内块是它既能设置宽高，也能不沾满一行（当display属性设置为：inline-block时，元素将呈现为行内块元素）。
display：inline-block；
HTML 代码是顺序执行的，一份无任何 CSS 样式的 HTML 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列，遇到内联元素则从左到右排列。这种无样式的情况下，元素的分布叫普通流，元素出现的位置应该叫正常位置（这是我瞎起的），同时所有元素会在页面上占据一个空间，空间大小由其盒模型决定。
CSS盒子模型：
页面上显示的每个元素（包括内联元素）都可以看作一个盒子，即盒模型( box model )。请看 Chrome DevTools 里的截图：
可以显而易见的看出盒模型由 4 部分组成。从内到外分别是：
content （内容）-> padding（内边距） -> border（边框） -> margin（外边距）。
按照正常的逻辑算下来元素的宽度（高度以此类推）应该这样计算：
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是不同浏览器（你没有猜错，就是那个与众不同的浏览器）对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度，其余都要额外算。于是你规定一个元素：
.demo{
width: 200px;
padding: 10px;
border: 5px solid #000;
margin: 20px;
}
最终呈现的是这样的：
宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;
而在 IE（低于IE9） 下，最终宽度为：
宽度 = width(200px) + margin(20px * 2) = 240px;
我个人觉得 IE 的更符合人类思维，毕竟 padding 叫内边距，边框算作额外的宽度也说不下去。W3C 最后为了解决这个问题，在 CSS3 中加了 box-sizing 这个属性。当我们设置 box-sizing: border-box; 时，border 和 padding 就被包含在了宽高之内，和 IE 之前的标准是一样的。所以，为了避免你同一份 css 在不同浏览器下表现不同，最好加上：
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
这里还有两种特殊情况：
无宽度 —— 绝对定位（position: absolute;） 元素
无宽度 —— 浮动（float） 元素
它们在页面上的表现均不占据空间（脱离普通流，感觉像浮在页面上层一样，移动它们不影响其他元素的定位）。这就涉及到另外两个核心概 念 position 和 float。
CSS定为（ position ）
第一部分：position: static；
static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。
如下HTML代码：
<div class="warp">
<div class="content"></div>
</div>
CSS代码如下：
.wrap{
width: 300px;
height: 300px;
background: red;
}
.content{
position: static;
top:100px;
width: 100px;
height: 100px;
background: blue;
}
效果图如下：
我们发现，虽然设置了static以及top属性值，但是元素仍然出现在正常的文档流中。
第二部分：position：fixed定位
fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。
html代码如下：
<div class="content">我是使用fix来定位的！！！所以我相对于浏览器窗口，一直不动。</div>
css代码如下：
body{
height:1500px;
background:green;
font-size: 30px;
color:white;
}
.content{
position: fixed;
right:0;
bottom: 0;
width: 300px;
height: 300px;
background: blue;
}
效果图如下：
即右下角的div永远不会动，就像经常弹出来的广告一样！！！
值得注意的是：fixed定位在IE7和IE8下需要描述！DOCTYPE才能支持。
第三部分： position：relative定位
相对定位元素的定位是相对它自己的正常位置的定位。
关键：如何理解其自身的坐标呢？
让我们看这样一个例子，hmtl如下：
<h1>这是位于正常位置的标题</h1>
<h1 class="pos_bottom">这个标题相对于其正常位置向下移动</h1>
<h1 class="pos_right">这个标题相对于其正常位置向右移动</h1>
css代码如下：
.pos_bottom{
position:relative;
bottom:-20px;
}
.pos_right{
position:relative;
left:50px;
}
效果图如下：
即bottom:-20px;；向下移动。 left:50px;向右移动。
即可以理解为：移动后是移动前的负的位置。
比如上例中，移动后是移动前负的bottom:-20px;即移动后是移动前bottom:20px;也就是说，移动后是移动前的向下20px；
又如：left:50px;移动后是移动前左边的-50px;那么也就是说移动后是移动前的右边的50px。
即：移动后对于移动前：如果值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。
弄清楚了relative是如何移动的，下面我们看一看移动之后是否会产生其他的影响。
html代码如下：
<h1>这是一个没有定位的标题</h1>
<h1 class="pos_top">这个标题是根据其正常位置向上移动</h1>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
css代码如下：
h2.pos_top{
position:relative;
top:-35px;
}
效果图如下：
根据之前的说法，top:-35px；值是负数，则直接换成正数，即移动后相对与移动前向上偏移了35px；我们发现于上，移动后和上面的元素发生了重叠；于下，即使相对元素的内容移动了，但是预留空间的元素仍然保存在正常流动，也就是说相对移动之后，不会对下面的其他元素造成影响。
注意：top：20px；是指子元素的margin外侧和包裹元素的border内侧之间的距离是20px。
第四部分：
position :absolute定位;
绝对定位的元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
下面举几个例子：
效果图如下：
我只在span中设置了position:absolute；而在其父元素中都没有，于是它的位置是相对于html的。
CSS浮动（float）
css浮动浅析
写在开篇：
浮动属性的设计初衷，只是为了实现文本环绕效果！
时刻牢记这一点，才能正确使用浮动。
由于浮动元素脱离文档流，它后面的块级元素会忽略它的存在，占据它原本的位置，但是这个块级元素中的内联元素，在流入页面时会考虑浮动元素的边界，它们会围绕着浮动元素。
float 顾名思义，就是把元素浮动，它的取值一共有四个：left right none inherit。
最初的 float 只是用来实现文字环绕图片的效果，仅此而已。而现在 float 的应用已不止这个。
浮动元素的特征：
1.浮动元素脱离文档流。
2.浮动元素周围的外边距不会合并。
3.浮动元素具有包裹性。
4.浮动元素具有破坏性。
浮动的规则：
首先，必须了解浮动元素包含块的概念。
浮动元素的包含块，是其最近的块级祖先元素。
规则1：左浮动的元素，左外边界不能超出其包含块的左内边界。（浮动元素不能超出其包含块的内容区）
规则2：左浮动的元素，左外边界必须是源文档中之前出现的左浮动元素的右外边界；除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面，那么这个后出现的左浮动元素会一直浮动到其包含块的左内边界。
规则3：左浮动元素的右外边界不会与右浮动元素的左外边界交叉。如果两个浮动元素加起来的宽度大于包含块的宽度，那么后一个浮动元素将会向下浮动，直到其顶端在前一个浮动元素的底端之下。）
规则4：一个浮动元素的顶端不能超出其包含块的上内边界。（浮动元素不能超出其包含块的内容区）
规则5：浮动元素的顶端不能比它之前所有浮动元素或者块级元素的顶端更高。
规则6：如果一个段落中有一个浮动图像，这个图像的顶端最高只能到该图像所在行框的顶端。
规则7：如果有多个元素连续浮动，浮动元素不能超出包含块的内容区，除非某一浮动元素本身宽度就比包含块的内容区大。
规则8：在满足以上规则的条件下，浮动元素要浮动得尽可能高、尽可能远。
关于浮动元素负外边距：
对于定宽的左浮动元素，margin-left为负，元素向左移动；margin-right为负，浮动元素原地不动，其后的行内元素向左移动；两个都为负，两种效果结合。
对于不定宽的左浮动元素，margin-left为负，元素的宽度向左扩展；margin-right为负，元素的宽度向右扩展；两个都为负，向两边扩展。
初步结论：只要显式地设置了width属性，都是定宽；只有没有显式地设置width属性，才有可能是不定宽。
通过浮动元素负外边距实现不改变DOM结构的流体布局：
想一下我们是如何将图像从文本的下面定位到文本的右边的？
第一种方法，文本宽度100%，左浮动，图像自身宽度，也左浮动；可以这样想，如果视窗的宽度足够，两个相邻的浮动元素本应该是紧挨着的，后浮动的图像开启了margin负值位移技能，向左边移动，当它向左移动的距离等于或者大于自身宽度，它整个图像都将会覆盖在文本之上。
第二种方法，文本宽度100%，左浮动，margin-right为负值；可以这样理解，普通流中，文本占据一整行的宽度，但是可以通过margin调整它在普通流中所占的空间，当margin为正，所占的空间向外边扩展，当margin为负，所占的空间向里面收缩；当margin-right为负的图像宽度时，文本右侧收缩出来的宽度刚好够图形容身。
网友评论