actual combat 36 —— css样式练习

弹性盒子布局flex

常用：

- display: flex;
- flex-grow: 1：在CSS Flexbox布局中用于指定flex项目的放大比例。当flex容器的空间大于其flex项目所需的总空间时，flex-grow属性允许flex项目根据它们的flex-grow值来分配额外的空间。如果所有flex项目的flex-grow值都相同（比如都是1），那么它们将等比例地增长以填充容器的剩余空间。（简单来说：就是剩余空间的分配比例，默认是0，越大分配的越多）
- align-self: flex-start; 特殊Flex项目将在交叉轴的起始位置对齐
- justify-content: center; 水平居中文本（可选） 
- flex-direction: column; /*盒子内元素纵向排列*/
- border-bottom: 1px solid #f9f9f9; /*盒子底部加条线，1px：线大小，solid:实线，#f9f9f9：颜色*/
- font-weight: bold; /*黑体字，加粗*/
- text-decoration: none;超链接去掉下划线
- box-sizing: border-box;若盒子设定了高度或宽度，一般使用这个之后，盒子高度和宽度会变小，这个属性用于改变盒模型的计算方式。在CSS中，默认的盒模型是content-box，这意味着元素的宽度和高度只包括内容的宽度和高度，而不包括边框（border）、内边距（padding）和外边距（margin）。当你将box-sizing设置为border-box时，元素的宽度和高度将包括内容、内边距和边框，但不包括外边距。这样做的好处是，当你设置元素的宽度时，不需要再减去边框和内边距的宽度，从而简化了布局的计算。
- flex-wrap: wrap;是CSS Flexbox布局中的一个属性值对，用于控制flex容器中的子项（flex items）在必要时是否换行显示。一般给盒子内元素设置宽度，比如如果想要一行展示3个元素则设置30%，想要一行设置两个元素则设置40%
- align-items: center; 是CSS Flexbox布局中的一个属性值对，用于在交叉轴（cross axis）上对齐flex容器的子项（flex items）。作用：将flex容器的所有子项在交叉轴上的中点对齐。这意味着，如果flex容器的方向是行方向（即主轴是水平的），那么子项将在垂直方向上居中对齐；如果flex容器的方向是列方向（即主轴是垂直的），那么子项将在水平方向上居中对齐。
常用居中：
align-items: center;垂直居中
text-align: center;水平居中

三个组合：

/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 设置或检索伸缩盒子对象的子元素的排列方式 */
-webkit-box-orient: vertical;
/* 限制在一个块级元素显示的文本的行数 */
-webkit-line-clamp: 2;

网格布局grid

第一步：
display: grid;
第二步：
grid:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
    
第三步：
.item1 {
    grid-area: header;
}
.item2 {
    grid-area: menu;
}
.item3 {
    grid-area: main;
}
.item4 {
    grid-area: right;
}

.item5 {
    grid-area: footer;
}

其他样式：

grid-gap: 10px;盒内网格线粗细（不包括四周）
grid-template-columns: auto auto auto auto;如果您希望网格布局包含 4 列，则需要设置 4 列的宽度，如果所有列的宽度都是一样的，可以设置为 auto。
justify-content: 使用 justify-content 属性对齐容器内的网格。
- space-evenly;用于均匀排列每个元素，每个元素之间的间隔相等:
- space-around;均匀排列每个元素，每个元素周围分配相同的空间:
- space-between;均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点:
- center;
- start;
- end;
align-content: 属性用于设置垂直方向上的网格元素在容器中的对齐方式。
- center;
- space-evenly;
- space-around;
- space-between;
- start;
- end;
参考：https://www.runoob.com/cssref/css3-pr-justify-content.html

inline-grid和grid的区别：
1.布局方式：
grid：这个值将元素定义为一个块级网格容器。块级元素会独占一行，其宽度默认是父元素的100%，并且不会和内联元素（如、等）在同一行显示。
inline-grid：这个值将元素定义为一个内联网格容器。内联元素可以和其他内联元素（如图片、文字等）在同一行显示，其宽度不会默认占满父元素的宽度，而是根据内容自适应。
2.用途和场景：
当你需要创建一个占据全部可用宽度的网格布局，并且希望该布局不与其他内联元素混合时，应该使用grid。
如果你想要一个网格布局，但它需要和内联元素一起在同一行显示（例如，在文本流中嵌入网格），那么inline-grid是更合适的选择。

如何看到网格的线？

.home-content{
    display: grid;
    grid: 'content-left content-middle content-right';
    background-color: #2196F3;
}
.home-content>div {
    background-color: rgba(255, 255, 255, 0.8);
}

常用样式

字体

font-weight: 400; //表示设置字体的粗细为“正常”或“普通”粗细表示设置字体的粗细为“正常”或“普通”粗细。这个属性可以接受不同的值，包括关键字（如normal、bold、bolder、lighter）和数字（从100到900的整百数）。normal 的值相当于 400，表示字体粗细为普通或正常粗细。bold 的值相当于 700，表示字体加粗。

1. 鼠标悬浮选择器设置背景色和图片

.xx .xx:hover {
	background-color: #ff6700;
	background-image: url('images/right-jiantou2.png');
}

元素的背景上还会添加一个图片，这个图片通过url(‘images/right-jiantou2.png’)指定。这意味着在元素背景色的基础上，还会显示这张名为right-jiantou2.png的图片。这张图片可能是一个图标，比如一个向右的箭头，用于指示某种动作或方向，或者仅仅是作为装饰元素。
这里有一点需要注意：当同时使用background-color和background-image时，background-image会覆盖在background-color之上。因此，用户可能主要看到的是图片，而背景颜色则作为图片的背景或透明部分的填充色。
拓展：另一种使用技巧

.menu .item .nav {
	min-width: 250px;
	height: 460px;
	background-color: #fff;
	border: 1px solid #666;
	position: absolute;
	top: 0;
	left: 100%;
	box-sizing: border-box;
	/* 六行单元格平分整个区域 */
	display: grid;
	grid-template-rows: repeat(6, 1fr);
	grid-template-columns: 250px;
	/* 排列方式设置为先列后行 */
	grid-auto-flow: column;
	/* 设置隐式网格宽度 */
	grid-auto-columns: 250px;
	padding: 20px;
	/* 初始默认隐藏 */
	display: none;
}

.item:hover .nav {
	display: grid;
}

为了达到鼠标触碰才触发样式的效果可以使用以上代码。先display: none;然后使用.item:hover .nav这种选择器来给nav加样式display: grid;

添加阴影

box-shadow: 0px 0px 6px rgba(124, 128, 172, 0.3);
box-shadow: 0px 0px 6px rgba(124, 128, 172, 0.3); 是CSS中的一个属性，用于给元素添加阴影效果。这个属性接受一系列的值来定义阴影的样式，具体到这个例子中：

• 0px 0px：这两个值分别代表阴影在水平方向和垂直方向上的偏移量。在这个例子中，阴影没有在任何方向上偏移，因为它在水平和垂直方向上的偏移量都是0px。
• 6px：这个值代表阴影的模糊半径。模糊半径越大，阴影的边缘就越模糊。在这个例子中，阴影的模糊半径是6px，意味着阴影的边缘会有一定的模糊效果。
• rgba(124, 128, 172, 0.3)：这个值定义了阴影的颜色和透明度。rgba是一个颜色值，其中r、g、b分别代表红色、绿色、蓝色的强度（在这个例子中是124、128、172），而a代表透明度（在这个例子中是0.3）。所以，这个阴影的颜色是接近于蓝色的淡色调，并且有一定的透明度（30%的透明度）。
  综上所述，box-shadow: 0px 0px 6px rgba(124, 128, 172, 0.3); 这行代码的意思是：给元素添加一个在其原始位置（没有偏移）、边缘模糊半径为6px、颜色为半透明淡蓝色（rgba(124, 128, 172, 0.3)）的阴影效果。这样的阴影效果可以给元素增加一些视觉上的深度和层次感。
  参考：债务管理系统首页

字体下加下划线

textDecoration: ‘underline’

光标移动到元素变手指

cursor: ‘pointer’

ul标签去除黑点

list-style-type: none;

案例

黑马小兔鲜项目

• 首页头部导航

<!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>
        .topnav {
            background: #333;
        }
        .topnav ul {
            display: flex;
            height: 53px;
            justify-content: flex-end;
            align-items: center;
            list-style-type: none;
            margin: 0;
        }
        .topnav ul li {
            border-left: 2px solid #666;
        }
        .topnav ul li a {
            padding: 0 15px;
            color: #fff;
            line-height: 1;
            display: inline-block;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav class = "topnav">
        <div>
            <ul>
                <li><a href="./index.html">请先登录</a></li>
                <li><a href="./index.html">免费注册</a></li>
                <li><a href="./index.html">我的订单</a></li>
                <li><a href="./index.html">会员中心</a></li>
                <li><a href="./index.html">帮助中心</a></li>
                <li><a href="./index.html">关于我们</a></li>
                <li><a href="./index.html">手机版</a></li>
            </ul>
        </div>
    </nav>
</body>
</html>

债务管理系统

首页

背景颜色渐变样式

background: linear-gradient(270deg, #FFFFFF 0%, #E3EAF9 100%);

• 参数1，270deg：表示颜色渐变的方向

0deg（或360deg）表示渐变方向是从上到下。
90deg 表示渐变方向是从左到右。
180deg 表示渐变方向是从下到上（这是0deg的反方向）。
270deg 表示渐变方向是从右到左（这是90deg的反方向，也就是从左到右的镜像）。

• 参数2，#FFFFFF 0%：起始颜色白色，0%：表示渐变的起始位置，也就是渐变线的开始处。在这个点上，渐变将采用第一个指定的颜色（在你的例子中是#FFFFFF，即白色）。100%：表示渐变的结束位置，也就是渐变线的结束处。在这个点上，渐变将采用最后一个指定的颜色（在你的例子中是#E3EAF9，即浅蓝色）。
• 参数3， #E3EAF9 100%：渐变结束颜色

背景颜色阴影

box-shadow: 0px 0px 6px rgba(124, 128, 172, 0.6);

这行CSS代码定义了一个元素的阴影效果。具体来说，它包含了以下几个部分：
水平偏移量 (0px)：这个值决定了阴影在水平方向上相对于元素的位置。0px 表示阴影在水平方向上没有偏移，即阴影会紧贴着元素的右侧（对于从左到右的阅读方向来说）或左侧（取决于元素的box-shadow属性是否受到其他CSS属性的影响，如transform或direction，但通常情况下，它紧贴着元素的边缘，并且由于阴影在元素的“后面”，所以你会看到它似乎是在元素的右侧）。
垂直偏移量 (0px)：这个值决定了阴影在垂直方向上相对于元素的位置。同样地，0px 表示阴影在垂直方向上没有偏移，即阴影会紧贴着元素的底部（或顶部，取决于你如何理解“下面”这个概念，但在这个上下文中，我们通常认为它是紧贴着元素的底部边缘的）。
模糊半径 (6px)：这个值决定了阴影的模糊程度。6px 的模糊半径意味着阴影的边缘会相对模糊，从而产生一种柔和的、扩散的阴影效果。模糊半径越大，阴影就越模糊，边缘就越不清晰。
颜色 (rgba(124, 128, 172, 0.6))：这个值指定了阴影的颜色和透明度。rgba 是一个颜色函数，它接受四个参数：红色（R）、绿色（G）、蓝色（B）和透明度（A）。在这个例子中，颜色是深蓝色（由RGB值124, 128, 172定义），透明度是0.6（意味着阴影颜色会与其后面的任何内容混合，形成半透明效果）。
综上所述，这行代码的意思是：在元素周围添加一个无水平偏移和垂直偏移的、模糊半径为6px的、颜色为半透明深蓝色的阴影效果。由于阴影没有偏移，它看起来就像是紧贴着元素的边缘（实际上是元素的“后面”）的一层柔和的深蓝色半透明覆盖层。

右侧顶部栏

flex:1

在CSS中，style=“flex:1” 是一个内联样式（inline style），它用于设置元素的flex属性。flex属性是flex布局（Flexible Box Layout）中的一个简写属性，用于同时设置flex-grow、flex-shrink和flex-basis三个属性的值。
当你写flex:1时，它实际上做了以下几件事情：
flex-grow: 1;：这个值定义了项目的放大比例，默认为0，即如果存在剩余空间，也不放大。设置为1意味着如果容器中有剩余空间，该项目将放大以填充剩余空间（相对于同一容器内其他flex项目的flex-grow值）。
flex-shrink: 1;：这个值定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。设置为1意味着如果容器空间不足，该项目将缩小以适应容器（相对于同一容器内其他flex项目的flex-shrink值）。
flex-basis: 0%;：这个值定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器会计算该值，并据此分配多余空间。但是，当你使用flex简写属性并只提供一个值时（如flex:1），flex-basis的默认值会被设置为0%，除非你在简写中明确指定了flex-basis的值（如flex: 1 1 auto;）。然而，在大多数现代浏览器中，当flex简写属性只包含一个值时，这个值会被同时用作flex-grow和flex-basis的值，而flex-shrink保持为1（这是一个浏览器行为上的细微差别，但通常不会影响大多数布局）。不过，为了清晰和兼容性，最好明确指定所有三个值，或者至少了解你的目标浏览器如何处理这种情况。
因此，style="flex:1"通常意味着你希望该元素能够根据需要放大以填充额外空间，并且在必要时缩小以适应容器大小，同时其基础大小（在分配额外空间之前的大小）将由其内容决定（或者更准确地说，在没有明确指定flex-basis时，其行为可能因浏览器而异）。然而，为了最佳实践，如果你想要元素基于其内容大小来分配空间，并允许它根据需要增长和缩小，你可能想要明确设置flex-basis，比如flex: 1 1 auto;。

计时器 + 周几

• 引入moment包那批，npm i moment -s，import moment from ‘moment’
  代码：

 <div class="date_block ccc">
   <div class="rc">
     <div class="date_str">{{ dateStr }}</div>
     <div class="date_w">{{ weekStr }}</div>
   </div>
 </div>
 js
   data() {
    return {
      dateStr: moment().format('YYYY-MM-DD HH:mm:ss'),
      //星期几
      weekStr: '',
      timer: null,
    }
  },
    created() {
    this.weekStr = this.getWeekStr()
    this.timer = setInterval(() => {
      this.dateStr = moment().format('YYYY年MM月DD日 HH:mm:ss')
    }, 1000)
  },
  methods: {
      getWeekStr() { // 参数时间戳
      let week = moment().day()
      switch (week) {
        case 1:
          return '周一'
        case 2:
          return '周二'
        case 3:
          return '周三'
        case 4:
          return '周四'
        case 5:
          return '周五'
        case 6:
          return '周六'
        case 0:
          return '周日'
      }
    },
  }
  css样式：
    .date_block {
    height: 100%;
    // color: #333;
    // font-size: 1rem;
    // margin-right: 1rem;
    .date_str {
      color: #333;
      font-size: 1rem;
      margin-right: 1rem;
      margin-top: 3px;
    // margin: 0 1rem 0 0 ;
    }
    .date_w {
      color: #333;
      font-size: 1rem;
      margin-right: 1rem;
    // margin: 0 1rem 0 0;
    }
  }
// div多个元素水平居中分布
.rc{
  display: flex;
  flex-direction: row;
  align-items: center;
}
// div单个元素垂直+水平居中
.ccc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}