替换元素 非替代元素

替换元素

浏览器根据元素的标签和属性来决定具体显示的内容
而这些元素本身没有什么内容，比如，
img、input、textarea、select、object都是替换元素

非替换元素

块级元素 行内元素

元素宽度在不设置的情况下，是它本身父容器的100%
块级元素独占一行
块级元素的height,width,padding,border和margin都可以设置的

1. 好像只要设置了浮动的元素自动转换成了块级
2. 设置了position:absolute，与position:fixed也会转换成块级
3. 直接用display:block

典型的块级元素

<div>、<p>、<h1>到<h6> <ul> <pre> <li>

典型的行内元素

<a>、<span>、<strong> (非替换)
<img> <input> (替换)

本来以为行内元素都不能设置长宽，后来无意看到这个,下面摘自这个文章

行内元素也就分为行内替换元素img input,与行内非替换元素span a…对于二者css修饰起来是有差别的。

• 行内非替换元素：其宽高设置无效， 对于内外边距，边框，可以设置，但是垂直方向的设置并不会影响文档流布局，所以设置垂直内外边距是没有效果的，垂直边框，我们是看得见，但是垂直边框并不占据文档流 。所以上面的行内元素设置了宽度为10px的边框，并不会导致下面元素的向下移动。
• 行内替换元素，除了具备行内元素同行并列的特点，他可以设置影响文档流布局的内外边距以及宽高。 且设置高度等同于设置行高，会垂直居中
• line-height 行内非替换元素虽然不具备宽高，但是可以利用line-height来设置高度，但是奇葩的是，虽然行高可以影响行内元素的文档流布局，但是，其边框依旧会包裹其内容，忽略行高带来的上下留白。
• margin 行内元素的边距，不会合并（替换非替换）。不同于块级元素，会合并上下，左右边距。

怎么个差别呢(这，，不是很明显嘛)

浮动

为什么要使用浮动

我理解的通常意义上我们使用float就是，让一行显示多个div这样子的块级元素
为了显示那种方块列表的效果

All elements have a default display and most of the time that default is exactly what you want. In fact when you choose to use a div, it’s mainly because of it’s default display value of block.

那为什么我们不使用行内元素呢，而不使用块状元素来达到这个效果呢，因为块状元素有height,width,padding,border和margin

Block level elements are laid out according to the box model, where each block has a width and height, as well as vertical and horizontal padding, border, and margin.

但是

Blocks are displayed vertically one after the other, with the distance between them depending on the margins set.
就是说虽然能实现是一个个我们需要的块，但他会独占一行(display vertically)，所以不能实现我们一行几个块，一行几个块，比如实现5*2的一个商品展示区的效果

而我们的行内元素，虽然可以实现，一个接一个，即不独占一行，大家可以挤一挤(display horizontally)，但，他不像块级元素,能设置height,width,padding,border和margin

Inline elements are displayed horizontally and don’t follow the box model. Horizontally their padding and margin is respected, but not so vertically. The heights of inline boxes are set according to the rules of line-height calculations. For the most part that will mean the height of the containing block.

这个时候就是有一个inline-block,他就能display horizontally(就是横着排一排)，还能设置宽高边距之类的

我们说的是浮动啊，浮动
我们float的是block元素
这个浮动是脱离了文档流，所以飘在自己原来所处的位置(这里是说竖直方向)的正上方(z轴正上方的样子),
这样子的话，原来在自己下面(竖直方向)的元素会浮动上来，就是无视float了的元素(脱离了标准流)
所以这个时候其实自己可能盖住原来竖直方向在自己下面的元素或者盖住部分，毕竟自己是飘着的嘛
而水平方向可以通过float的值是left还是right，来飘到这一行的左边还是右边

这里注意，当浮动元素上面的元素是文档流里的元素时候，元素float之后不会改变自己的竖直位置
但当自己前面一个元素也是float时候，也会跟上去

[block1]
[block2 float:left]

对，大概就是这个意思吧

[block1 float:left] [block2 float:left]

浮动的副作用

在网上看到了浮动的副作用

1. 背景不能显示
   由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2. 边框不能撑开
   如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3. margin padding设置值不能正确显示
   由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
4. 有高度塌陷的问题，这个时候要清除浮动

清除浮动

为什么要清除浮动

1. 上面说到两个float的元素，还是会跟着在一起，这时候想要block2到block1下一行的话，就要给block2一个clear:left,意思是清除block2左边的浮动元素，因为是block2左边不能有东西在浮动所以block2就自己下来一行了,这个应该是解决高度塌陷的问题吧,把由于高度不一造成的不该上来的元素再挤下去
2. 是为了把父元素重新撑起来??

是这样子的两个作用吗

在word里就有浮动，是为了文字环绕图片的效果，那么浮动是会影响文本内容的咯

浮动可以做水平的菜单，这个时候比如是<ul>里面套着<li>,要实现效果一定是<li>要float,但由于<li>浮动了，那就撑不起来父元素<ul>,这个时候，父元素的background-color之类的就没啥用了，所以这个时候要父元素也float

细节还需要再继续然后再看下，现在有其他事情要做啊，TAT

在网上查找了一下，除了clear还有其他办法让父元素重新撑起来
清除浮动:

1. clear:both

   <div id="father">
    <div class="son"></div>
    <div class="son"></div>
    <div class="clear"></div>   <!--新增的一个元素，没有语义-->
   </div>
   

   这里的clear是

   .clear {
    clear:both;
   }
   

   是新增了一个clear:both的元素来实现的

2. overflow:hidden
   这个我以前没用过，我只会前面那个其实
   只要给父元素设置一个overflow:hidden就可以了

inline-block

既然我的inline-block既可以形成盒模型，又能水平排布，那我还为什么要使用浮动呢
这个还没查到
不过发现了这个inline-block元素间间距去除办法

然后还有应不应该使用inline-block代替float

大佬有这样一句话

就是每一行所有的inline元素和inline-block元素会共同形成一个line boxes，这个line box的高度由里面最高的元素决定。所以，即使inline-block属性的列表元素高度异常，撑开的是整个line boxes的高度，因而，不会与下一行的列表元素发生错位

看起来就是说inline-block不会有高度塌陷的问题

inline-block和float的区别

1. float会脱离文档流,而inline-block不会
2. inline-block会导致一个元素见出现空白间隙的问题
3. inline-block可以轻松地做一个水平居中只通过text-align
4. inline-block可以更好实现垂直对齐，就是前面说的float那个高度塌陷的问题

大佬说道

• 使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。
• 使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。

所以其实我们常常做的商品展示列表和水平菜单，正确的使用方式是使用inline-block
而只有在要做文字环绕图片的时候才使用float

positioning schemes

据说有三种

Normal flow – In CSS 2.1, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.

Floats – In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

Absolute positioning – In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

1. 正常流(我们常常说的文档流)
2. 浮动
3. 绝对定位

定位

static

如果没有明写出来，好像，，，都是static

relative

相对定位，比较简单，不脱离文档流，所以原来的占据的位置还在，只是相对于自己原来的位置进行移动

absolute

这个，额，比较复杂,也会脱离文档流
相对于第一个不是static的父元素进行定位
所以我们常常看到我们把absolute的父元素设置成relative，但不设置父元素移动
具体比较复杂，以后填坑

fixed

相对浏览器窗口定位,所以会脱离文档流

inherit

从父元素继承一下子

综上，是absolute和fixed,会脱离文档流
另外，我们前面说到的float也会脱离文档流

负外边距

line box 和 block box

一直没有注意，盒模型有两种？？
这部分参考这个
这什么鬼
好像没怎么看懂

rem 和 em

rem => font size of the root element => 相对于根元素
em => font size of the element => 相对于父元素
具体参考这里

布局

参考这里和这里

参考

http://vanseodesign.com/css/display-property/
http://vanseodesign.com/css/understanding-css-floats/
https://segmentfault.com/a/1190000005155084 (CSS 盒模型Block box与Line box)