HTML-CSS布局相关元素小心得
<pre>
在这里分享给大家一些HTML-CSS的相关知识，供新人学习，老人查阅,共勉。
------DanlV
</pre>
标准文档流
网页在解析的时候，遵循从上向下，从左向右的一个顺序，而这个顺序就是标准文档流。 标准文档流 -- 》 定义了标签的特性以及网页的解析顺序 。标准文本流 -- 》 指的是网页中文字
如果想要让行内元素和块级元素不再遵循本身的特性，除了转换 （display）以外，还可以通过float和position来实现。*因为通过float（浮动） 和 position(定位) 可以让元素脱离"标准文档流"。
TIPS：
1. position 定位可以让元素即扩里文档流，也脱离文本流
2.float 让元素脱离了标准文档流，但是没有让元素脱离标准文本流
遵循规则
- 网页解析顺序 :上 - > 下 左 -> 右
- 块级元素和行内元素的规则:
1.块级元素自己霸占一行 ，不能与其他元素并列显示；可以设置宽度和高度；如果不设置宽度，块级元素会默认沾满整个父元素的宽；
2.行内元素能够与其他的行内元素并排显示；不能够设置宽度和高度，宽度是内容的宽度，高度是内容的高度； - 高矮不齐，底边对其
- 单词写满一行，自动换行
- 如果单词没有写完(没有空格)，那么单词不换行
- 一个元素摆脱标准文档流限制的三种方式
1.浮动
2.绝对定位
3.固定定位
盒子模型
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
我们把网页中任意一个元素都称之为盒子模型。
原理
内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。
属性
1.width、height指的是盒子中内容的宽度和高度
2.padding--内边距指的是内容距离盒子边框的距离 （在写css代码的时候，能够使用简写就不要使用其他的写法。）
width: 300px;
height: 300px;
border: 2px solid purple;
background-color: orange;
margin: 1px;
/*上下左右内边距都死10px*/
padding: 10px;
/*上下为10px 左右为20px*/
padding: 10px 20px;
/*上为10px 左右为20px 下为30px*/
padding: 10px 20px 30px;
/*上为10px 左为20px 下为30px 右为40px*/
padding: 10px 20px 30px 40px;
3.margin塌陷现象：两个盒子分别设置左边距，右边距，显示的结果显示值大的一个边距。
div {
width: 300px;
height: 200px;
/*display: inline-block;*/
float: left;
}
.d1 {
background-color: red;
/*margin-bottom: 20px;*/
margin-right: 20px;
}
.d2 {
background-color: blue;
/*margin-top: 30px;*/
margin-left: 10px;
}
<div class="d1"></div>
<div class="d2"></div>
4.盒子居中
.test {
width: 300px;
height: 300px;
background-color: red;
margin: 100px auto;/将左右的margin设置为auto将会居中/
}
<div class="test"></div>
浮动
浮动，让元素脱离标准文档流，float:left/right。
浮动的特性
- 元素脱离标准文档流
- 存在相互贴靠的效果
- 字围
清除浮动方案
因为浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。
而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。
解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。
父级定义height，只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
父级元素结尾处加空div标签设属性clear:both（内墙法）
-
父级元素之后加空div标签设属性clear:both（外墙法）
<style>
li {
list-style: none;
}.box1 ul li { float: left; width: 30px; height: 40px; margin-left: 10px; background-color: orange; } .clear { clear: both; } </style></head>
<body>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="clear"></div><div class="box2"> <ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> </div></body>
- 父级div定义伪类:after和zoom
<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red;
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD
}
/*清除浮动代码*/
.clearfloat:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0
}
.clearfloat {
zoom: 1
}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
父级div定义overflow:hidden，不能和position配合使用，因为超出的尺寸的会被隐藏
父级div定义overflow:auto，内部宽高超过父级div时，会出现滚动条
父级div也一起浮动，可能会产生新的浮动问题
-
父级div定义display:table，将div属性变成表格，可能产生新的未知问题
<style type="text/css"> .div1 { background: #000080; border: 1px solid red; width: 98%; /*解决代码*/ display: table; margin-bottom: 10px; } .div2 { background: #800080; border: 1px solid red; height: 100px; width: 98%; } .left { float: left; width: 20%; height: 200px; background: #DDD } .right { float: right; width: 30%; height: 80px; background: #DDD } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>
