Flex经典等分布局

小李科技

已于 2022-06-03 16:14:43 修改

阅读量1.6k

点赞数

分类专栏： S1. CSS 文章标签： css css3 html

于 2022-06-03 15:33:13 首次发布

本文链接：https://blog.csdn.net/qq_35812380/article/details/125112691

版权

S1. CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了CSS布局规范，包括宽高设置、对齐方式以及颜色、字体和背景色的使用。重点讲解了如何利用display属性实现flex三栏布局，并展示了具体的代码示例。同时，博主探讨了1px边框问题，提出了通过相对定位和伪元素解决的方法，实现了平滑的1px边框效果。此外，还引入了Less的mixin来复用代码。

摘要由CSDN通过智能技术生成

CSS 书写规范

布局
宽高
对齐(水平/垂直)
颜色/字体/背景色

display : block/flex
width: xxx% ,xxx px
height: xxx px
line-height: xxx px

在这里插入图片描述

字体, 样式, 背景色


<div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>

@import './common/stylus/mixins.less';


.tab{
  // flex 三栏布局
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px; 
  	// 调用该方法,
    // border-bottom: 1px solid rgba(7,17,27,0.1);
	// 解决下边框1px
  .border-1px(rgba(7,17,27,0.1));
  .tab-item{
    flex: 1;
    text-align: center;

	
    & > a{
      display: block; // 保证a 标签变为块级元素,撑满整个父容器
      font-size: 14px;
      color: rgb(77, 85, 93);

      &.active{// a 标签 active 时候的样式
        color: rgb(240,20,20);
      }
    }
  }
}

解决下边框1px 像素问题?

mixins?
定义一个css 方法

.border-1px(@color;){
    position:relative;
    &:after{
        display:block;
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        border-top:1px solid @color;
        content:' ';
    }
}