三、CSS布局

常用布局方法

  • table表格布局
  • float浮动+margin
  • inline-block布局
  • flexbox布局

表格布局

设定元素 display:table,display:table-row,display:table-cell,可模拟出表格的行和单元

盒模型

设定的宽度和高度只对content生效,盒子占用的空间是margin+border+padding+content


三、CSS布局_第1张图片

display/position

  • 确定元素的显示类型
    • block 有独立宽高。默认占据一行
    • inline 像文本一样,不会有独立宽高
    • inline-block 对外inline,对内block,可以设置宽高,但是和别人在一行,可以通过vertical-align修改和别人的对齐方式
  • 确定元素的位置
    • static 按照文档流布局
    • relative 相对定位,偏移相对元素本身,不会改变占据的空间
    • absolute 绝对定位,脱离文档流,它相对于最近的absolute/relative进行定位
    • fixed 相对于可视区域固定
  • 层叠
    • 默认按照先后顺序层叠
    • z-index设置层叠(定位为absolute/relative/fixed可设置,值越大,越在上,用于遮罩等)

flexbox布局

  • 弹性盒子
  • 盒子本身就是并列的
  • 指定宽度即可

float布局

  • 元素浮动,脱离文档流,但不脱离文字流(如图所示,两个元素重叠,但是文字不会占据float的元素位置---形成文字环绕效果)


    三、CSS布局_第2张图片
  • 对自身的影响

    • 形成块(BFC)---行内元素也会变得可以设置宽高
    • 位置尽量靠上
    • 位置尽量靠左(float:left)
    • 宽度足够尽量往左,不够就会往下掉
  • 对兄弟的影响

    • 上面贴非float元素
    • 旁边帖float元素
    • 不影响其他块级元素位置
    • 影响其他块级元素内部文本
  • 对父级元素的影响

    • 从布局上"消失"

    • 高度塌陷

      • 父元素加over-flow:auto/hidden
      • 通过父元素增加after伪元素
      container::after{
          content:'';
          display:block;
          visibility:hidden;
          clear:both
      }
      
  • float两列/三列布局

// 两栏布局
.left{
    width:200px;
    float:left;
    height:800px
}
.right{
    width:100%
    heigth:800px;
    margin-left:200px
}
// 三栏布局
.left{
    width:200px;
    float:left;
    height:800px
}
.right{
    width:200px
    heigth:800px;
    margin-left:200px
}
.middle{
    width:100px;
    margin-left:200px;
    margin-right:200px;
    heigth:800px
}
//浮动先行

inline-block布局

  • 像文本一样排列block
  • 没有清除浮动等问题
  • 需要处理间隙(因为对外inline,就像文字,文字和文字之间就会有间隙)

解决方案

  1. 父元素font-size设置为0,子元素重新设置font-size
.container{
    width:800px;
    height:200px;
    font-size:0;
}
.left{
    font-size:14px;
    background:red;
    display: inline-block;
    width:200px;
    height:200px;
}
.right{
    font-size:14px;
    background:blue;
    display: inline-block;
    width:600px;
    height:200px;
}

2.子元素不加空白

// 重点 右

响应式布局和设计

  • 在不同设备上正常使用
  • 一般主要处理屏幕大小问题
  • 主要方法
    • 隐藏+折行+自适应空间(pc上广告栏侧边栏在手机端隐藏;折行就是pc里面一行内容,在移动端分多行)
    • rem
    • viewport
    • media query
// 第一步


// 媒体查询
@media (max-width: 640px){
    .left{
        display: none;
    }
}

// rem单位,一个rem等于设置的font-size的值
// 通过媒体查询对不同大小屏幕设定不同html的font-size值
html{
    font-size: 20px;// 1rem
}
// 范围大的放在上面
@media (max-width: 375px){
    html{
        font-size:24px;
    }
}
@media (max-width: 320px){
    html{
        font-size:20px;
    }
}

你可能感兴趣的:(三、CSS布局)