前言

这只是一个前端小白总结以及记录的一些笔记,如果有错误的请提醒我更改,也可以给我一些改进的建议,大家一起加油吧 (^▽^)

浮动布局

❝

要让一个元素进行浮动，需要为该元素设置一个值为left或right的float属性。
浮动被用来将盒子（box）置于左侧或右侧，同时让内容环绕其展示。

❞

img{
    flot:left;
}

• 左侧是默认没设置任何样式,右侧是设置了浮动,使文字围绕图片;
• 一旦你对一个元素应用了浮动，所有接下来的元素都会环绕它直到内容处于它下方且开始应用正常文档流。如果你想要避免这种情况，可以手动去清除浮动。

清除浮动

• 第一种 : 给父元素添加overflow:hidden;

.container{
    overflow:hidden
}

• 第二种 : 在目标的伪元素上 兼容所有浏览器

.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix{
    *zoom: 1;//引入zoom为了兼容IE
}

水平居中

• 行内元素

.text_div{
 text-align:center;
}

• 块级元素

.text_div{
    margin:0 auto;//且需要设置父级宽度
}

• flex

.father {
    display:flex 
    justify-content: center
}//子级水平居中  或者叫主轴居中

垂直居中

• 单行文本垂直居中，行高等于高度

 .par{
   height:40px;
   line-height:40px}

• 单行文本和图片垂直居中，行高等于高度，并且设置对齐方式为middle，前提图片的高度在行高之内

  .par{ 
    height:40px;line-height:40px;
  } 
  .par .sub{
      vertical-align:middle;
  }

• translate平移

.son{
    position: relative;
    top: 50%;    
    transform:translateY(-50%)
} 

• flex (grid同理)

.father{
    display:flex
    algin-item:center
}//子级垂直居中 或者叫交叉轴居中

水平垂直居中

• position + translate

.father{
    position:resaltive;//记得父级要有宽高哦
}
.son{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

• flex 或 gird

.father{
 display: flex;
 justify-content: center;
 align-items: center;
}//子级水平垂直居中

• flex/grid + margin

 /*父盒子*/
    {display:flex}
 /*子盒子*/
    {margin:auto}

• gird 子元素self居中

/*父盒子*/
    {display:grid}
/*子盒子*/
    {align-self:center; justify-self:center}

• margin

❝

margin为减去元素宽度的一半 如元素为宽200 就-100px 0 0 -100px;

❞

.father{
    postion:relative;//记得父级要有宽高哦
}
.son{
    position: absolute;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin:-150px 0 0 -150px;
    background-color: pink;
}

网格布局 左一又三

.grid-layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'sidebar header header'
    'sidebar content content'
    'sidebar footer  footer';
  color: white;
}
.grid-layout > div {
  background: #333;
  padding: 10px;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}

<div class="grid-layout">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    Content
    <br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="footer">Footer</div>
</div>

三栏布局

❝

中间自适应 两边等宽

❞

• flex

 <style>
     .grid {
        display: grid;
        grid-template-columns: 150px auto 150px;  /* 中间可缩放 */
        grid-template-rows: repeat(3, 100px);
        grid-gap: 10px;
     }
<style>

 <div class="grid">
    <header style='background-color: blueviolet;'>Header</header>
    <aside class="sidebar-left" style='background-color: pink;'>Left Sidebar</aside>
    <article style='background-color: yellowgreen;'>Article</article>
</div>

圣杯布局 (flex)

  .container {
            resize: both;
            display: flex;
            flex-direction: column;/* 主轴从上到下 */
            height: 100vh;
        }
        .header,.footer {
            height: 75px;
            background: antiquewhite;
        }
        .content { /* 主轴从左到右 */
            display: flex;
            flex-direction: row;     
            flex:1;
            min-height: 100px;

        }
        .left,.right {
            width: 200px;
            background: pink;
        }
        .center {
            flex: 1;
            min-width: 50px;
        }

</head>
<div class="container">
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</div>

圣杯布局 (grid)

<div class="grid">
    <header style='background-color: blueviolet;'>Header</header>
    <aside class="sidebar-left" style='background-color: pink;'>Left Sidebar</aside>
    <article style='background-color: yellowgreen;'>Article</article>
    <aside class="sidebar-right" style='background-color: aquamarine;'>Right Sidebar</aside>
    <footer style='background-color: peru;'>Footer</footer>
</div>

   .grid {
        display: grid;
        grid-template-columns: 150px auto 150px;  /* 中间可缩放 */
        grid-template-rows: repeat(3, 100px);
        grid-gap: 1em;
    }
    header,
    footer {
        grid-column: 1 / 4;
    }
    /* 子级内容全部居中 */
    .grid>* {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

全屏布局

• 这个也很简单 flex和grid几行就搞定了,不过position我们也要练

html, body {
    margin: 0;
    overflow: hidden;
}
.header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 100px;
    background-color: salmon;
}

.content {
    position: fixed;
    left: 0;
    right: 0;
    top: 100px;
    bottom: 100px;
    overflow: auto;
    background-color: palevioletred;
}

.content .left {
    width: 400px;
    /* height: 100%; */
    position: fixed;
    left: 0;
    top: 100px;
    bottom: 100px;
    background-color: greenyellow;
}

.content .right {
    position: fixed;
    left: 400px;
    right: 0;
    top: 100px;
    bottom: 100px;
    background-color: blueviolet;
}

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background-color: goldenrod;

<div class="header"></div>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

等高布局(table)

• 以最高内容高度为基准来决定其他元素高度
• 如果使用flex只需要在套一个父级,使用display:flex,然后.col设置flex:1自动伸缩填满即可

.col {
    display: table-cell;
    width: 20%;
}

.col1 {
    background-color: blue;
}

.col2 {
    background-color: blueviolet;
}

.col3 {
    background-color: aqua;
}

.col4 {
    background-color: beige;
}

.col5 {
    background-color: salmon;
}

<div class="col col1">嘤嘤嘤</div>
<div class="col col2">嘤嘤嘤啊</div>
<div class="col col3">
    嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤嘤
</div>
<div class="col col4"></div>
<div class="col col5">嘤嘤嘤啊啊啊啊啊啊啊啊啊</div>

粘性布局

❝

在两个div中有一个div随着上下滚动而呈现position:fixed效果,不过他的范围只能在前后的div

❞

div{
   display: block;
}
.one{
    margin-top: 100px;
    background-color: red;
    height:600px;
}
.pink{
    height:5vh;
    background-color: #00ffff;
    position:sticky;
    top:50vh;
    bottom:20vh;
}
.two{
    background-color: #333;
    margin-bottom: 1000px;
    height: 600px;
}

<div class="one"></div>
  <div class="pink">1111</div>
<div class="two"></div>