css 基础2布局-前端学习

css布局方式是把一个个盒子放到响应的位置，有三种传统的布局方式

• 标准流
• 浮动
• 地位

1 标准流

标准流，就是按元素的默认特性默认方式排列，块级元素独占一行上下排列，行内元素左右排列

2 浮动float

 2.1  float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

2.2 浮动的特性 

•  设置了浮动会脱离标准流的坐标系
•  float不在保留原来的位置,即不会影响后面标准流的布局的
• 浮动的元素是相互贴在一起的（没有间隙），若父级宽度放不下盒子，多出的盒子会另起一行对齐。
• 浮动元素具有行内块元素特性。 任何元素都可以浮动，设置了后元素都具有行内块元素性质。
• 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽

注意

1. 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置---标准控上下，浮动控左右
2. 子元素，一般都是一个浮动集体浮动

2.3 清除浮动

 

   由于浮动脱离了原来的坐标，子元素无法像标准流一样撑开父元素的大小。浮动好比流水一样，如果没有河岸水流就四处流动，流向有河岸的父级。从而父级无法根据子元素的大小而扩展大小。如果知道子类的高度，只需设置父元素的高度与子元素一样就行。很多时候不知道子原始大小， 所以我们要清除浮动（修理河岸）。达到理想的状态即：理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高。清除浮动 clear:both

1  额外标签法（了解）

      例如<div style="clear:both"></div>，或者其他标签（如</br>等）

注意：要求这个新的空标签必须是块级元素

优点：通易懂，书写方便。 缺点：添加了无意义的标签

2  overflow(了解)

父元素设置overflow属性，将其属性值设置为hidden,auto或scroll

优点：简单，简洁 缺点：无法显示溢出的部分

3  after 伪元素法

::after css 中给父元素添加伪元素：代表：百度、淘宝、网易等

.clearfix:after {
    content: "";
    dispaly: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
      /* 兼容低版本的IE*/
      *zoom : 1; 
}

优点：html文件没有添加标签。

4  双伪元素法

父元素添加after ,before 伪元素，代表：小米、腾讯等

.clearfix:before,.clearfix:after{
   content:"";
   display:table;
}
.clearfix:after {
     clear:both;
}
.clearfix {
  *zoom:1;
}

3 定位 position

一些固定盒子的效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：

1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

3.1 定位的组成

 定位 = 模式+边移量

3.1.1 定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个值：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

3.1.2 边移量

边偏移就是定位的盒子移动到最终位置。有 top， bottom， left 和 right 4 个属性

边偏移属性	示例	描述
top	top:10px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 10px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left： 10px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 10px	右侧偏移量，定义元素相对于其父元素右边线的距离。

3.2 静态定位

选择器 {
  position: static;
}

静态定位按照标准流特性摆放位置，它没有边偏移静态定位在布局时很少用到。 

 3.3 相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

选择器 {
  position: relative;
}

特点

• 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

•  原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

3.4 绝对定位

absolute绝对定位元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。 

选择器 {
  position: absolute;
}

特点

• 如果 没有祖先元素 或者 祖先元素没有定位，则以 浏览器 为准定位
• 如果祖先元素有定位（相对、绝对、固定定位） ，则以最近一级的有定位祖先元素为参考点移动位置。

• 绝对定位不再占有原先的位置。（脱标）

• 如果父元素没有定位（相对、绝对、固定定位)，则需要在不影响给父元素布局方式的情况下添一个相对定位(子绝父相)

元素相对父元素居中的方法

 选择器 {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 120px;
            margin: -60px 0 0 -50px;
        }

• 子元素绝对定位，左上偏移50%
• 设置宽高
• margin-top= -height/2px，margin-left=-width/2px

3.5 固定定位fixed

 固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

选择器 {
  position: fixed;
}

特点

1. 以浏览器的可视窗口为参照点移动元素。
   • 跟父元素没有任何关系
   • 不随滚动条滚动
2. 固定定位不 占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定定位小技巧：固定在版心右侧位置。

1. 让固定定位的盒子 left： 50%，走到浏览器可视区（也可以看做版心）的一半位置。
2. 让固定定位的盒子 margin—left）板心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对弃了

3.6 粘性定位sticky （了解）

粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的 语法：

选择器 {
  position: sticky;
  top: 10px;
}Copy to clipboardErrorCopied

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加 top， left， right， bottom 其中一个才有效跟页面滚动搭配使用。兼容性较差， IE 不支持。

4 定位的叠放位置 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z—index 来控制盒子的前后次序（z 轴）

• 数值可以是正整数、负整数或 0，默认是 auto ，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有 z—index 属性

5 元素显示与隐藏

• display 设置为none影藏，block显示
• visibility 设置hidden影藏，visible显示

注意：

1. visibility 隐藏元素后，继续占有原来的位置。隐藏元素想要原来位置， 就用 visibility：hidden
2. 如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）

6 溢出部分显示隐藏

  

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时产生的，溢出的属性有如下。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容
scroll	超出的部分隐藏掉不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子，请慎用overflow：hidden 因为它会隐藏多余的部分。