7.position positioning static (static) relative (relative positioning) Absolute (absolute positioning) Fixed (fixed)
margin (margins): used to control the distance between the element by element, the basic purpose is to control the margin space around the spacer element
<style>
body {
margin: 0;
}
.a{
width: 50px;
height: 50px;
color: #FF0000;
margin: 10px 10px 10px 10px;
border: 2px solid;
}
.b{
width: 50px;
height: 50px;
color: pink;
margin: 10px 20px 30px 40px;
border: 2px solid;
}
</style>
<div class="a"></div>
<div class="b"></div>
result:
<style>
.a{
border: 2px solid red;
width: 50px;
height: 50px;
margin-left: 50px;
}
.b{
border: 2px solid black;
width: 50px;
height: 50px;
}
</style>
<div class="a"></div>
<div class="b"></div>
result:
Supplementary padding commonly used shorthand way:
-
A, for the four sides;
-
Providing two, one for the first - next, the second for left - right;
-
If three provided, for the first, second for left - right, for the third;
-
Providing four parameter values, will be the - Right - lower - left order to act on the four sides;
Filling in the 3.padding
<style>
.a{
border: 2px solid red;
width: 50px;
height: 50px;
/*margin : 5px 5px 5px 5px;*/
padding: 5px 5px 5px 5px;
}
.b{
border: 2px solid black;
width: 50px;
height: 50px;
}
</style>
<div class="a"> div</div>
<div class="b">div</div>
结果:
只要是页面布局 都会用到浮动
在 CSS 中，任何元素都可以浮动。
<style>
.a{
border: 2px solid red;
width: 30px;
height: 30px;
float: left;
}
.b{
border: 2px solid black;
width: 30px;
height: 30px;
float: left;
}
</style>
<div class="a"> div</div>
<div class="b">div</div>
注意:使用浮动有他的好处但是他也会带来弊端，如果当上图两个div浮动起来了外边的边框就会缩起来
比如说 这两个div在你的口袋中，你把这两个div拿了出来放在口袋扣处，这个口袋就会鼓不起来了
.clearfix:after {
content: "";
display: block;
clear: both;
}
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 | |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
-
-
overflow-x（设置水平方向）
-
overflow-y（设置垂直方向）
当你内容超出了你标签的宽和高的时候就会产生溢出的状况:
#解决方法（overflow）
#解决方法（overflow）
<style>
.d1{
border: 2px solid black;
width: 50px;
height: 50px;
overflow: auto;
}
</style>
```
```html
<div class="d1">
<span>dbhaseifhgweofheroifgherktghedruoghdroghdrtoighdrog</span>
</div>
static(静态的)
相对定位是根据自身的原本位置进行偏移。
<style>
.q1{
border: #FF0000 1px solid;
width: 100px;
height: 100px;
position: relative;
left: 100px;
}
.q2{
border: #0000FF 1px solid;
width: 100px;
height: 100px;
}
</style>
<div class="q1"></div>
<div class="q2"></div>
absolute（绝对定位）
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
fixed（固定）
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
脱离文档流:
1.浮动
2.绝对定位
3.固定定位
不脱离文档流:
1.相对定位
<style>
/*body {background-color: darkgray}*/
.a2{
background-color: darkgray;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.a3{
width: 200px;
height: 200px;
background-color: #eeeeee;
position: fixed;
top: 50px;
left: 50px;
z-index: 1000;
margin-top: 250px;
margin-left: 50%;
}
</style>
<div class="a2"></div>
<div class="a3"></div>
