CSS属性
许多问题可以直接引用CSS框架，例如bootstrap来解决
1.overflow 属性规定当内容溢出元素框时发生的事情
这个属性定义溢出元素内容区的内容会如何处理:滚动条，隐藏，显示在块级外等
一般默认visible
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。
2.盒子模型：(与box-sizing: border-box;)
设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。也就是说两个相同宽度的元素，当设置内外边距后，显示的实际宽度却不一样。
后来新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}这样可以确保所有的元素都会用这种更直观的方式排版。
不过 box-sizing 是个很新的属性，目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。
拓展：
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box
①content-box，border和padding不计算入width之内
②padding-box，padding计算入width内
③border-box，border和padding计算入width之内
3.定位
①static 是默认值--不被定位
任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被positioned，一个 position 属性被设置为其他值的元素表示它会被positioned
②relative----相对定位
在一个相对定位的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置不会受该元素的影响，而发生位置改变来弥补它偏离后剩下的空隙。
③fixed---固定定位
一个固定定位元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
（注意：一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流））
④absolute---绝对定位
absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”被定位的祖先元素。如果绝对定位的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。
（注意：一个“positioned”元素是指 position 值不是 static 的元素）
④clear---清除浮动
属性被用于控制浮动，定义了元素的哪边上不允许出现浮动元素
围住浮动元素，比如文字围绕图片效果
【清除浮动】
添加非浮动的清除元素：给父元素添加一个子元素，然后对该子元素应用clear样式。其中有几种方案。
第一种：添加元素
简单地在HTML中添加一个子元素div
<body>
<section>
<img src="sea.png" alt="sea">
<p>图片标题</p>
<div class="clear"></div>
</section>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</footer>
</body>
//在此，为div添加了一个类，以便于在CSS中写样式。
//css里
div.clear{
clear:left;
}第二种：clearfix规则
如果你不想添加这个纯表现性的元素，有一个更好的方法——after伪类。
首先为section添加一个类clearfix
<section class="clearfix">
<img src="sea.png" alt="sea">
<p>图片标题</p>
</section>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</footer>
//然后，再使用这个神奇的clearfix规则
//CSS里
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
//这个clearfix规则最早是由程序员Tony Aslett发明的，它只添加了一个清除的包含句点作为非浮动元素4.居中对齐---margin: auto;
#main {
max-width: 600px;
margin: 0 auto;
}使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要
设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT