HTML5+CSS3 笔记

1263 0 0

作者:tomiaa

内核

内核	浏览器	前缀
webkit	Safari（苹果）	webkit
webkit/Blink	Chrome （谷歌）	webkit
Gecko	firefox (火狐)	moz
presto/webkit/Blink	Opera（欧朋）	o
Trident	IE浏览器的内核	ms

html

<!DOCTYPE html>

<!-- 不是标记，是声明

声明当前文档的类型及版本

作用：告诉浏览器该文件的类型，让浏览器解析的时候以正确的规范来解析文档

doc = document 文档

type = 类型

html = 超文本标记语言(网页) 版本类型 html5

-->

<head>

<!-- 提供一些对机器可读的信息

charset 字符设置统一设置网页的字符编码格式 utf-8 定义的是万国码

-->

</head>

<body>

</body>

</html>

html标记的属性

n 属性总是在开始标记中，以名值对形式出现: name="value"

n 属性值始终被引号引起来，标签的属性推荐使用双引号（相同引号不能相互包含）

n 属性和属性值对大小写不敏感，推荐小写

文本格式

<strong> 加粗，强调，着重有语义的标记 </strong>

<b>加粗的效果,bold 无语义的标记</b>

<em>倾斜，强调，着重有语义的标记</em>

<i> 倾斜的效果，italic 无语义的标记</i>

显示中文拼音

<ruby>

饕<rt>tāo</rt>

</ruby>

<ruby>

餮<rt>tiè</rt>

</ruby>

路径

相对路径：从当前文件路径与要引用的文件或文件夹的路径关系

/ 下一级

./ 当前目录

../ 上一级目录

../../ 上上级目录

绝对路径：从盘符开始，服务器端

链接

href 路径

target _self (默认)当前窗口打开

_blank 新窗口打开

title 鼠标悬停的提示

盒模型

内容 - content

包含width和height

max-width和max-height

设置元素的最大宽度和最大高度

min-width和min-height

设置元素的最小宽度和最小高度

box-sizing

box-sizing:content-box | border-box;

标准盒模型的计算方式：

盒子的总宽度= width + padding + border + margin

怪异盒模型(IE盒模型)

盒子的总宽度= width(包含padding+border) + margin

表格

单元格间距单元格padding

rowspan 纵合并 colspan 横合并

css属性：

border-collapse: collapse;

权值

1.层叠性

2.继承性

继承属性： font- line- color text- ，除text-decoration

3.优先级

！important 1000 > id 100 > class 10 > 标签 1 > 通配符 * 0

！important高于行间样式，但没有自己本身样式优先级高

font | text

font-weight:normal | bold 粗体 | bolder 更粗

100-500不加粗 600以上加粗 700=bold 900=bolder

font-style : normal | italic

line-height : normal| length | number 数字会与字体大小相乘，倍数行距

font:font-style font-weight font-size/line-height font-family;

必须同时有font-size和font-family;顺序不能更换

text-align || text-align-last 最后一行对齐方式，一行

justify 两端对齐

行内元素无效。

text-decoration : none || underline 下划 || overline 上划 || line-through 删除线

单位

em 相对单位 | 相对当前元素的font-size属性

rem 相对单位 |（html）的font-size计算

fr相对单位 | 0.3fr 表示占剩余空间的0.3倍

margin传递与塌陷

父子关系

现象：给子标签设置上外边距时，会和父盒子的外边距重合，最终表现其中较大值的外边距。

原因：父子盒子公用了一个上外边距的区域

解决方法：

1. 给父级盒子设置边框或者是内边距

2. 给父标签设置overflow:hidden;属性,触发BFC规则（块级格式上下文），把父元素渲染成一个独立的区域。

兄弟关系

现象：上一个盒子设置下外边距，下一个盒子设置上外边距，最终会显示其中较大值的外边距。

原因：上下两个兄弟关系的盒子共用了一个外边距区域

解决方法：

1. 给两个盒子各套一个父盒子，父盒子添加overflow:hidden;属性

2. 给其中某一个盒子设置外边距

BFC

什么是BFC？

一个浏览器渲染元素的规则（块格式上下文）

如何触发元素的BFC规则？

元素浮动元素绝对定位元素类型为inline-block等 overflow不等于默认值visible

BFC规则具体表现：

父元素的上下边距不再合并父元素的高度会将浮动元素计算在内

浮动

父元素设置高度（比较死板）

父元素overflow:hidden | scroll | auto

最后加一个空的块标签，该标签设置clear : left | right | both

伪元素创建

.clearfix:after{

content: '';

display: block;

clear: both;

}

.clearfix{ /* 用来解决ie7及以下版本不兼容伪元素问题 */

*zoom: 1;

}

定位

position:static | relative | absolute | fixed;

static （定位的不定位）默认值

z-index定位才有效

定位浮动区别

float 脱离文档流，不脱离文本流

position 脱离文档流，也脱离文本流

脱标后，margin:auto;无效

vertical-align

vertical-align : baseline 基线对齐 | top | middle 居中 |bottom 底端对齐

只作用display：inline-block属性；用来做垂直对齐方式的

去掉img下方3px间隙

父元素

font-size:0px;

line-height:0px;

img

display:block;

img

vertical-align，除baseline以外的值

显示隐藏

隐藏：

1. display:none; 隐藏

2. visibility:hidden; 隐藏，所占的空间保留

显示：

1. display:block; 转块显示

2. visibility:visible; 显示

overflow属性

overflow

overflow-x 只包括水平方向

overflow-y 只包括垂直方向

visible 默认值，显示，不裁剪

hidden 内容直接被裁剪隐藏

scroll 内容会被隐藏，但是浏览器可以显示上下和左右滚动条显示隐藏的内容

auto 内容会被隐藏，浏览器会根据具体的情况显示上下或者左右滚动条显示内容

透明

opacity :0-1之间 ie8- 不兼容

rgba() 透明背景颜色，元素不透明ie8- 不兼容

filter:Alpha(opacity=x) IE 透明背景及内容仅支持ie6，7，8，9；IE10被废除

meta标签

author 作者

keywords 定义关键字

description 定义描述

viewport 手机浏览器的窗口大小，

device-width 浏览器窗口的宽度与手机宽度保持一致

initial-scale=0.5' 让网页缩放为原来的0.5倍

user-scalable=no 不允许用户缩放

每30秒钟刷新当前页面:

网页图标

css的书写顺序

布局定位属性 - 自身属性 - 文本属性 - 其他属性

float/position/display || 盒模型 + background || 文本属性：text- font- line- list- color

表单

button : submit || reset || button

name选项中，分组的作用

input ： text || password || radio || checkbox ||

file || image || button || submit || reset || hidden ||

url || email || search || number || color

tel 电话号码

range 滑动条

date 日期年月日日历表

datetime 日期时间 UTC

datetime-local 本地日期时间年月日时分日历表

month 月份年月日历表

time 时间时分时钟

week 周

input属性

value 初始值

placeholder 提示信息

checked 默认选中，选中单选按钮和复选框

multiple 可以选择多个文件

size 下拉列表可见数

maxlength 最大长度值

readonly 只读状态，只读不可以写入

disabled 禁用，不可读，不可写

selected 默认选中下拉列表中的项

pattern 验证input的模式，pattern的值是正则表达式

autocomplete：自动填充 on 打开 off 关闭

autofocus 自动获得焦点

required 必填字段（不能为空）

<select> 默认选中

</select>

textarea{

resize:none; /*重置元素大小*/

}

css属性

outline: none;

去除选中边框

resize: none;

- none 无法调整元素的尺寸

- both 可调整元素的宽度和高度

- vertical 可调整元素的高度

- horizontal 可调整元素的宽度

input[type = "checkbox"]:checked{/* 被选中的多选框 */

appearance: none;/* 外观：无 */

}

datalist

<input type="text" list="car"> 获取焦点自动显示选项car

</datalist>

<form id="login"> 提交绑定 login 提交

</form>

文本溢出隐藏

单行溢出隐藏

.box{

/* 1.设置元素的宽度 */

width:400px;

/* 2.不换行 */

white-space: nowrap;

/* 3.超出的内容溢出隐藏 */

overflow: hidden;

/* 4.以省略号显示隐藏的内容 */

/* text-overflow: clip; 直接裁剪 */

text-overflow:ellipsis; /*以省略号显示隐藏的内容*/

}

多行溢出隐藏-webkit-内核

只有内核是-webkit-的浏览器

.box1{

/* 1.设置元素的宽度 */

width:400px;

/* 改变元素为box弹性盒子 */

display: -webkit-box;

/* 限定行数不是一个规范的属性，没有在css规范草案中 */

-webkit-line-clamp: 2;

/* 检索伸缩盒子对象的子元素的排列方式 */

-webkit-box-orient: vertical;

/* 设置溢出隐藏 */

overflow: hidden;

/* 隐藏的文本以省略号显示 */

text-overflow: ellipsis;

}

多行溢出隐藏兼容较好

.box2{

/* 1.限定宽度 */

width:400px;

border: solid;

margin: auto;

/* 2.限定高度以及行高，并且行高与高度要成比例 */

height: 60px;

line-height: 30px;

position: relative;

overflow: hidden;

}

.box2:after{

content:'...';

position: absolute;

right:0px;

bottom:0px;

background: #fff;

padding-left:4px;

}

多栏布局

两栏布局

两栏自适应:两列布局，左侧固定宽度，右侧盒子自适应

1.左右两个盒子，左边固定宽度，右边设置100%

2.给左侧盒子设置position:absolute

3.右侧盒子内部添加一个子盒子，给子盒子设置padding-left，值为左侧盒子的宽度

.left{

width:200px;

height:100px;

background: pink;

position: absolute;

}

.right{

width:100%;

height: 100px;

background: greenyellow;

}

.inner{

padding-left:200px;

background: red;

}

<div class="inner">right</div>

</div>

圣杯布局

1. 三个盒子都浮动,并且设置一个position:relative;

2. 中间盒子的宽度设置100%占满

3. 要把左边盒子拉倒最左边，通过使用margin-left:-100%;

4. 左边盒子上去之后会覆盖中间的一部分内容，要把中间的内容拉出来，在外围的wrap盒子设置padding-left,值为左边盒子的宽度

5. 中间盒子的内容被拉回来，但是左边盒子也回来了，给左边设置定位并且设置偏移量属性left，值为盒子宽度的负值，还原盒子的位置

6. 右边同理左边

.wrap{

padding-left:200px;

padding-right:200px;

}

.left,.right,.center{

float: left;

position: relative;

}

.left,.right{

width:200px;

height:100px;

}

.left{

background: greenyellow;

margin-left:-100%;

left:-200px;

}

.right{

background: pink;

margin-left:-200px;

right:-200px;

}

.center{

width:100%;

height: 100px;

background: yellow;

}

<div class="center">center</div>

<div class="right">right</div>

</div>

双飞翼布局

双飞翼布局：左右两栏固定宽度，中间盒子自适应(中间盒子必须放在最前面)

1.html结构中，中间的盒子必须放在最前面

2.将三个盒子都浮动

3.中间盒子main占满100%

4.将左边盒子拉倒最左边，margin-left:-100%;右边盒子放到最右边

5.中间盒子的内容被左右盒子覆盖了，在中间盒子内部添加一个子元素，给子元素设置margin:0px 200px;

.left,.right,.main{

float: left;

}

.left,.right{

width:200px;

height:100px;

opacity: 0.5;

}

.left{

background: yellowgreen;

margin-left: -100%;

}

.right{

background: pink;

margin-left:-200px;

}

.main{

width:100%;

height:100px;

background: yellow;

}

.inner{

background: red;

margin:0px 200px;

}

<div class="inner">center</div>

</div>

<div class="right">right</div>

等高布局

等高布局：多列子元素在父元素中实现等高视觉效果的布局技巧

多个列需要自己的背景颜色

一列变高，其他列的高度都要变化

利用内外边距抵消法

- 优点：结构简单，兼容所有浏览器，比较容易理解

- 缺点：伪等高，需要合理的控制margin和padding的值

.box{

width:900px;

margin: auto;

overflow: hidden;

}

.box:after{

content:'';

clear: both;

display: block;

}

.box div{

width:300px;

float: left;

padding-bottom: 999px;

margin-bottom: -999px;

}

.col1{

background: pink;

}

.col2{

background: greenyellow;

}

.col3{

background: yellow;

}

.test{

height: 100px;

background: #000;

}

/* 利用内外边距抵消法 */

<div class="col col3">等高布局：多列子元素在父元素中实现</div>

</div>

嵌套法

给每一个盒子嵌套一个背景，通过内容撑开父元素的高度的原理

- 优点：兼容各种浏览器，方便扩展创建任意列数

- 缺点：结构嵌套复杂，难以理解

.wrap{

width:900px;

margin:auto;

overflow: hidden;

}

.bg1{

background: pink;

}

.bg2{

background: yellowgreen;

position: relative;

left: 300px;

}

.bg3{

background: yellow;

position: relative;

left:300px;

}

.bg3:after{

content: '';

clear: both;

display: block;

}

.bg3 div{

width:300px;

float: left;

position: relative;

}

.bg3 .col1{

margin-left:-600px;

}

.bg3 .col2{

margin-left:-300px;

}

<div class="col1">第一列给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景给每一个盒子嵌套一个背景</div>

</div>

多列布局

被分隔的列数

column-count:number | auto;

元素的列宽

column-width:auto | length;

列宽

column-gap:length | normal;

边框线样式，是一个简写：column-rule-*: color width style;

column-rule:width color style;

H5布局标签

header footer nav

article 定义一段独立的文档区域

section 章节，标题和段落组成

aside 侧边栏

hgroup 标题和子标题进行分组

</hgroup>

其他的标签

figure 定义了图片的文本内容

<figcaption> 定义figure的标题 </figcaption>

</figure>

注意：一个figure里面只能有一个figcaption

mark 标记标签

time 标记定义日期或时间

标签的兼容

1、利用JavaScript新增元素的方式

js代码通过js创建的元素是行内元素

document.createElement('header');

js创建的元素是行内元素，需要使用display:block; 转块级元素

2、使用封装好的插件，引入js文件（html5shive.js）

<!--[if lt ie 9]>

<![endif]-->

多媒体

视频<video>

- src 规定要播放的视频的路径

- controls 播放控件

- loop 循环播放

- muted 静音播放

- autoplay 自动播放（静音属性才有效）

- poster 预览图

- width 宽度

- height 高度

音频<audio>

- src 规定要播放的音频的路径

- controls 播放控件

- loop 循环

- muted 静音播放

资源标签

<video>

</video>

autoprefixer自动生成前缀

1. 在扩展 - 搜索”autoprefixer“ - 安装

2. 在“管理” - “安装另外一个版本” 2.2.0

3. 在css文件中，按“f1"，选择 “autoprefixer CSS”

选择器

attr 选择属性

attr=value 选择属性匹配属性值

attr ~= value 选择器属性匹配属性值词组

attr ^= value 选择属性匹配属性值以value开头

attr $ = value 选择属性匹配属性值以value结束

attr *= value 选择属性匹配属性值包含value

结构伪类

:first-child 选取属于父元素的首个子元素

:last-child 选取属于父元素的最后一个子元素

:nth-child(n) 选取属于父元素的第n个子元素

:nth-last-child(n) 选取属于父元素的第n个子元素，从最后一个子元素开始计数

:nth-of-type(n) 选取属于父元素的特定类型的第n个子元素

:nth-last-of-type(n) 选取属于父元素的特定类型的第n个子元素，从最后一个子元素开始

状态伪类

a:link 正常的，未访问过的

a:visitied 访问过后的

a:active 激活中

a:hover 鼠标悬停

注意：a:hover必须放在a:link和a:visitied之后，才有效

：checked 被选中的元素

：enabled 可用的状态元素

：disabled 禁用状态的元素

阴影

text-shadow:x y blur color;

box-shadow:x y blur spreed color inset;

水平垂直模糊度尺寸颜色内阴影，默认的是外阴影

background

background-image:url(),url()....;

background-size:length | % | cover | contain ;

cover:把背景图片扩至足够大，以使背景图像完全覆盖背景区域。

contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-origin:content-box | padding-box | border-box;

content-box 背景图片相对于内容框来定义

padding-box 背景图片相对于内边距框来定义

border-box 背景图片相对于边框线来定义

background-clip:content-box | padding-box | border-box;

content-box 背景裁剪到内容框

padding-box 背景裁剪到内边距框

border-box 背景裁剪到边框线

resize

resize:none | both | horizontal | vertical;

注意：如果其他元素希望该属性生效，需要设置元素的overflow的属性，值除了visible以外

- none 无法调整元素的尺寸

- both 可以调整元素的宽度和高度

- vertical 可以调整元素的高度

- horizontal 可以调整元素的宽度

渐变

background:linear-gradient(角度，颜色);

关键字：left right top bottom

角度值：角度的单位 deg

重复线性渐变

background:repeating-linear-gradient(角度,颜色颜色的起始位置)

渐变的值可以设置一个或多个，多个值列表之间用【逗号】隔开

径向渐变

background:radial-gradient(中心点,颜色);

中心点取值：

关键字：center

background-image: radial-gradient(circle, red, yellow, green);

不同尺寸大小关键字的使用:

background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);

background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);

重复径向渐变

background:repeating-radial-gradient(中心点,颜色颜色的起始位置)

兼容问题

图片的边框

图片添加链接在IE中会出现边框线：给图片标签设置

border:none;

IE 低版本的兼容

小高度（IE6-）

.box{

...

font-size:0px;

line-height:0px;

}

IE7- 子标签相对定位时，父标签的overflow:hidden属性失效

/*给父元素添加position:relative;*/

IE6- 浮动时会产生双倍边距的bug

IE7- 块转行内块不会在一行上显示

div{

display:inline-block;

*display:inline;

*zoom:1;

}

IE7- 当li中出现两个或以上的浮动时，li之间会产生空白间隙

li{

vertical-align:top/bottom/middle;

}

cssHack

条件Hack

<!--[if ie]>

<style>

选择器{声明;}

</style>

<![endif]-->

用于选择浏览器及浏览器版本

gt 大于

gte 大于等于

lt 小于

lte 小于等于

! 非指定版本

属性Hack

IE6- 属性前

IE7- 属性前

IE8-9 属性值后

选择符Hack

IE6-

.box{

background:yellow;

}

IE7-

.box{

background:green;

}

动画

过渡

transition：property duration timing-function delya;

property 过渡的属性多个属性之间用逗号隔开 none没有过渡属性 all所有的

duration：过渡时间 s / ms

timing-function： linear匀速 ease

delay 延迟时间

动画

1.创建动画过程 @keyframes

2.调用动画

animation:name duration timing-function delay iteration-count direction;

name 动画名称，绑定到 @keyframes

duration 完成动画的时间

timing-function 曲线速度 linear

delay 延迟时间

iteration-count 动画播放次数number infinite无限

direction 是否轮流反向 alternate

变换

transform:

translate(x,y) 平移

rotate(deg) 旋转

scale(x,y) 缩放 1默认值，比1大放大，比1小缩小

skew(x,y) 倾斜单位是角度deg

translateZ() z轴平移，前后移动

translate3d(x,y,z)

rotateX() 绕x轴旋转前后翻转

rotateY() 绕y轴旋转左右翻转

rotateZ() 绕z轴旋转水平翻转

rotate3d(x,y,z,deg) -1 0 1 0-360deg

scaleZ() 在z轴上缩放

scale3d(x,y,z)

视距 perspective

元素的中心点 transform-origin: length | 关键字 | %

保留子元素的3d位置： transform-style:flat | preserve-3d;

翻转之后看不见盒子背面

backface-visibility: hidden;

弹性盒子

display:flex/inline-flex; IE11支持，IE10-不支持

容器属性

排列方向

flex-direction:row / row-reverse / column / column-reverse ;

对齐方式(主轴)

justify-content: flex-start / flex-end / center /space-between /space-around / space-evenly

对齐方式(交叉轴)

align-items ： stretch 默认|| flex-start || flex-end || center || baseline

flex-wrap : nowrap || wrap || wrap-reverse

项目属性

order : 0; 数值越小，排列越靠前

flex-grow: 0;放大

flex-shrink : 1; 默认缩小

flex-basis auto;分配多余空间前，项目占据的主轴空间，

flex：flex-grow flex-shrink flex-basis;

flex:0 1 auto; 放大缩小占据主轴空间

align-self : stretch 默认|| flex-start || flex-end || center || baseline

calc() 函数

calculate 计算的缩写,是css3新增的计算功能，用来指定元素的长度

.box{

calc(表达式);

}

运算符前后保留一个空格

grid网格布局

display: grid;

/* 网格布局 */

grid-template-rows: 20% 10% 100px auto;

/* 四行 */

grid-template-columns: 100px auto 20%;

/* 三列 */

grid-template-rows:repeat(3 , 1fr);

/* fr表示占剩余空间的1倍 */

grid-template-columns: repeat(3 , 1fr);

/* repeat表示3列都是1fr */

grid-template-areas区域划分

.box {

width: 500px;height: 500px;

border: 1px solid #000;

display: grid;

/* 网格布局 */

/* grid-template-rows: 20% 10% 100px auto; */

/* 四行 */

/* grid-template-columns: 100px auto 20%; */

/* 三列 */

/* grid-template-rows:repeat(3 , 1fr);

grid-template-columns: repeat(3 , 1fr); */

grid-template-areas:

"a1 a1 a1"

"a2 a2 a3"

"a2 a2 a3";

/* 给每个格子起一个名字 */

}

.box div{background-color: red; border: 1px solid #000;}

.box div:nth-child(1){grid-area: a1;}

.box div:nth-child(2){grid-area: a2;}

.box div:nth-child(3){grid-area: a3;}

</style>

<body>

</div>

间距

grid-row-gap: 20px;

/* 每个网格横向的间距 */

grid-column-gap: 10px;

/* 每个网格纵向的间距 */

复合写法

grid-gap: 横向纵向;

每个小格子里面的内容怎么排列

justify-items: stretch;

align-items: stretch;

复合写法

place-items: 纵向横向;

每个格子在大盒子的水平垂直排列类似display：flex

justify-content: start;

align-content: space-around;

复合写法

place-content: 纵向横向;

@media媒介查询

@media screen and (max-width: 640px){

/* @media 媒介的意思 screen窗口的大小*/

/* 当 浏览器不超过640的时候使用以下样式*/

}

@media not and (max-width: 640px){

与上面的相反大于640px才会触发

@media screen and ( orientation: landscape)

在横屏下触发

@media screen and ( orientation: portrait) {

竖屏下触发

小于400px才引用外部css

移动端样式重置

移动端数字识别

format-detection 格式检测

telephone 主要作用是是否设置自动将你的数字转化为拨号连接

telephone=no 禁止把数字转化为拨号链接

telephone=yes 开启把数字转化为拨号链接，默认开启

email 告诉设备不识别邮箱，点击之后不自动发送

email=no 禁止作为邮箱地址

email=yes 开启把文字默认为邮箱地址，默认情况开启

adress 跳转至地图功能

adress=no 禁止跳转至地图

adress=yes 开启点击地址直接跳转至地图的功能, 默认开启

圆角bug：

部分Android手机圆角失效

Element{

background-clip: padding-box

}

IOS链接按钮点击时的灰色遮罩问题

button,a,textarea ,input {

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

IOS下按钮和输入框的默认样式

button,input {

-webkit-appearance: none;

border-radius: 0;

}

禁止文本缩放

html {

-webkit-text-size-adjust: 100%;

}

禁止默认操作

body {

-webkit-user-select:none;

-webkit-touch-callout:none; /* 系统默认菜单被禁用 */

}

修改placeholder样式

input::-webkit-input-placeholder {

color:#000;

}

input:focus::-webkit-input-placeholder{

color: blue;

}

预处理

less

@import "reset.css"; /* 导入css */

@w:1190px;/* 变量 */

使用

height:calc(@w - 1000px);

border-@{side}:10px solid @color + 200;

混入 @arguments

.boxShadow(@x,@y,@blur,@spreed,@color){

box-shadow: @arguments ;

}

.box1{

.public;

.boxShadow(0px, 0px,30px ,50px , @color)

}

继承 :extend

.box3{

&:extend(.public);

margin:auto;

}

// 等同于

.box4:extend(.public){

margin: 50px auto;

background: green;

}

运算

.bottom{

width:(200px-20)*2;

}

scss

引入

@import "./sc/base";

变量

$yyy : 200px !default;// 默认变量只要有新值就会覆盖

#dix1{

$color : #ccc;// 局部变量

$color : #ccc !global;// 全局变量

}

#div2 {// 特殊变量 #{表达式/变量}

border-#{$zzz} : 1px solid black;

}

混入

@mixin box-shadow($shadows...) {

box-shadow: $shadows;

}

.shadows {

@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);

}

继承 @extend

#div {

@extend .btn;// 继承了.btn 与 .btn 下a的属性

}

控制指令

判断

$theme : dark;

body {

@if $theme == darl {

background-color: black;

}@else if $theme == light {

background-color: white;

}

循环

$round : 12;

// 开始值结束值

@for $i from 1 through $round{

.col-#{$i}{

width: 100% / $round * $i;

}

$num : 5;

@while $num > 0 {

.item#{$num}{

width : $num * 2em;

}

$num : $num - 1;

}

$icons : success error waring;

@each $list in $icons {

.box-list{

background: url("#{$list}.png");

}

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/tomiaa/p/14701618.html

标签： HTML CSS HTML5 CSS3

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

HTML5+CSS3 笔记

HTML5+CSS3 笔记

内核

html

html标记的属性

文本格式

路径

链接

盒模型

box-sizing

表格

权值

font | text

单位

margin传递与塌陷

BFC

浮动

定位

定位浮动区别

vertical-align

去掉img下方3px间隙

显示隐藏

overflow属性

透明

meta标签

css的书写顺序

表单

css属性

datalist

文本溢出隐藏

单行溢出隐藏

多行溢出隐藏-webkit-内核

多行溢出隐藏 兼容较好

多栏布局

两栏布局

圣杯布局

双飞翼布局

等高布局

利用内外边距抵消法

嵌套法

多列布局

H5布局标签

多媒体

autoprefixer自动生成前缀

选择器

阴影

background

resize

渐变

兼容问题

图片的边框

IE 低版本的兼容

cssHack

条件Hack

属性Hack

选择符Hack

动画

弹性盒子

calc() 函数

grid网格布局

grid-template-areas区域划分

@media媒介查询

移动端样式重置

移动端数字识别

预处理

less

scss

相关课程

热门标签

推荐文章

多行溢出隐藏兼容较好