来了解下CSS定位、居中以及一些CSS3有意思的新特性吧

icecream_cheese

于 2023-08-09 11:12:24 发布

阅读量434

点赞数

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

本文链接：https://blog.csdn.net/aizzl97/article/details/132183948

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在做html页面时，最常用的css就有定位和居中，居中包括垂直居中和水平居中，另外如果是文本的话一般还有两端对齐方式的设置,包含单行文本和多行文本。

css定位

css最常见的有绝对定位(absolute)和相对定位(relative),另外还有 fixed、sticky、static。

position: static=>静态定位,是position的默认值，元素框正常生成，也就是没有定位时的正常显示。
position: absolute=> 是相对于元素最近的已定位的祖先元素。注意关键词，最近的已定位的，可以帮助理解一篇文中有多个已定位的祖先元素的情况。absolute会脱离文档流
position: relative=> 相对定位是相对于元素在文档中的初始位置
position:fixed=> 是相对于屏幕的可视区域定位，也会脱离于文档流。可以用于居于屏幕中间的一些tips等。
position：sticky=>是CSS3新发布的一个属性,元素并不脱离文档流，仍然保留元素原本在文档流中的位置。当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。比如设置联系人单独姓的列表头，可以让列表头始终居于该列表的头部位置。

这几个比较好理解，但是要注意使用后是否会脱离文档流。

居中

居中分为水平居中和垂直居中

水平居中

水平居中其实还要分成行内元素和块级元素，块级元素还可以分为定宽和不定宽度。

行内元素

text-align：center //这是最常见的居中方式

块级元素

定宽：

margin：0 auto；//该方法只能实现水平居中，不能实现垂直居中。但是对于absolute的元素又可以设置垂直居中，关于auto为什么能实现居中，可以点这里看我之前总结的内容。
absolute+子容器设置负margin值（绝对值是子容器宽度的一半），该方法其实还有另外写法。

不定宽

display：table; margin：0 auto; //将子元素设置为块级表格来显示（类似），再将其设置水平居中
display:absolut; left:50%; transform:translateX(-50%)//父元素设置为相对定位，子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。
子容器inline-block 父容器text-align:center,子容器是父容器里面的元素，对父容器设置居中，会让子容器居中显示。注意，text-align具有继承性，子元素中的内容同样也会居中。
display:flex; justify-content,flex布局。
父容器设置Flex布局，子元素(margin:0 auto)。

多个块级元素居中

flex+justify-content , flex布局，可以设置主轴对齐方式
inline-block+父容器text-align:center,该方法同上文不定宽中方法

浮动元素居中

1、通过父子容器都相对定位

    .box{
        float:left;           //浮动
        position:relative;
        left:50%;
    }
    p{
        float:left;          //浮动
        position:relative;
        right:50%;
    }
    <div class="box">
        <p>浮动</p>
        <p>居中</p>
    </div>

外部元素加上float，实现浮动。先让子元素跟着父元素一起向右偏移页面的一半，这个时候两个都没居中，再让子元素（也是浮动元素）相对父元素向左偏移父元素的一半，以此来实现居中。
2、flex的justify-content属性，实现水平居中

    .parent {
        display:flex;
        justify-content:center;
    }
    .chlid{
        float: left;
        width: 200px;          //有无宽度不影响
    }
    <div class="parent">
        <span class="chlid">要居中的浮动元素</span>
    </div>

绝对定位

absolute+transform

    <style>
        .child {
            position:absolute;        //子元素
            left:50%;                 //子元素移动父元素的一半宽度
            transform:translateX(-50%);  //子元素移动子元素的一半宽度
        }
        .parent {
            position:relative;        //父元素
        }
    </style>
    <div class="parent">
        <div class="child">Demo</div>
    </div>

垂直居中

absolute+负margin

#container {
    position: relative;
}
#center {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}
<body>
    <div id='container'>
        <div id='center' style="width: 100px;height: 100px;">center</div>
    </div>
</body>

父元素flex/grid,子元素margin:auto(最简单写法)

    #container {
        height: 100px; //须有高度
        display: grid;
    }
    #center {
        margin: auto;
    }

父元素flex，垂直方式是center

align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

    #container {
        height: 100vh;//须有高度
        display: flex;
        justify-content: center;
        align-items: center;
    }

absolute+transform（理解同上方水平居中之绝对定位）

    #container {
        position: relative;
    }
    #center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    <body>
        <div id='container'>
            <div id='center' style="width: 100px;height: 100px;">center</div>
        </div>
    </body>

子table+margin，父table-cell+vertical-align

父元素设置为table，子元素设为table-cell，类似于将div转为table样式。

<style>
    .parent {
        width: 400px;
        height: 400px;
        display: table-cell;
        vertical-align: middle;
        background-color: pink;
    }
    .child{
        width: 100px;
        height: 100px;
        display: table;
        margin: 0 auto;
        background-color: cyan;
    }
</style>
</head>
<body >
  <div class="parent">
    <div class="child">hello,world</div>
  </div>
</body>

两端对齐

两端对齐分单行和多行
一帮来说，如果是多行文字，一般都是前n-1行两端对齐，最后一行默认，因此对于两端对齐来说，分为单行和多行理解更好。

多行文字

justify-content有两种方式，看图理解会更好一点。

justify-content: space-around

justify-content: space-between

text-align:justify

单行文字实现两端对齐（这是主要想分享的）

此方法通过在div内部内容后面添加span元素，span元素内容为空，且padding-left为div内容想实现两端对齐的宽度，div设置为text-align：center。此方法可以实现单行文字的两端对齐，并且对于wkhtmltopdf同样有效呦 !!!

      <style>
        div {
          width: 300px;
          text-align: justify;
          background-color: aquamarine;
        }

        div>span {
          display: inline-block;
          padding-left: 300px;
        }
      </style>
      <body>
          <div class="parent">
            1 2 3 4 5 <span></span>
          </div>
      </body>

上方是单行文字，多行文字也可以实现最后一行两端对齐。

      <style>
        div {
          width: 300px;
          text-align: justify;
          background-color: aquamarine;
        }

        div>span {
          display: inline-block;
          padding-left: 300px;
        }
      </style>
      <body>
          <div class="parent">
           1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 <span></span>
          </div>
      </body>

css3增加了许多非常有效的新特性。

如css3选择器、阴影（Shadow）、transform等，了解它们对书写css代码非常有帮助，今天一起来了解一下几个比较重要的吧！

css3选择器

伪类选择器

:first-child：选取父元素中的第一个子元素的指定选择器
:last-child：选取父元素中的最后一个子元素的指定选择器
:nth-child(n)：选取父元素中的第n个子元素的指定选择器
这里n还以选择取2n+1，或者2n来选择奇数元素或者偶数元素
:disabled 选择每一个禁用的输入元素
:checked 选择每个选中的输入元素

@Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {                                                                        
     font-family: xxx;                                                
     src: url('https://..../xxx.ttf');
     font-weight: normal;                                                  
     font-style: normal;                                                   
}

圆角 border-radius

一个div有四个角，有时候不需要四个角都设置radius，css提供了选择单个角设置radius的方法

border-bottom-right-radius：   //取消右下角radius
border-top-right-radius：      //取消右上角radius
border-bottom-left-radius：    //取消左下角radius
border-top-left-radius：       //取消左上角radius
border-radius:0px              //取消radius

阴影（Shadow）

1、text-shadow属性，可实现文字阴影效果；
2、box-shadow属性，可实现边框阴影效果；

Transition 过渡效果

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property:规定设置过渡效果的 CSS 属性的名称。
transition-duration:规定完成过渡效果需要多少秒或毫秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:规定速度效果的速度曲线。

transform：2D转换效果，旋转、缩放、移动或者倾斜

transform：rotate（45deg）；//旋转方向为顺时针方向。
transform：scale（0.5）；//缩小一半
transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。
transform：skew（30deg，30deg）；//水平方向上倾斜``30``度，垂直方向上倾斜``30``度。
transform：skew（30deg）；//只在水平方向上进行倾斜，垂直方向上不倾斜。
transform：translate（50px，50px）；// 水平方向上移动``50px``，垂直方向上移动``50px``
transform：translate（50px）；//只在水平方向上进行倾斜，垂直方向上不倾斜。
transform：translate（150px，200px） rotate（45deg） scale（1.5）；//对一个元素使用多种变形的方法
//使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，
//角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。
transform：rotateX（45deg）；
transform：rotateY（45deg）；
transform：rotateZ（45deg）；
transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）；
transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；

Animation动画特效

CSS 中的动画类似于 flash 中的逐帧动画，表现细腻并且非常灵活，使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。

先了解下@keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧。
CSS 中提供了如下所示的动画属性：

animation-name：设置需要绑定到元素的动画名称；
animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
animation-timing-function：设置动画的速度曲线，默认为 ease；
animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
animation-delay：设置动画开始之前的延迟时间，默认为 0；
animation-iteration-count：设置动画被播放的次数，默认为 1；
animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
animation-play-state：设置动画是正在运行还是暂停，默认是 running；
animation：所有动画属性的简写属性。

总结

css3还添加了一些其它的比较好用的新特性，如：

弹性盒模型 display: flex;
多列布局 column-count: 2;
颜色透明度 color: rgba（0, 0, 0, 0.75）；
文字溢出 text-overflow:ellipsis;

icecream_cheese

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
来了解下CSS定位、居中以及一些CSS3有意思的新特性吧

弹性盒模型 display: flex;多列布局 column-count: 2;颜色透明度 color: rgba（0, 0, 0, 0.75）；文字溢出 text-overflow:ellipsis;
复制链接

扫一扫