day13

最新推荐文章于 2024-09-15 10:24:49 发布

ILove_bugs

最新推荐文章于 2024-09-15 10:24:49 发布

阅读量82

点赞数

本文链接：https://blog.csdn.net/ILove_bugs/article/details/120075100

版权

css html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

弹性盒子

弹性盒子是css3新的布局模式

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器的子元素进行排版、对齐和分配空间。

应用场景 : 移动端

display: flex/inline-flex

让当前盒子成为弹性盒子,控制子元素(项目)的布局,让子元素(项目)沿着主轴的方向进行对齐 ,默认的主轴是x轴 ,子元素类似于行内块元素（没有间隙）,子元素的float,clear,vertical-align属性将失效。

flex-direction

设置主轴的方向

row(x轴)

column(y轴)

row-reverse 反转x轴

column- reverse 反转y轴

备注: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外一边就是交叉轴（侧轴）。

justify-content

设置主轴的对齐方式

flex-start : 主轴顶端对齐

flex-end : 主轴的末端对齐

center 居中对齐

space-around : 平均分配

space-between :两端对齐

space-evenly：项目与容器，项目与项目之间距离都相等

align-items

设置交叉轴（侧轴）的对齐方式

flex-start : 侧轴顶端对齐

flex-end : 侧轴的末端对齐

center 侧轴居中对齐

stretch : 如果子元素没有设置高（auto）,默认子元素的高会拉伸,和父元素的高一样

baseline 基线对齐

flex-wrap

控制子元素折行

nowrap 默认值(不折行)

wrap 折行

wrap-reverse 反转折行

备注 : flex-flow : flex-direction flex-wrap,的简写

align-content (扩展)

折行, 行与行之间有间隙,去除间隙 ,控制侧轴对齐方式（与flex-wrap:wrap）搭配使用

flex-start：顶端对齐，没有行间距

flex-end：底对齐，没有行间距

center 居中，没有行间距

space-between：两端对齐，中间自动分配

space-around：自动分配距离

align-self

调整自身在侧轴的对齐方式

flex-start

flex-end

center

stretch

order

定义项目的排列顺序。数值越小，排列越靠前，默认值为 0

flow-grow

定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

flex-shrink 属性

定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

calc

语法 : calc(表达式)

注意：使用的时候运算符前后需要加空格

例如：calc(100% - 300px)

less

less预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加了一些编程的特性。

将css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

使用css预处理器语言，可以让css更加简洁，适应性更强，可读性更佳，更容易代码的维护等诸多好处。

less定义变量

@变量名 : 值;
@likeColor:#0f0;
@fangX:left;

.box{
width: 300px;
height: 300px;
background: @likeColor;
// float: @fangTwo;
margin-@{fangX}: 50px;
}
备注: 变量作为属性名的一部分,要加{};

less导入其他的css文件

语法 : @import "reset.css" ;

less混入写法

混入可以将一个定义好的 class A 引入到另一个 class B 中，从而实现 class B 继承 class A 中的所有属性。

定义好的classA可以放参数

写一个类名a, 类型b里引入类名a;

那么b里面就有a的代码啦类名a可以加一个参数可以加多个参数,参数可以有默认值

// 不带参数
.a{
     width:100px; 
    height:50px;
} 

.b{
    .a;
} 
带一个参数的,没有给默认值
.border(@size){ 
    border-radius: @size; 
}

.b{
//使用的时候必须给参数  
..border(30px)
}
带一个参数的,并且还给了默认值
.border(@size:20px){ 
    border-radius: @size; 
}
.b{
.border//第一种写法不给参数，默认为20px
.border(50px)//第二种写法可以自己给一个参数，替换掉默认的20px
}
// 带多个参数,并且还给了默认值多个参数用 @arguments
.shadow(@x:0,@y:0,@blur:1px,@color:#f00){ 

    box-shadow:@arguments; 
}  

.b{
    .shadow;//使用给的默认值
.shadow(5px,5px,5px,5px,#333)//也可以自己设置属性值
}

嵌套

&:表示承接上一级元素

p{
     // width: 100px;
     width: 200px-20;
     height: 100px;
     background-color: yellow;
     span{
         color: blue;

     }
     a{
         font-size: 30px;
         &:hover{
             color: green;
         }
     }
 }

less继承

好处 : 类似群组选择器语法 : &:extend(.类名)
.box{
width: 300px;
height: 300px;
background: @likeColor;
margin-@{fangX}: 50px;
margin-bottom: 30px;
}
方法一
.box2{
&:extend(.box);
}
方法二 :
.box2:extend(.box){

}