css

用户8090056164829
197 阅读5分钟

布局

盒模型计算

  1. W3C标准盒子（content-box）
  • 又称内容盒子，是指块元素box-sizing属性为content-box的盒模型。
  • 属性width,height只包含内容content，不包含border和padding。
  • 盒子总宽度 = margin + border + padding + width
  1. IE盒子（border-box）
  • 又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。
  • 属性width,height包含border和padding，指的是content+padding+border。
  • 盒子总宽 = margin + width(content + padding + border)

margin纵向重叠问题

相邻的元素的margin-top和margin-bottom会发生重叠 空白的<p></p>会发生重叠

      <p>aaa</p>
        <p></p>
        <p></p>
        <p></p>
      <p>bbb</p>
      
    p{
        font-size: 8px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

<p>aaa</p>和<p>bbb</p>之间距离15px

margin负值问题

  • margin-top和margin-left负值，元素向上，向左移动
  • margin-right负值，右侧元素左移，自身不受影响
  • margin-bottom负值，下方元素上移，自身不受影响

BFC理解和应用

全称：Block Formatting Context， 名为 "块级格式化上下文"

1.形成BFC的CSS条件：

  • float:（除none以外的值)
  • overflow: hidden/auto/scroll（除visible以外的值)
  • position: absolute/fixed
  • display:flex/ table-cell/inline-block

2.BFC特性：

  • BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
  • BFC就是一个隔离的独立容器，容器里的标签不会影响到外部标签
  • 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
  • 计算BFC的高度时，浮动元素也参与计算

3.BFC应用： 1.解决margin重叠的问题（添加独立BFC) 2.解决浮动高度塌陷的问题（在父级添加loverflow:hidden) 3.解决侵占浮动元素的问题（添加overflow:hidden)

float布局

image.png

圣杯布局

要求：随着页面宽度的变化，三栏布局中的中间盒子优先自适应渲染，两边盒子宽度固定不变；

需求：

  • 两边固定，中间自适应；
  • 先加载middle内容；
  • 三列等高布局；

步骤：

  1. html布局，middle中间盒子要放在content的最前部分
  2. content中间盒子都浮动，让三者在一行，出现高度塌陷，content清浮动
  3. middle宽度设为100%占满
  4. middle内容被left、right覆盖未显示，设置content:{padding: 0 200px}left和right,左右空出了200px
  5. left设置margin-left:-100%;position: relative;right:200px, right设置margin-right: 200px, 把left和right拉回来 注意： 如果某一列内容过多，文字会溢出。解决方法：等高布局 最小宽度问题：min-width:600px
// html
<div class="wrap">
  <div class="header">header</div>
  <div class="content">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</div>

// css
    .wrap {
        min-width: 600px;
    }

    .header,
    .footer {
        height: 50px;
        width: 100%;
        background-color: gray;
    }

    .content {
        overflow: hidden;
        padding: 0px 200px;
    }

    .middle,
    .left,
    .right {
        float: left;
        /* 等高布局 */
        padding-bottom: 999px;
        margin-bottom: -999px
    }

    .middle {
        width: 100%;
        background-color: burlywood;
    }

    .left {
        width: 200px;
        height: 500px;
        margin-left: -100%;
        position: relative;
        right: 200px;
        background-color: pink;
    }

    .right {
        width: 200px;
        height: 500px;
        margin-right: -200px;
        background-color: pink;
    }

双飞翼布局

要求：随着页面宽度的变化，三栏布局中的中间盒子优先自适应渲染，两边盒子宽度固定不变；

需求：据说双飞翼是玉伯大大提的，思路是：middle是鸟的身体，left和right是鸟的翅膀，先把主要的东西middle放好，再将翅膀移到合适的位置；

步骤：

  1. html布局，有头有尾，中间部分，middle中间盒子要放在content的最前部分
  2. content中间盒子都浮动，让三者在一行，出现高度塌陷，content清浮动
  3. middle宽度设为100%占满
  4. middle内容被left、right覆盖未显示，在middle中加一个内部元素middle-inner，设置其margin:0 200px，left和right,左右空出了200px
  5. left设置margin-left:-100%,right设置margin-left: -200px,把left和right拉回来
// html   middle中增加了middle-inner
<div class="wrap">
  <div class="header">header</div>
  <div class="content">
    <div class="middle">
      <div class="middle-inner">
        middle
      </div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</div>

// css
.wrap{
  min-width: 600px;
}
.header,.footer{
    height: 50px;
    width: 100%;
    border: 1px solid;
}
.content{
  overflow: hidden;
}
.left,.right{
  width: 200px;
  height: 200px;
}
.middle{
  float: left;
  width: 100%;
}
.left{
  float: left;
  margin-left: -100%;
}
.right{
  float: left;
  margin-left: -200px;
}
.middle-inner{
  margin: 0 200px;
}

技术总结：

  • 使用float布局
  • 两侧使用margin负值，以便于内容横向重叠
  • 防止中间内容被两侧覆盖不显示，圣杯布局用padding，双飞翼布局用margin

手写clearfix

.clearfix :after {
    content:"";
    display:table;
    clear:both
}
.clearfix {
    //兼容ie低版本
    *zoom:1;
}

flex布局

  • 属性决定主轴的方向（即项目的排列方向）

    flex-direction:row | row-reverse | column | column-reverse;

  • 主轴换行

    flex-wrap:nowrap | wrap | wrap-reverse;

  • flex-direction和flex-wrap结合的简写方式

    flex-flow:row nowrap;

  • 在主轴上的对齐方式

    justify-content: flex-start | flex-end | center | space-between | space-around;

  • 交叉轴对齐方式

    align-items:flex-start | flex-end | center | baseline | stretch;

  • 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

  • 子元素排列：

  • 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

    align-self:auto | flex-start | flex-end | center | baseline | stretch;

定位

  • relative:绝对定位，相对于父元素定位
  • absolute:相对定位，相对于自身定位
  • fixed:固定定位，相对于页面定位

居中对齐方式

  • 水平居中
    inline元素:text-align: center;
    block元素:margin: 0;
    absolute元素:left: 50%+margin-left:负值
  • 垂直居中
    inline元素: line-height: 等于height的值
    absolute元素:top: 50%+margin-top:负值
                transform(-50%,-50%)
                top,left,bottom,right=0+margin:auto

图文样式

line-height:继承父元素（注意：父元素line-height:%，则继承父元素计算完后结果）

响应式

  • px 一个长度单位，最常用

  • em 相对长度单位，相对于父元素，不常用

  • rem 相对长度单位，相对于根元素，常用于响应式布局

    media-query 根据不同的屏幕宽度设置根元素 font-size，
再根据根元素的相对单位设置rem
vm/vh 解决rem的"阶梯性"的问题
        windows.screen.height //屏幕高度  667
        windows.innerHeight //网页视口高度  553
        windows.body.clientHeight //body高度
   vh 网页视口高度1/100
   vw 网页视口宽度1/100
   vmax 取两者最大值
   vmin 取两者最小值

参考资料： 作者：木头房子 链接：juejin.cn/post/684490…

avatar
文章
阅读
粉丝