CSS 进阶必备

叶落风尘
78 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

CSS 进阶必备

浮动布局

浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一 个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好 像浮动元素不存在一样。 优点 这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后， 它有着块级元素的一些性质例如可以设置宽高等，但它与 inline-block 还是有一些区别的，第一个就是关 于横向排序的时候，float 可以设置方向而 inline-block 方向是固定的;还有一个就是 inline-block 在使用 时有时会有空白间隙的问题

缺点 最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷

2、浮动的清除

<div class="parent"> //添加额外标签并且添加clear属性 <div style="clear:both"></div> //也可以加一个br标签
</div>

父级添加 overflow 属性，或者设置高度 建立伪类选择器清除浮动(推荐)

//在 css 中添加:after 伪元素
.parent:after{
/_ 设置添加子元素的内容是空 _/
content: '';
/_ 设置添加子元素为块级元素 _/
display: block;
/_ 设置添加的子元素的高度 0 _/
 height: 0;
/_ 设置添加子元素看不见 _/
visibility: hidden;
/_ 设置 clear:both _/
clear: both;
}

display：inline-block

两个 display:inline-block 元素放到一起会产生一段空白。 元素被当成行内元素排版的时候，元素之间的空白符(空格、回车换行等)都会被浏览器处理，根据 CSS 中 white-space 属性的处理方式(默认是 normal，合并多余空白)，原来 HTML 代码中的回车换行被 转成一个空白符，在字体不为 0 的情况下，空白符占据一定宽度，所以 inline-block 的元素之间就出现了空隙。

解决办法 1、将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行 2、父元素中设置 font-size: 0，在子元素上重置正确的 font-size 3、为子元素设置 float:left

画三角形

.triangle{
      width: 0;
      height: 0;
      border: 50px solid;
      border-color: #f00 #0f0 #ccc #00f;

//四个参数对应 :上 右 下 左
border-color: transparent transparent #ccc transparent;

画四边形

.parallel {
margin-top: 50px;
margin-left: 50px;
width: 200px;
height: 100px;
background: lightblue;
transform: skew(-20deg, 0);
}

LESS 相关

less 的注释可以有两种。 第一种注释：模板注释 // 模板注释 这里的注释转换成 CSS 后将会删除 因为 less 要转换为 css 才能在浏览器中使用。转换成 css 之后，这种注释会被删除（毕竟 css 不识别这种注释）。 第二种注释：CSS 注释语法 /_ CSS 注释语法 转换为 CSS 后让然保留 _/

定义变量 我们可以把重复使用或经常修改的值定义为变量，在需要使用的地方引用这个变量即可。这样可以避免很多重复的工作量。 （1）在 less 文件中，定义一个变量的格式： @变量名: 变量值; //格式 @bgColor: #f5f5f5; //格式举例

（2）同时，在 less 文件中引用这个变量。 最终，less 文件的完整版代码如下： main.less：

// 定义变量
@bgColor: #f5f5f5;

// 引用变量
body{
background-color: @bgColor;
}

Mixin Mixin 的作用是把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了，非常方便 （1）在 less 文件中定义一个类：（将重复的代码放到自定义的类中） /_ 定义一个类 _/

.roundedCorners(@radius: 5px)
{
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

上方代码中，第一行里面，括号里的内容是参数：这个参数是缺省值。

（2）在 less 文件中引用上面这个类：

#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

上方代码中，header 中的引用没有带参数，表示参数为缺省值； footer 中的引用带了参数，那就用这个参数。

import PS1：被引用的 less 文件，我们习惯在前面加下划线，表示它是部分文件。 PS2：_button1.less 里可以引用 main.css 里的自定义变量。 （2）在 main.css 中引用上面的 _button1.less：（代码的第二行）

main.css：

@btnColor: red;
@import url(`\_button1.less:'); //这里的路径写的是相对路径
body{
width: 1024px;
}

内置函数

less 里有一些内置的函数，这里讲一下 lighten 和 darken 这两个内置函数。 main.less:

body {
background-color: lighten(#000, 10%); // 让黑色变亮 10%
color: darken(#fff, 10%); // 让白色变暗 10%
}

更多参考：lesscss.cn/

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

avatar
文章
阅读
粉丝