CSS笔记plus

最新推荐文章于 2024-07-18 17:34:14 发布

纣纣

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量305

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_51732660/article/details/125513251

版权

HTML5新特性

新增语义化标签

<header></header> <!--头部标签-->
<nav></nav><!--导航标签-->
<article></article><!--内容标签-->
<section></section><!--定义文档某个区域-->
<aside></aside><!--侧边栏标签-->
<footer></footer><!--尾部标签-->

表单特性

新增input类型：
- email、url、date、time、month、week、number、tel（手机号码）、search（搜索框）、color（颜色选择表单）
新增表单属性：
- required=“required” 表单必须有内容
- placeholder=“提示内容” 表单提示信息
- autofocus=‘’autofocus“ 网页加载自动聚焦
- autocomplete=“off/on” 网页记录之前输入的值，默认打开

CSS选择器

选择器

后代选择器
- 作用：选择满足选择器2的所有后代
- 语法：选择器1 选择器2{css}
子代选择器
- 作用：仅选择满足选择器2的子代
- 语法：选择器1>选择器2{css}
并集选择器
- 作用：同时选中选择器1和选择器2
- 语法：选择器1,选择器2{css}
交集选择器
- 作用：选中同时满足选择器1和选择器2的标签
- 语法：选择器1选择器2{css}
hover伪类选择器
- 作用：选中鼠标悬停在元素上的状态
- 语法：选择器:hover{css}
属性选择器
- 作用：选中具有某个属性的标签
- 语法：如input标签，input[属性=属性值]{}或者input[属性]{}，当属性相同时就用前面的

结构伪类选择器

E:first-child{} 匹配父元素中第一个子元素，并且是E元素
E:last-child{} 匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){} 匹配父元素中第n个子元素，并且是E元素

E:nth-last-child(n){} 匹配父元素中倒数第n个子元素，并且是E元素。n可以取下列值以实现特殊功能

2n 选择偶数
2n+1 选择奇数
-n+5 找到前五个
-n+5 找到从第五个往后
4n等等

如下：

<html>
    <head>
        <title>例子</title>
        <style>
            li:first-child{
                color:red;
            }
            li:nth-child(2n){
                color:pink;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body>
</html>

伪元素选择器

伪元素	描述	示例
`::after`	用于创建伪元素，在元素内容之后插入内容，该伪元素默认为行内元素	`p::after {` `content: ＂结束＂;` `}`
`::before`	用于创建伪元素，在元素内容之前插入内容，该伪元素默认为行内元素	`p::before {` `content: ＂开始＂;` `}`
`::first-line`	向文本的首行添加样式，只能应用于块级元素	`p::first-line {` `color: #333;` `}`
`::first-letter`	向文本的首字母添加样式，只能应用于块级元素	`p::first-letter {` `font-size: 16px;` `}`
`::marker`	用于改变li元素的数字或符号的样式，只能作用于`display`属性值为`list-item`的元素	`ul li::marker {` `content: '*';` `}`
`::placeholder`	用于设置表单元素占位符文本的样式	`input::placeholder {` `color: blue;` `}`

CSS样式

字体和文本样式

字体

文字大小：
- 属性名：font-size
- 取值：数字+px
字体粗细
- 属性名：font-weight
- 取值：一般用100到900的整百数。
字体倾斜：
- 属性名：font-style
- 取值：normal为正常，italic为倾斜
字体样式：
- 属性名：font-family
- 取值：具体字体
复合属性
- 属性名：font
- 取值：font: style weight size 字体;
- 省略：只能省略前两个

文本

文本缩进
- 属性名：text-indent
- 取值：数字+px 数字+em（em为一个字的大小，工作中一般用em）
文本水平对齐方式(文本、span标签、a标签、input标签和img标签)
- 属性名：text-align
- 取值：left center right
- 注意：要给以上元素居中需要在其父级标签上设计
文本修饰
- 属性名：text-decoration
- 取值：
  - underline 下划线（常用）
  - line-through 删除线（不常用）
  - overline 上划线（几乎不用）
  - none 无装饰线（常用）
- 注意：一般使用 text-decoration=none 去掉默认样式
行高
- 属性名：line-height
- 取值：数字+px 数字（当前font-size的倍数）
- 应用：让单行文本垂直居中可以设置 line-height：文字父元素高度，取消上下间距可以设置 line-height:1
- 注意：复合属性写法 font：style weight size/line-height family;
颜色
- 属性名
  - 文字颜色：color
  - 背景颜色: background-color

背景相关属性

背景颜色
- 属性名：background-color
- 注意：background-color:rgba(0,0,0,0.5) 其中第四个为透明度取值为0-1
背景图片
- 属性名：background-image
- 取值：background-image:url(‘图片的路径’)；
- 注意：图片一般在颜色上面；当盒子尺寸大于背景图片时，图片会默认复制，直到铺满盒子，更改默认看下面的背景平铺
背景图片大小
- 属性名：background-size
- 取值：
  - 数字+px
  - 百分比：相对于盒子尺寸计算
  - contain：包含，等比例缩放，不会超出盒子大小
  - cover：覆盖，等比例缩放，直到刚好填满整个盒子
背景平铺
- 属性名：background-repeat
- 取值：
  - repeat 水平和垂直方向都平铺
  - no-repeat 不平铺
  - repeat-x 水平平铺
  - repeat-y 竖值平铺
背景位置
- 属性名：background-position
- 取值：background-position：水平位置竖直位置；坐标定位原点在左上角
  - 水平位置：left，center，right ，数字+px
  - 垂直位置：top，center，bottom，数字+px
背景符合属性
- 属性名：background
- 取值： background：color image repeat position 不分顺序，但推荐这么写

显示模式

块级元素

特点：独占一行，宽度默认父元素，高度由内容撑开，加宽高可以生效。
代表标签：div、p、h、ul、li、dl、dt、dd、form、header等
注意：p标签内不能嵌套div、p、h等元素

行内元素

特点：一行显示多个，宽度高度由内容撑开，加宽高不能生效。
代表标签：a、span等

行内块元素

特点：一行可以显示多个，可以设置宽高
代表标签：img、input、textarea、button等
注意：浏览器在解析行内标签和行内块标签时，如果两个标签代码为换行书写那么会自动产生一个空格的间距。

显示模式切换

属性名：display
取值：
- block 块级元素
- inline-block 行内块元素
- inline 行内元素（使用较少）
- table 表格显示模式

CSS特性

继承性

控制字体的都能继承
不是控制字体的都不能继承
a标签的color会继承失效
特性：没有就继承，有就用自己的

层叠性

给一个标签不同的样式，样式会叠加
给一个标签相同的样式，样式只会生效后面的
注意：当样式冲突时，只有选择器优先级相同时，才能通过层叠性判断结果。

优先级

特性

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式< !important
!important写在属性值的后面，分号的前面；不能提升继承的优先级；开发中不建议使用!important

权重叠加计算

先比较优先级高的选择器的数量，当数量相同时比较下一优先级选择器数量
!important 权重最高

CSS盒子模型

盒子模型的介绍

组成：
- 内容区域：content
- 内边距区域：padding
- 边框区域：border
- 外边距区域：margin
浏览器显示：蓝色为宽高，绿色为padding。

内容的宽度和高度

属性名：width\height
取值：数字+px

边框（border）

属性名：border
取值：border:粗细线条种类颜色
- 粗细：数字+px
- 线条种类：具体种类，如 solid实线、dashed虚线、dotted点线等
- 颜色：具体颜色
快捷键：bd+tab
单个属性名：border-width border-style border-color

内边距（padding）

属性名：padding
取值：
- 当四个值时，分别为上、右、下、左边距
- 当三个值时，分别为上、左右，下
- 当两个值时，分别为上下，左右
- 当一个值时，为上下左右
注意：行内元素的padding-top和padding-bottom不生效，用line-height

CSS3盒模型（自动内减）

给盒子设置属性box-sizing：border-box，浏览器会自动计算多余大小并减去。

外边距（margin）

属性名：margin
取值：和内边距一样
注意：行内元素的margin-top和margin-bottom不生效，用line-height

清除默认内外边距

*{
    margin:0;
    padding:0;
}

版心居中

margin:0 auto;

外边距折叠现象

合并现象
- 场景：垂直布局的块级元素上下的margin会合并。如上面元素设置了margin-bottom：20px，下面元素设置了margin-top：30px，两者间的间距将为30px
- 结果：为margin的最大值
塌陷现象
- 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
- 结果：导致父元素一起向下移动
- 解决办法：
  1. 给父元素设置border-top或者padding-top以替代margin的使用
  2. 给父元素设置overflow：hidden（一般用这个）
  3. 转换成行内块元素
  4. 设置浮动

CSS浮动

伪元素

目标：使用伪元素创建网页内容
区别：
- 元素：html设置的标签
- 伪元素：由CSS模拟出的标签效果
作用：网页中不怎么重要，装饰性的小图可以使用
写法：
- ::before 在父元素内容的最前面添加一个伪元素
- ::after 在父元素内容的最后面添加一个伪元素
注意：
1. 必须设置content属性才能生效
2. 伪元素默认是行内元素

<html>
    <head>
        <title>例子</title>
        <style>
            li::before{
                content:'我是伪元素添加';
                color: pink;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body>
</html>

标准流

概念：又叫文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。
常见的标准流规则：如块级元素和行内元素等

浮动

属性名：float
作用：早期用来做图文环绕，现在用来做左右网页布局
特点
1. 浮动元素会脱离标准流，在标准流中不占位置
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素（字不能覆盖）
3. 两个元素都浮动，那么第二个会在第一个的左右浮动
4. 浮动元素有特殊的显示效果
5. 元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素
  - 一行可以显示多个
  - 可以设置宽高
注意：浮动元素不能通过text-align：center或者margin:0 auto居中

清除浮动

clear属性

用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方
下表为clear可设置的属性值

属性值	描述
none	默认值，元素不浮动
left	清除左浮动
right	清除右浮动
both	清除左右两侧浮动

含义：清除浮动带来的影响
- 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素

方法

直接设置父元素宽高
额外标签法(项目中一般使用)：先给父元素内容的最后加一个块级元素，然后给块级元素设置 clear:both

单伪元素清除法，写法如下：

<html>
    <head>
        <title>清除浮动</title>
        <style>
            .clearfix::after{
                content:'';
                display:block;
                clear:both;
                /*隐藏伪元素 高版本可以不加没影响，ie要加*/
                height:0;
                visibility:hidden;
            }
        </style>
    </head>
    <body>
        <div class="top clearfix">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

双伪元素清除法：

<html>
    <head>
        <title>清除浮动</title>
        <style>
            /*before为了解决外边距塌陷现象*/
            .clearfix::before,
            .clearfix::after{
                content:'';
                display:table;
            }
              .clearfix::after{
                 clear:both;
            }
        </style>
    </head>
    <body>
        <div class="top clearfix">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

直接给父元素设置 overflow:hidden

CSS定位

定位的步骤

设置定位方式

属性名：position
属性值：
1. relative 相对定位
2. absolute 绝对定位
3. fixed 固定定位
4. static 静态定位（一般不用，加和不加都没变化）

设置偏移值

left 距离左边距离
right 距离右边距离
top 距离上边距离
bottom 距离下边距离
注意：一般水平方向和竖直方向只各写一个属性

相对定位

介绍：相对于自己之前的位置进行移动
代码：position:relative
特点：
1. 需要配合方位属性进行移动
2. 相对于自己之前的位置进行移动
3. 不改变具体标签原有特点
4. 之前的位置在页面中占位置，即没有脱离标准流（没有脱标）
应用场景：
1. 配合绝对定位使用
2. 用于小范围的移动

绝对定位

介绍：先找已经定位的父级，有就以父级位参照物，没有就以浏览器窗口为参照物
代码：position:absolute
特点：
1. 需要配合方位属性进行移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置即已脱标

固定定位

介绍：让盒子始终处于屏幕某个位置
代码：position:fixed
特点：
1. 需要配合方位属性进行移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置即已脱标

层级属性z-index

用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效
数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）

z-index属性值相同时，遵循后来者居上的原则，后面的元素会覆盖前面的元素

子绝父相

解释：子级用绝对定位父级用相对定位

居中

一般居中

绝对定位的盒子margin：auto居中无效
方法：left:50% margin-left:负数+盒子宽度一半 top:50% margin-top:负数+盒子高度一半

CSS3位移居中（不受盒子大小影响）

方法：left:50% top:50% transform:translate(-50%,-50%)

元素层级关系

不同布局元素层级关系：标准流<浮动<定位
不同定位之间的层级关系：相对、绝对和固定层级关系相同，此时html写在下面的元素层级会更高，会覆盖上面的元素。z-index 属性可以改变层级关系，它的值越大层级关系越高，此属性必须配合定位使用。

装饰

垂直对齐方式（水平方向上，上下不齐）

属性：vertical-align
属性值：
- baseline 默认基线对齐
- top 顶部对齐
- middle 中部对齐
- bottom 底部对齐
浏览器遇到行内和行内块标签会当做文字处理，默认文字是基线对齐

光标类型

属性名：cursor
属性值：
- default 默认值，通常是箭头
- pointer 小手效果，提醒用户可以点击
- text 工字型，提醒用户可以选择文字
- move 十字光标，提醒用户可以移动

边框圆角

属性名：border-radius
取值：数字+px、百分比（根据盒子属性决定）最多四个值，顺时针赋值，没有的看对角值
圆形：当正方形盒子大于等于50%时为正圆
胶囊形状：取长方向盒子高度的一半

溢出部分显示效果

属性名：overflow
取值：
- visible：默认值，溢出部分可见
- hidden：溢出部分隐藏
- scroll：无论是否溢出，都显示滚动条
- auto：根据是否溢出，自动显示或者隐藏滚动条

元素本身隐藏

visibility：hidden 占位隐藏，不常用
display：none 不占位隐藏，常用

元素透明

属性名：opacity

取值：0~1之间的数字，1为完全不透明，0为完全透明

精灵图

在这里插入图片描述

概论：上面的图叫精灵图
优势：将多张小图合成一个大图，减轻服务器压力，加快加载速度
使用方式：
1. 创建一个盒子（一般用行内标签），设置盒子的大小和小图片大小一致
2. 将精灵图设置为盒子的背景图片
3. 修改背景图位置：background-position：-x -y

盒子阴影

属性名：box-shadow
取值：
- h-shadow：必须，水平偏移量。允许为负值
- v-shadow：必须，垂直平偏移量。允许为负值
- blur：可选，模糊度
- spread：可选，阴影扩大
- color：可选，阴影颜色
- inset：可选，将阴影改为内部阴影

过渡

作用：让元素的样式慢慢的变化，常配合hover使用
属性名：transition
取值：
- 过渡的时长：数字+s
- 过渡的属性：all（所有属性都过滤）、具体属性名。工作中一般写all。

<html>
    <head>
        <style>
            .box{
               width: 200px;
               height:200px;
               background-color:pink;
               transition:all 1s;             
            }
            .box:hover{
                width:600px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            
        </div>
    </body>
</html>

字体图标

优点：可以像字体一样设置属性，放大和缩小不会像图片一样的失真。
图标库：
- http://www.iconfont.cn/ 阿里巴巴图标库
- http://icomoon.io 外国图标库

外国图标库使用步骤：

将下载包中的fonts文件放入项目中

css导入，在下载的css文件里，如下：

/*字体声明*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?hj0ftb');
  src:  url('fonts/icomoon.eot?hj0ftb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?hj0ftb') format('truetype'),
    url('fonts/icomoon.woff?hj0ftb') format('woff'),
    url('fonts/icomoon.svg?hj0ftb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/*引用*/
span{
   font-family:'icomoon'; 
}

复制demo.html打开后图标后面的小框框到自己页面的标签里面，如
css中引用，如上面

追加图标：
1. 重新进入网站，点击import icons
2. 选择自己下载解压的selection.json文件
3. 选择新的，然后和下载图标步骤一样。

三角形

设置容器大小为0，然后设置border，如下

div{
    width:0;
    height:0;
    line-height:0;/*兼容性*/
    font-size:0; /*兼容性*/
    border:50px solid transparent;
    border-left-color:pink;
}

应用：利用子绝父相，把三角设置到需要加三角的容器内，然后利用绝对定位更改位置。

轮廓线（outline）

给表单添加outline：0或者outline：none之后能够去掉默认的蓝色边框，如input中的。

文本域去掉大小控制（resize）

设置resize:none;
注意，文本域代码最好在一行写，不然光标会有很大的空白

文本溢出省略号显示

单行文本溢出显示

/*强制一行内显示文本*/
white-space:nowrap
/*超出隐藏*/
overflow:hidden;
/*用省略号代替*/
text-overflow:ellipsis;

多行文本溢出显示：有较大的兼容性问题，一般后台做。

2D转换(transform)

移动

属性名：transform
取值：
- translate（x，y）
- translateX(n)
- translateY(n)
优点：不会影响其它元素的位置

旋转

属性名：transform
取值：
- rotate(n+deg)
旋转中心点改变：transform-origin：x y；
- 默认是中心，即50% 50%
- 可以设置像素和方位（top bottom left right center）

缩放

属性名：transform
取值：
- scale(x,y)
- scale(1,1)：宽和高都放大一倍
- scale(2)相当于scale(2,2)
- scale(0.5,0.5)：缩小
优势：相比于直接设置大小，scale是可以设置放大缩小中心点的，不会影响其他盒子，中心点改变同上。

综合写法

transform:translate() rotate() scale()
注意：顺序影响转换的效果（先旋转会改变坐标轴方向），一般把位移放到最前面

动画(animation)

动画的使用

用keyframes定义动画，如下例

@keyframes 动画名称{
    0%{
        width:100px;
    }
    100%{
        width:200px;
    }
}

元素使用动画

选择器{
    animation-name:动画名称;
    animation-duration:持续时间;
}

动画序列

@keyframes 动画名称{
    0%{
        transform:translate(0,0);
    }
    25%{
        transform:translate(1000px,0);
    }
    50%{
        transform:translate(1000px,500px);
    }
    75%{
        transform:translate(0,500px);
    }
    100%{
        transform:translate(0,0);
    }
}

动画属性

animation-delay:规定动画何时开始，默认是0
animation-iteration-count：规定动画播放的速度，默认是1，infinite为无限
animation-timing-function：规定速度曲线，默认是ease
animation-fill-mode：规定动画结束后状态，保持forwards回到起始backwards
等等
可以简写：animation：

3D转换（transform)

3D移动

属性名：transform
取值：
- translate3d（x,y,z）
- translateX(n)
- translateY(n)
- translateZ(n) 值越大，图越大

透视(perspective)

作用：让网页产生3D效果
值：数字+px 数字越大组件越小，相当与模拟人的眼睛去看，数字就是眼睛离屏幕的距离

旋转（rotate3D)

transform:rotateX(45deg):沿着x轴旋转45度
transform:rotateY(45deg):沿着Y轴旋转45度
transform:rotateZ(45deg):沿着Z轴旋转45度

3D呈现(transfrom-style)

控制子元素是否开启三维立体环境
取值为flat为不开启，取值为preserve-3d为开启
代码写在父级，影响的是子级

移动WEB开发

flex布局

当flex布局后，float、clear和vertical-align都将失效
常见父项属性：
- flex-direction：设置主轴的方向（即项目的排列方向）
  - row：默认值从左到右
  - row-reverse：从右到左
  - column：从上到下
  - column-reverse：从下到上
- justify-content：设置主轴上子元素排列方式
  - flex-start: 默认值，从头部开始，如果主轴是x轴，则从左到右
  - flex-end：从尾部开始排列
  - center：在主轴居中对齐
  - space-around：平分剩余空间
  - space-between：先两边贴边，再平分
- flex-wrap：设置子元素是否换行
  - nowrap：默认值，不换行
  - wrap：换行
- align-content：设置侧轴上的子元素排列方式（多行，单行没效果）
  - flex-start: 从侧轴头部开始排列
  - flex-end：从侧轴尾部开始排列
  - center：在侧轴中间显示
  - space-around：子项在侧轴平分剩余空间
  - space-between：子项在侧轴先两边贴边，再平分
  - stretch：默认值，设置子项高度平分父元素高度
- align-items：设置侧轴上的子元素排列方式（单行）
  - flex-start：从上到下
  - flex-end：从下到上
  - center：挤在一起居中（垂直居中）
  - stretch：拉伸（默认值，但是子盒子不能给高度）
- flex-flow：复合属性，相当于同时设置flex-direction和flex-wrap
常见子项属性：
- flex：定义子项分配剩余空间，表示占多少份（不用定义宽度），取值为数字
- align-self：控制子项在侧轴的排列方式(取值和align-items相同)
- order：定义项目排列循序，数值越小，排列越靠前，默认为0

媒体查询

使用@media 查询，可以针对不同的媒体类型定义不同的样式
语法规范：
```
@media mediatype and|not|only (media feature){
    CSS-Code;
}

/*在屏幕上 并且 最大宽度是800像素*/
@media screen and (max-width:800px){
    CSS-Code;
}
```
- 用@media开头
- mediatype 媒体类型
  1. all：用于所有设备
  2. print：用于打印机和打印预览
  3. screen：用于电脑屏幕，平板电脑，智能手机等
- 关键字 and not only
  1. and：可以将多个媒体特性连接到一起，相当于”且“；
  2. not：排除某个媒体类型，相当于”非“，可以省略
  3. only：指定某个特定的媒体类型，可以省略
- media feature 媒体特性必须有小括号包含
  1. width：定义输出设备中页面可见区域的宽度
  2. min-width：定义输出设备中页面最小可见区域的宽度
  3. max-width：定义输出设备中页面最大可见区域的宽度
引入资源：当样式比较多的时候，针对不同媒体使用不同的样式表。在link中判断设备尺寸，然后引用不同的css文件
```
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
```

CSS书写顺序

定位
浮动或者display
盒子模型：margin border padding 宽度高度背景色
文字样式

优势：浏览器执行效率更高

Less学习

中文网址：http://lesscss.cn
介绍：Less是一门css预处理语言，它扩展了css的动态特性
使用
1. 建立后缀为less的文件
2. vscode下载easy less 插件
3. ctrl+s保存后会自动生成css文件

Less嵌套

后代写在父级里面
遇到伪类、伪元素、交集选择器时内层选择器前面需要加&符号

假定div1里面包含了div2，给div2在less里面可以这么设置样式,div2的伪类需加&
.div1{
	background-color:pink;
	.div2{
		background-color:red;
        &:hover{
			background-color:pink;
        }
	}
}

Less运算

运算符中间必须用空格隔开
两个数参与运算，如果只有一个数有单位，以第一个数为准
两个数参与运算，如果只有一个数有单位，以第一个数为准
两个数参与运算，如果两个数有不同的单位，以第一个数为准
```
@border:5px + 5;
div{
	border:@border solid red;
	width:(82 / 50px);
}
```