css04：css的布局

默认文档流

• 所有元素根据本身特性在浏览器页面中进行的排序（默认：从上到下、从左到右）

布局

• 布局规则：
  • 先进行 行级布局，再进行 列级布局

1.浮动布局

• 浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），或者让文字在图片的周围显示。

  • float：
    • none：（默认）
    • left ：向左浮动元素
    • right
    • inherit：浮动方式继承父元素

• 浮动何时停止：

  • 1.如果遇到父元素边框位置时候，就停止

  • 2.遇到其他浮动元素停止

  • 3.浮动元素不遮挡行内元素文字

• 如果浮动属性设置给块级元素，块集元素可以在一行中显示
• 如果浮动属性设置给行内元素，行内元素可以在一行中显示，并且可以设置宽高
• 清除浮动：

  • clear： （必须设置块级元素，行内元素不生效）
    • left
    • right
    • both
  • 1.给浮动元素和非浮动元素之间添加一个块级元素
    • clear
  • 2.给所有浮动元素的父元素设置伪元素选择器

    • ::after{
      display：block； //伪元素选择器是行内元素，需要使用display转化为块集
      content：url（''）;
      clear;
      }

       

2.定位布局

• 配合属性：
  • top、left、right、botto

position：

• static：静态布局（默认文档流）
• absolute：绝对定位 （根据外部参照）

  • 特点：
    • 1.会脱离默认文档流， （遮挡底层）
    • 2.默认根据body左上角进行定位
    • 3.不保留定位前空间
    • 4.如果父元素具有定位属性时，根据父元素左上角进行定位

• relative：相对定位 (根据本身定位)

  • 特点：
    • 1.不脱离默认文档流
    • 2.相对定位默认根据本身位置进行定位
    • 3.保留定位前空间

• fixed：固定定位

  • 固定定位的特点和绝对定位相似

  • 使用了固定定位的元素不会跟着滚动条滚动

• sticky：粘滞定位

  • 当没有到达定位地点时候，默认采用relative定位

  • 当到达定位地点时候，采用fixed定位

• z-index：（最好配合position中absolute使用）

  • 改变元素的堆叠顺序
    • number
      • number值越大，越靠上
      • 设置给两个使用了absolute的元素

3.伸缩盒/弹性盒

• display
  • flex；     //设置当前盒子为弹性盒子

    • 1.所有子元素自动成为父元素成员项item
    • 2.当子元素宽高尺寸超过父元素时候，默认被压缩
    • 3.当给父元素设置flex属性，所有子元素的float属性失效

  • flex-direction:设置子元素的显示位置

    • row(默认)
    • column
    • row-reverse
    • column-reverse

  • flex-wrap：子元素宽度/高度超出父元素是否换行

    • 根据x轴位置换行

• 子元素

  • flex：number； //当前子元素占据父元素剩余空间的份数

• 父元素：

  • align-items (设置垂直方向)
    • stretch ；（默认）

4.引入选项卡图标方式

①准备16×16px的ico格式的图片

② <link rel="shortcut icon" type="images/-icon" href="1.ico">