http://blogread.cn/it/article/7656?f=wb
那什么是布局
不管是初学者还是老手，都知道网页是由大大小小的容器组成，或者称之为元素，这里有个点，初学者还可能会弄混的两个概念是“元素”和“标签”，拿段落来举例，段落是一种元素类型，用来表示或者包裹这个元素内容的是什么呢？是'
'当然，我们提及它的时候不会这么写，会直接说P标签。所以，你可能会说P元素或者P标签，在提及二者的时候，知道它们不等同就好。
网页本身是个二维的平面空间，有了各种元素的堆砌之后，怎么在网页里摆放它们的位置？
首先每种元素都有其“自带”的表现特性，这个“自带”，来自于浏览器(由于不同浏览器对其的标准不一，就有了后来的reset，这里不细说，想了解更多可以到关于reset那些事儿系列了解)，是否占满一行，是否有边距，是否有特定格式和大小等。如果只是把元素赤裸裸的丢到网页当中去，它也会有一个样子，只不过没那么美观(可以去看看CSS魔法的博客，已裸奔多年~)，这也能算是一种简陋的布局，所以，我对“div、table”这类的答案视之为沾边，但不准确，因为它们主要充当了包裹网页内容的容器这么个角色，是css得以施展的载体，参与了网页制作的一环，本身并没有很强的布局能力。
广义的“盒”
很多教程会把“盒模型”给单独列出来，当年我在学那些教程的时候一直好奇"盒模型"是个什么？这跟网页制作怎么扯上关系的，后来知道了之后曾奇怪为什么起那么个名字~虽然形象，但觉得并不是很助于第一印象的理解。
先来看普遍意义上的盒：
我给定义一个广义的“盒”是因为，随着技术的发展进步，和网页设计的创意无限，元素的排列不再那么规矩，形状也不会那么规则，视觉效果更丰富，我们已经越来越多的需要用到一些技巧和新的属性。
罗列下来大致有width、height、padding、margin、border、outline、box-shadow、background、:after/:before、transform、box-sizing等，至于利用canvas、svg等做出的更加匪夷所思效果的，另当别论。
布局家族
说了半天，终于要扯到正题上来，网页就是由各种容器按照一定的秩序进行摆放，那么不管是作用于它本身，还是外部兄弟元素、父子元素之间位置的，都算，哪些呢？
先看元素本身，我们知道大致分为“块级”和“行内”，这是两种基本形态——“占据整行”和“可在同一行并排放”，差不多够了，那么为什么需要float，它不是用来实现“块级元素横着放”的吗？很多人喜欢的用法，这就要说最初的设计意图——“图文混排的文字环绕”了。
除去元素本身，css的哪些是跟布局有关，你可以拿来对它进行control的？
width/height 宽/高
padding/margin 内外边距
position 定位
display 元素类型
z-index 层级
overflow 溢出处理
文本相关：text-align、text-transform、text-indent、word-wrap、white-space、line-height、vertical-align等等
书写模式：direction、writing-mode等
Multi-column、calc()、Grid、regions、shapes、Object-fit/Object-position等等。
当然，除了上面所说的这些，你可能会说，流式、自适应、响应式、弹性盒，还有什么双飞翼、圣杯之类的，这些不是吗？这就像是我问你食物有哪几种，你跟我说，有“麻婆豆腐、小葱拌豆腐、红烧豆腐、家常炒豆腐”一样，这些是菜式，它能吃，但应该归到食物种类里吗？显然不。所以，上面所列出来的这些具体的属性，也就是真正作用到元素的东西，才是最理想的答案。
把他们列出来之前，我自己也没想到有如此之多，而且还没列完。它们当中，有一些是最初的版本就支持，有一些是因为css3的出现且现在已经很好的支持，还有一些，有待继续的发展和支持。
想了解的更多，可以看css参考手册和w3cplus、css reference、webkitcss里面的相关内容。
好了，经过这么多的唠叨，就是一个从“未知”到“已知”到“熟知”，再探索“未知”的轨迹，正所谓学无止境，只是布局就说了这么多，而且远未说完。前端充满着乐趣，需要我们共同去玩耍
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
button.btnStyle, input.btnStyle {
text-align:center;
height: 30px;
width: 30px;
font-size: 14px;
border: none;
}
.center {
margin:auto;
width:70%;
}
button::-moz-focus-inner {
padding: 0;
border: none;
}
</style>
</head>
<body>
<form>
<button id="btnTest" οnclick="jianchiyixia()"> yuiyiuyiuyiheolorl</button>
</form>
<div class="center" style="color:#00FF00;">
<label>hello world</labal>
<input class="btnStyle" type="button" value="<" id="btn1"/>
<input class="btnStyle" type="button" value="1" id="btn2"/>
<input class="btnStyle" type="button" value="2" id="btn3"/>
<input class="btnStyle" type="button" value="3" id="btn4"/>
<input class="btnStyle" type="button" value="4" id="btn5"/>
<input class="btnStyle" type="button" value="..." id="btn5"/>
<input style="height: 30px;width: 30px;font-size: 14;" type="button" value=">" id="btn6"/>
<input type="text">page</input>
</div>
<div class="center" style="color:#00FF00;">
<label>hello world</labal>
<button class="btnStyle" id="btn1">12</button>
<button class="btnStyle" id="btn2">1</button>
<button class="btnStyle" id="btn3">2</button>
<button class="btnStyle" id="btn3">3</button>
<button class="btnStyle" id="btn4">4</button>
<button class="btnStyle" id="btn4">...</button>
<input style="height: 30px;width: 30px;font-size: 14;" type="button" value=">" id="btn6"/>
<input type="text" style="text-indent:10px" value="hello world">page</input>
</div>
</div>
</body>
</html>/*
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{
border:none;padding:0;
}
input::-moz-focus-inner{ border: 0;padding: 0;}
.comment_btn{
height:26px;
line-height: 22px;/*针对IE*/
width:68px;
}
button::-moz-focus-inner {
border:0;
padding:0;
}
#page a, #page strong {
display: inline-block;
vertical-align: text-bottom;
height: 66px;
text-align: center;
line-height: 34px;
text-decoration: none;
overflow: hidden;
margin-right: 9px;
backgroung: white;
}
button使用行高让文字垂直居中，但是在firefox里文字会偏下，而且点击的时候中间会有一个虚线框。button的padding和margin我都程序定义过了，我想这可能跟浏览器的私有属性有关。于是用firebug查看浏览器系统样式发现以下代码：
button::-moz-focus-inner, input[type=”reset”]::-moz-focus-inner, input[type=”button”]::-moz-focus-inner, input[type=”submit”]::-moz-focus-inner, input[type=”file”] > input[type=”button”]::-moz-focus-inner {
border: 1px dotted transparent;
padding: 0 2px;
}
button:-moz-focusring::-moz-focus-inner, input[type=”reset”]:-moz-focusring::-moz-focus-inner, input[type=”button”]:-moz-focusring::-moz-focus-inner, input[type=”submit”]:-moz-focusring::-moz-focus-inner, input[type=”file”] > input[type=”button”]:-moz-focusring::-moz-focus-inner {
border-color: buttontext;
}
都是firefox私有属性::-moz-focus-inner惹的祸。
解决方案：
button::-moz-focus-inner, input[type=”reset”]::-moz-focus-inner, input[type=”button”]::-moz-focus-inner, input[type=”submit”]::-moz-focus-inner, input[type=”file”] > input[type=”button”]::-moz-focus-inner {
border:none /*去虚线框*/;
padding:0;
}
摘自：解决firefox下button文字不能垂直居中的问题
将text-indent改为padding-left
总的来说，text-indent不影响元素的最终宽度但是有兼容性问题，padding-left在中国主流浏览器IE低版本下影响最终宽度，但在chrome和firefox下不影响宽度，但是可以通过CSS reset解决多浏览器显示不一的问题，使得他们最终都影响宽度。
text-indent和padding-left的基本区别：
padding-left基于盒模型，适用于inline和block层级的元素
text-indent基于行内排版，仅仅适用于block层级的元素，作用于block层级的元素的内部第一行文字
几乎他们所有的表现区分都是这二者的区分。
padding-left会作用于inline框或block框的左侧padding区域，会影响到content-box，而文字子节点会出现在content-box内部，因此所有文字都会左移。
text-indent会作用于block框的第一行文字。无论是文字超过容器的宽度被white-space的相应规则截断，还是文字中的回车被white-space的相应规则保留，最终导致第二行第三行第N行出现，后面的第二行第三行第N行都不会应用到相应的indent。text-indent的目的很纯净，就是为了模拟现实排版需求中的首行缩进效果。
529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
