DAY3

来陪可莉炸鱼吧

已于 2023-01-09 18:29:54 修改

阅读量238

点赞数

分类专栏：前端文章标签： css css3 前端

于 2023-01-07 00:00:44 首次发布

本文链接：https://blog.csdn.net/Sheldon_2020/article/details/128586053

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS常用布局

什么是布局？
普通文档流
块级元素、行内元素

CSS flex 布局

什么是flex?
Flex容器

常用属性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item-one">1</div>   
    <div class="item item-two">2</div>  
    <div class="item item-three">3</div>  
    <div class="item item-four">4</div>  
    <div class="item item-five">5</div>  
  </div>
</body>
</html>

.container{
  display:flex;
  border:1px solid #666;
  width: 450px;
}
.item {
  width:100px;
  background-color: #efef38;
  border:1px solid black;
  text-align:center;
  flex-shrink: 0;
}
.item-two {
 /*  剩余空间都给了2 */
 /* flex-grow:1; */
}
.item-three {
  /* 默认为一，必须先在item清零,溢出全部挤压在3*/
  flex-shrink:1;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="center"></div>
  </div>
</body>
</html>

.container {
  border: 1px solid #666;
  width:100px;
  height:100px;
  display:flex;
 //使蓝色正方形在垂直和水平居中
  align-items:center;
  justify-content: center;
}
.center{
  width:32px;
  height:32px;
  background-color:blue;
}

为什么使用flex

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="content">这是内容哈这是内容哈这是内容哈这是内容哈</div>
    <footer class="footer">这是底部</footer>
  </div>
</body>
</html>

.container {
  border: 1px solid #666;
  width:300px;
  height:500px;
  display:flex;
 flex-direction:column;
}
.content{
  //使文章内容占据全部剩余空间，从而固定底部栏在最下面
  flex-grow:1;
}
.footer{
  background-color:#999;
}

CSS定位

定位

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。 relative:相对于父容器；absolute:相对于属性不为static的祖先定位；fixed:相对于视口窗口； sticky：据用户的滚动位置进行定位。粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .body{
        widdh:500px;
        height:200px;
        margin:0 auto;
    }
    dt{
        background-color:black;
        color:white;
        padding:10px;
        position:sticky;
        top:0;
        left:0;
        margin:1em 0;
    }
    dd{
        font-size: 300px;
    }
</style>
<h1>Sticky positioning</h1>
<dl>
  <dt>A</dt>
  <dd>Apple</dd>
  <dd>Ant</dd>
    <dd>Apple</dd>
    <dd>Ant</dd>
    <dd>Apple</dd>

</dl>
<dl>
  <dt>B</dt>
  <dd>Blue</dd>
  <dd>Boy</dd>
    <dd>Blue</dd>
    <dd>Boy</dd>
    <dd>Blue</dd>

</dl>
</body>
</html>

浮动

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="col">我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动</div>
  <div class="col">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容
  我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容
  我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容
  我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
  <div class="col right">我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动</div>
  
  <div class="no-float">我不想浮动</div>
  <div class="no-float-bottom">我也不想浮动</div>
  </body>
</html>

.col{
  width: 200px;
  float: left;
  margin-right:20px;
}
.right{
  float:right;
}
.no-float {
  /* 从当前位置开始清除浮动 */
  clear: left;
  border:1px solid #999;
}
.no-float-bottom {
  border: 1px solid #999;
}