浮动和定位

作者: INGME | 来源:发表于2017-11-23 20:20 被阅读0次

css定位
CSS 定位
CSS 定位 (Positioning)
CSS定位
浮动和定位
浮动和定位
浮动和定位
浮动和定位
浮动和定位
浮动和定位

1.盒子模型

1.box-sizing:border-box;
  设置padding,和border,它的宽度还是会保持不变

  box-sizing:content-box;(默认)
  当设置padding和border时宽度会发生改变

  总宽度=width+border+padding

2.浮动和定位

1.浮动（float）

  目的:为了让元素并排显示
  
a.float:right
   当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

994496-20160824111555745-1752958410.jpg

b.float:left
   当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

994496-20160824111654651-90677791 (1).jpg

2.定位（position）

 position:absolute | relative

 a.相对 定位（relative）

 postion:relative
    被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

 b.绝对定位（absolute）

 position:absolute
 　　相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。
　　 绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序

  都通过left,top,right,bottom移动

  z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素

  ***当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度

   父元素给position:relative
   子元素给position:absolute

3.清除浮动

1.清除浮动的方法

  (1)给下面的兄弟元素给clear:both;

  (2)给父级加overflow:hidden;

  (3)用伪元素,给父级内容生成
   .row:before{
    display:table;  
    content:””;     
    }
   .row:after{
    display:table;
    content:””;
    clear:both;
    }

3.CSS样式的引入方式

1.外部样式表

<link rel="stylesheet" type="text/css" href="/c5.css">

2.内部样式表（位于 <head> 标签内部）

  <style>
  p{color:pink;font-size:16px}
  </style>

3.内联样式（在 HTML 元素内部）

  <p style=”color:pink;font-size:16px”>hello world</p>

4.绝对路径和相对路径

1.绝对路径：从盘符开始的路径

  <img src="D:/images/down.jpg" alt=""/>

2.相对路径：相对当前文件所在的路径

   同级目录    src='down.jpg'

   下一级目录 src='images/down.jpg'

   上一级目录 src='../down.jpg'