走进前端——CSS

Posted 2022-02-03 迷途の羊

前言

作者:迷途の羊 
在这里分享学习自己的经历,希望可以帮助到初学前端的旁友
成为一个更好的前端开发者
大学在读前端菜鸡  若文中有误，感谢指正

DAY4 CSS定位、CSS居中

CSS定位

CSS定位方式一共有5种，接下来我们将见识到下列定位的使用技巧：

• static默认定位
  static定位是默认定位，给该元素赋值top，bottom等属性时是不成立的，是无效的。

.outer 
  position: static;
  top: 50px;
  left: 50px;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;

.outer .inner 
  width: 100px;
  height: 100px;
  background-color: aquamarine;

    <div class="outer">
        <div class="inner">123</div>
    </div>

此时我们给outer添加一个static默认定位，但是发现，更改其位置信息却无效(top,left为更改位置)，如图所示：

• relative相对定位
  relative相对定位是我们最常使用的定位之一，携带他的元素不会脱离默认文档流，他仍然在文档之中，但是他变成了最近的<定位父级>(在这里定位父级的意思为:在使用脱离文档流的定位更改位置信息时以他作为父级元素来进行定位)。
  以relative来修改位置信息的元素其元素本身的位置仍然存在，也就是被保留了，他会占用其他元素的位置并保留自身元素的位置。

.outer 
  position: relative;
  top: 50px;
  left: 50px;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;

.outer .inner 
  width: 100px;
  height: 100px;
  background-color: aquamarine;

    <div class="outer">
        <div class="inner">123</div>
    </div>
    <p>213124</p>

如图所示，将div盒子移动后，div盒子占据了元素原有位置且占据了下面p标签元素的位置。

• absolute绝对定位
  absolute绝对定位通常来说都是搭配relative相对定位来使用，我们给父元素设置相对定位，子元素设置绝对定位，子元素即可以父元素为定位来进行脱离文档流的移动，脱离文档流的元素原有位置将不占有。

    <div class="outer">
        <div class="inner">123</div>
        <div>456</div>
    </div>

.outer 
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;

.outer .inner 
  width: 100px;
  height: 100px;
  background-color: aquamarine;

该图是正常子元素未更改为绝对定位的效果图
下图为子元素绝对定位之后的效果图

.outer 
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;

.outer .inner 
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: aquamarine;

当我们修改子元素位置后：

.outer 
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;

.outer .inner 
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: aquamarine;

效果如下所示：

• fixed固定定位
  fixed固定定位我们经常可以见到，它会固定在页面的某一位置即便是屏幕滚动它也不会改变其位置。
  例如CSDNfixed定位条：

右侧的这个固定定位即便是页面移动它也不会改变其位置。
那我们应该怎样进行操作呢：
只需要给某个元素设置position:fixed即可。

.outer 
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;

.outer .inner 
  width: 100px;
  height: 100px;
  background-color: aquamarine;

body 
  height: 2000px;

    <div class="outer">
        <div class="inner">123</div>
    </div>

可以观察右侧滚动条，即便是页面滚动元素的位置也不会改变。

• sticky粘性定位
  我们可以对某一个元素设置黏性定位，当我们的页面滚动触碰到该元素时，元素就会一直贴在对应位置上，譬如京东：
  那我们如何进行操作呢？
  同理也只需要使position:sticky;即可：

    <div class="outer">
        <div class="inner">123</div>
    </div>

.outer 
  position: sticky;
  margin-top: 300px;
  top: 0;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;

.outer .inner 
  width: 100px;
  height: 100px;
  background-color: aquamarine;

body 
  height: 2000px;

这样当我们元素触碰到top:0;时元素就会贴于顶部。

CSS居中

居中方式有很多种，下面来展示部分居中代码：

1. text-align:center:使内容文本以当前容器的宽度进行居中。
2. margin:0 auto;使当前元素水平居中。
3. 水平垂直居中：

/*方一 position定位*/
        .outer
            position: relative;
            width: 500px;
            height: 500px;
            background-color: burlywood;
        
        .inner
            background-color: coral;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        
         /*给父元素定位为relative，子元素为absolute，并给元素定位为上下左右均为0(五马分尸~~)，并设置margin为auto*/

/*方二 flex*/
        .outer
            display: flex;            
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: burlywood;
        
        .inner
            background-color: coral;
            width: 100px;
            height: 100px;
        
        /*justify-content:对行进行操作；align-items:对列进行操作*/

/*方三 absolute*/
        .outer
            position: relative;            
            width: 500px;
            height: 500px;
            background-color: burlywood;
        
        .inner
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;
            background-color: coral;
            width: 100px;
            height: 100px;
        
        /*利用绝对定位，修改top及left并将margin上和左修改为-width/2 即可，引文定位是以元素左上角来确定的*/

还有其他方法在这里不做进一步展示，以上几种方法均为常用的方法，需熟记于心~~

下期内容

CSS及js初步(暂定)

**章末语**
前端容易入门，但是需要持续不断的学习，更新自己的知识
千里之行，始于足下
喜欢文章的话可以动动小手点个赞和关注呀~~
长期更新......