首页 > 网页制作  > 前端开发

HTML5+CSS3 笔记

admin 前端开发 2021-04-26 16:44:27  
后台-系统设置-扩展变量-手机广告位-内容正文底部

内核

内核

浏览器

前缀

webkit

Safari(苹果)

webkit

webkit/Blink

Chrome (谷歌)

webkit

Gecko

firefox (火狐)

moz

presto/webkit/Blink

Opera(欧朋)

o

Trident

IE浏览器的内核

ms

html

<!DOCTYPEhtml>

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

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

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

doc=document文档

type=类型

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

-->

<htmllang="en"><!--html网页的开始-->

<!--网页的头部包含了脚本以及css样式和元信息(title和meta等)-->

<head>

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

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

-->

<metacharset="UTF-8">

<!--title定义了网页的标题-->

<title>百度一下,你就知道</title>

</head>

<!--网页的主体定义设计稿需要实现的内容-->

<body>

</body>

</html><!--网页的结束-->

html标记的属性

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

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

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

文本格式

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

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

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

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

<del>删除线</del>

<s>删除线</s>

<sup>上标sup</sup>

<sup>下标sub</sup>

显示中文拼音

<ruby>

饕<rt>tāo</rt>

</ruby>

<ruby>

餮<rt>tiè</rt>

</ruby>

路径

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

/下一级

./当前目录

../上一级目录

../../上上级目录

绝对路径:从盘符开始,服务器端

链接

<ahref=""target="" title=""></a>

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

表格

<tablecellspacing='0'cellpadding='0'></table>

单元格间距单元格padding

rowspan纵合并colspan横合并

css属性:

border-collapse:collapse;

权值

1.层叠性

2.继承性

继承属性:font-line-colortext-,除text-decoration

3.优先级

!important1000>id100>class10>标签1>通配符*0

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

font | text

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

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

font-style: normal|italic

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

font:font-stylefont-weightfont-size/line-heightfont-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标签

<metaname='viewport'content='width=device-width,initial-scale=1.0'>

author 作者

keywords 定义关键字

description 定义描述

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

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

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

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

<metahttp-equiv="refresh"content="30">

每30秒钟刷新当前页面:

<!--以最高版本的ie渲染显示-->

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<!--兼容不支持viewport的设备-->

<metaname="HandheldFriendly"content="true">

网页图标

<linkrel="icon"href="favicon.ico">

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周

<formaction="http"method="GET"></form>

input属性

value 初始值

placeholder提示信息

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

multiple 可以选择多个文件

size 下拉列表可见数

maxlength最大长度值

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

disabled 禁用,不可读,不可写

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

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

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

autofocus自动获得焦点

required必填字段(不能为空)

<select> 默认选中

<optionselected></option>

</select>

textarea{

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

}

<textarea></textarea>

css属性

outline:none;

去除选中边框

resize:none;

-none 无法调整元素的尺寸

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

-vertical 可调整元素的高度

-horizontal 可调整元素的宽度

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

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

}

datalist

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

<datalistid="car">

<optionvalue="web"></option>

</datalist>

<formid="login"> 提交绑定 login 提交

</form>

<inputform="login">

文本溢出隐藏

单行溢出隐藏

.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;

}

<divclass="left">left</div>

<divclass="right">

<divclass="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;

}

<divclass="wrap">

<divclass="center">center</div>

<divclass="left">left</div>

<divclass="right">right</div>

</div>

双飞翼布局

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

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

​2.将三个盒子都浮动

​3.中间盒子main占满100%

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

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

.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:0px200px;

}

<divclass="main">

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

</div>

<divclass="left">left</div>

<divclass="right">right</div>

等高布局

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

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

​一列变高,其他列的高度都要变化

利用内外边距抵消法

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

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

.box{

width:900px;

margin:auto;

overflow:hidden;

}

.box:after{

content:'';

clear:both;

display:block;

}

.boxdiv{

width:300px;

float:left;

padding-bottom:999px;

margin-bottom:-999px;

}

.col1{

background:pink;

}

.col2{

background:greenyellow;

}

.col3{

background:yellow;

}

.test{

height:100px;

background:#000;

}

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

<divclass="box">

<divclass="colcol1">第一列;第一列;第一列;第一列;第一列;第一列;第一列;</div>

<divclass="colcol2">第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;</div>

<divclass="colcol3">等高布局:多列子元素在父元素中实现</div>

</div>

<divclass="test"></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;

}

.bg3div{

width:300px;

float:left;

position:relative;

}

.bg3.col1{

margin-left:-600px;

}

.bg3.col2{

margin-left:-300px;

}

<divclass="wrap">

<divclass="bg1">

<divclass="bg2">

<divclass="bg3">

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

<divclass="col2">第二列</div>

<divclass="col3">第三列</div>

</div>

</div>

</div>

</div>

多列布局

被分隔的列数

column-count:number|auto;

元素的列宽

column-width:auto|length;

列宽

column-gap:length|normal;

边框线样式,是一个简写:column-rule-*:colorwidthstyle;

column-rule:widthcolorstyle;

H5布局标签

headerfooternav

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

section章节,标题和段落组成

aside侧边栏

hgroup标题和子标题进行分组

<hgroup>

<h1>主标题</h1>

<h3>副标题</h3>

</hgroup>

其他的标签

figure定义了图片的文本内容

<figure>

<imgsrc=""alt="">

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

</figure>

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

mark标记标签

time标记定义日期或时间

标签的兼容

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

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

document.createElement('header');

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

2、使用封装好的插件,引入js文件(html5shive.js)

<!--[ifltie9]>

<scriptsrc="./js/html5shiv.min.js"></script>

<![endif]-->

多媒体

视频<video>

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

-controls播放控件

-loop循环播放

-muted静音播放

-autoplay自动播放(静音属性才有效)

-poster预览图

-width宽度

-height高度

音频<audio>

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

-controls播放控件

-loop循环

-muted静音播放

资源标签

<source>

<video>

<sourcesrc="./videoAudio/movie.mp4">

</video>

autoprefixer自动生成前缀

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

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

3.在css文件中,按“f1",选择“autoprefixerCSS”

选择器

​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:xyblurcolor;

box-shadow:xyblurspreedcolorinset;

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

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(角度,颜色);

关键字:leftrighttopbottom

​角度值:角度的单位deg

重复线性渐变

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

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

径向渐变

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

中心点取值:

关键字:center

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

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

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

background-image:radial-gradient(farthest-sideat60%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

<!--[ifie]>

<style>

选择器{声明;}

</style>

<![endif]-->

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

gt大于

gte大于等于

lt小于

lte小于等于

!非指定版本

属性Hack

IE6-属性前

IE7-属性前

IE8-9属性值后

选择符Hack

IE6-

.box{

background:yellow;

}

IE7-

.box{

background:green;

}

动画

过渡

transition:propertydurationtiming-functiondelya;

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

duration:过渡时间s/ms

timing-function:linear匀速ease

delay延迟时间

动画

1.创建动画过程@keyframes

2.调用动画

animation:namedurationtiming-functiondelayiteration-countdirection;

name动画名称,绑定到@keyframes

duration完成动画的时间

timing-function曲线速度linear

delay延迟时间

iteration-count动画播放次数numberinfinite无限

direction是否轮流反向alternate

变换

transform:

2D

translate(x,y)平移

rotate(deg)旋转

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

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

3D

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

translate3d(x,y,z)

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

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

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

rotate3d(x,y,z,deg)-1010-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-basisauto;分配多余空间前,项目占据的主轴空间,

flex:flex-growflex-shrinkflex-basis;

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

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

calc()函数

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

.box{

calc(表达式);

}

运算符前后保留一个空格

grid网格布局

display:grid;

/*网格布局*/

grid-template-rows:20%10%100pxauto;

/*四行*/

grid-template-columns:100pxauto20%;

/*三列*/

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:1pxsolid#000;

display:grid;

/*网格布局*/

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

/*四行*/

/*grid-template-columns:100pxauto20%;*/

/*三列*/

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

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

grid-template-areas:

"a1a1a1"

"a2a2a3"

"a2a2a3";

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

}

.boxdiv{background-color:red;border:1pxsolid#000;}

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

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

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

</style>

<body>

<divclass="box">

<div>1</div>

<div>2</div>

<div>3</div>

</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媒介查询

@mediascreenand(max-width:640px){

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

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

}

@medianot and(max-width:640px){

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

@mediascreenand(orientation:landscape)

在横屏下触发

@mediascreenand(orientation:portrait){

竖屏下触发

<linkrel="stylesheet"href="css.css"media="alland(mid-width:400px)">

小于400px才引用外部css

移动端样式重置

移动端数字识别

<!--以最高版本的ie渲染显示-->

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<metaname="format-detection"content="telephone=no"/>

<metaname="format-detection"content="email=no"/>

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}:10pxsolid@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:50pxauto;

background:green;

}

运算

.bottom{

width:(200px-20)*2;

}

scss

引入

@import"./sc/base";

变量

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

#dix1{

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

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

}

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

border-#{$zzz}:1pxsolidblack;

}

混入

@mixinbox-shadow($shadows...){

box-shadow:$shadows;

}

.shadows{

@includebox-shadow(0px4px5px#666,2px6px10px#999);

}

继承@extend

#div{

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

}

控制指令

判断

$theme:dark;

body{

@if$theme==darl{

background-color:black;

}@elseif$theme==light{

background-color:white;

}

}

循环

$round:12;

//开始值结束值

@for$ifrom1through$round{

.col-#{$i}{

width:100%/$round*$i;

}

}

$num:5;

@while$num>0{

.item#{$num}{

width:$num*2em;

}

$num:$num-1;

}

$icons:successerrorwaring;

@each$listin$icons{

.box-list{

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

}

文章来源:https://www.cnblogs.com/tomiaa/p/14701618.html

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://jcdi.cn/wyzz/90b663189e196dbb823f7e3f88ea88e8.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码