经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
HTML5+CSS3 笔记
来源:cnblogs  作者:tomiaa  时间:2021/5/6 17:37:01  对本文有异议

内核

内核

浏览器

前缀

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

-->

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

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

<head>

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

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

    -->

    <meta charset="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>

路径

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

    / 下一级

    ./ 当前目录

    ../ 上一级目录

    ../../ 上上级目录

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

链接

<a href="" 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

表格

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

        单元格间距       单元格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标签

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

    author              作者

    keywords            定义关键字

    description         定义描述

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

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

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

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

<meta http-equiv="refresh" content="30">

每30秒钟刷新当前页面:

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

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

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

<meta name="HandheldFriendly" content="true">

网页图标

<link rel="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           周

 

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

input属性 

    value       初始值

    placeholder 提示信息

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

    multiple    可以选择多个文件

    size      下拉列表可见数

    maxlength  最大长度值

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

    disabled   禁用,不可读,不可写

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

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

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

    autofocus  自动获得焦点

    required  必填字段(不能为空)

 

<select>      默认选中

    <option selected></option>

</select>

 

textarea{

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

}

<textarea></textarea>

css属性

outline: none;

去除选中边框

resize: none;

    - none        无法调整元素的尺寸

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

    - vertical     可调整元素的高度

    - horizontal   可调整元素的宽度

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

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

}

datalist

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

<datalist id="car"> 

    <option value="web"></option>

</datalist>

 

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

</form>

<input  form="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;

}

<div class="left">left</div>

<div class="right">

    <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="wrap">

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

    <div class="left">left</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="main">

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

</div>

<div class="left">left</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="box">

    <div class="col col1">第一列;第一列;第一列;第一列;第一列;第一列;第一列;</div>

    <div class="col col2">第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;第二列;</div>

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

</div>

<div class="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;

}

 

.bg3 div{

    width:300px;

    float: left;

    position: relative;

}

.bg3 .col1{

    margin-left:-600px;

}

.bg3 .col2{

    margin-left:-300px;

}

<div class="wrap">

    <div class="bg1">

        <div class="bg2">

            <div class="bg3">

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

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

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

            </div>

        </div>

    </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>

    <h1>主标题</h1>

    <h3>副标题</h3>

</hgroup>

其他的标签

    figure 定义了图片的文本内容

<figure>

    <img src="" alt="">

    <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]>

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

<![endif]-->

多媒体

视频<video>

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

- controls  播放控件

- loop  循环播放

- muted  静音播放

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

- poster 预览图

- width 宽度

- height  高度

 

音频<audio>

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

- controls  播放控件

- loop  循环

- muted  静音播放

 

资源标签

<source> 

<video> 

    <source src="./videoAudio/movie.mp4">

</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:

    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)  -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 class="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媒介查询

@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) {

    竖屏下触发

<link rel="stylesheet" href="css.css" media="all and (mid-width:400px)">

小于400px才引用外部css

移动端样式重置

移动端数字识别

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

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

 

<meta name="format-detection" content="telephone=no"/>

<meta name="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}: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");

}

 

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

 友情链接: NPS