前端——CSS【番外】

最新推荐文章于 2024-06-13 09:45:33 发布

帆高#

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量54

点赞数

分类专栏： CSS基础学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_73958269/article/details/130981167

版权

CSS基础学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、flex布局

1.flex布局原理

当我们给父盒子设为flex布局以后，子元素的float、clear和vertical-align属性都将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，称为flex容器，它的所以子元素自动成为容器成员，称为flex项目
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
#@ 2.flex布局父项常见属性

2.基本语法

2.1`flex-direction`设置主轴的方向

2.1.1主轴与侧轴

默认主轴就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下

2.1.2属性值

flex-direction属性决定主轴的方向

属性值	说明
row	默认值，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

注意：
主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴

2.2`justify-content`设置主轴上的子元素排列方式

属性值	说明
flex-start	默认值从头开始
flex-end	从尾部开始
center	在主轴居中对齐（水平居中/垂直居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余的空间

注意：在使用这个属性之前，务必要弄清楚主轴是哪一个

2.3`flex-wrap`设置子元素是否换行

默认情况下，项目都排在一条线上（轴线），flex-wrap属性中，默认是不换行的
如果装不下之后，会强行缩小子元素的宽度，放到父元素中

属性值	说明
nowrap	不换行
wrap	换行

2.4`align-items`设置侧轴上的子元素排列方式（单行）

这个属性是控制子元素在侧轴上的排列方式

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起，垂直居中
stretch	拉伸（默认值）

2.5`align-content`设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况，单行的情况下使用是没有效果的

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴的中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余的空间
stretch	设置子项元素的高度平分父元素的高度

2.6`flex-flow`综合属性

flex-flow属性是flex-direction和flex-wrap属性的复合属性
flex-flow: column wrap;

3.flex布局子项常见属性

3.1`flex`属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数
语法

<style>
.item{
flex:<number>;
/*default 0*/
}
</style>

3.2`align-self`控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有和其他项目不一样的对齐方式，可以覆盖align-items属性，默认值是auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch

3.3`order`属性定义项目的排列顺序

数值越小，排列越靠前，默认是0

二、溢出的文字省略号显示

1.单行文字溢出

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 400px;
        height: 100px;
        background-color: #c7c6c6;
        /* 如果文字在一行内显示不出来自动换行 */
        /* white-space: normal; */
        /* 如果文字在一行内显示不出来,也让ta强制在一行内显示 */
        white-space: nowrap;
        /* 超出的部分隐藏起来 */
        overflow: hidden;
        /* 超出的文字用省略号来代替 */
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div class="box">
      一个人有理想，还必须有实现理想的坚忍不拔的毅力，这样才能无往而不胜。让我们看看美国探险家约翰·戈达德的毅力吧，他一生确定了127个目标，现在已经实现了106个。
    </div>
  </body>
</html>

2.多行文字溢出

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 400px;
        height: 70px;
        background-color: #c7c6c6;
        /* 如果文字在一行内显示不出来自动换行 */
        /* white-space: normal; */
        /* 超出的部分隐藏起来 */
        overflow: hidden;
        /* 超出的文字用省略号来代替 */
        text-overflow: ellipsis;
        /* 弹性伸缩盒子模型展示 */
        display: -webkit-box;
        /* 限制在一个块级元素内显示的文本的行数 */
        -webkit-line-clamp: 3;
        /* 设置或者检索伸缩盒对象的子元素的排列方式 */
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <div class="box">
      一个人有理想，还必须有实现理想的坚忍不拔的毅力，这样才能无往而不胜。让我们看看美国探险家约翰·戈达德的毅力吧，他一生确定了127个目标，现在已经实现了106个。----------------------------------
    </div>
  </body>
</html>

三、margin负值的应用

让每一个盒子margin往左侧移动-1px，正好压住相邻盒子的边框
如果想要实现鼠标一经过，让该盒子的边框显示成别的颜色，提高盒子的层级即可
注意：如果没有定位，就加上相对定位，相对定位可以保留位置，反之加上z-index

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul li {
        float: left;
        list-style: none;
        width: 200px;
        height: 80px;
        background-color: #e5f759;
        border: 2px solid black;
        margin: -2px;
      }
      /* ul li:hover {
        第一种操作方法，添加相对定位，保留位置 
        position: relative;
        border: 2px solid red;
      } */
      ul li:hover {
        /* 第二种操作方法，添加z-index */
        z-index: 1;
        border: 2px solid red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </body>
</html>

四、滤镜filter

对一些图片变得模糊，颜色发生偏移的效果
语法
filter:函数（）;
例如：filter : blur(5px);blur模糊处理，数值越大越模糊

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 300px;
        background-color: #a3a2a2;
      }
      .box img {
        width: 100%;
        height: 100%;
        filter: blur(3px);
      }
      .box img:hover {
        filter: blur(0px);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="/images/register-1.jpg" alt="" />
    </div>
  </body>
</html>

五、计算盒子宽度calc

calc函数可以在声明一些CSS属性值的时候执行一些计算，括号里可以使用+，-，*，/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .dad {
        width: 400px;
        height: 200px;
        background-color: #f6b4b4;
      }
      .son {
        width: calc(100% - 50px);
        height: 150px;
        background-color: #ecce9e;
      }
    </style>
  </head>
  <body>
    <!-- flag是需要我们的子盒子永远永远都比我们的父盒子宽度小50px -->
    <div class="dad">
      <div class="son"></div>
    </div>
  </body>
</html>