一篇博文带你0基础 Html和css入门

2021-05-29 13:27 441人阅读评论(0)

前端初学入门，找不到学习方向，不喜欢记笔记？没关系，这篇博文为你整理了详细的学习笔记汇总，欢迎收藏，喜欢的可以直接到博文尾处，免费下载md笔记哦~⭐⭐⭐

Html5

网站:

1、网站的建立流程🌙

注册域名
租用空间
网站建设

确定网站的主题

搜索资料

规划网站

制作页面

4.网站的推广

5.网站的维护

2、网页的组成及web标准🌙

结构：网页的结构部分 xhtml或html

表现：网页的样式css

行为：网页要实现的功能JS

HTML 超文本标记语言

XHTML 可扩展超文本标记语言

文件的创建

1、文件的命名规范

必须以英文字母等命名
不能有特殊的字符

2、一个网站文件的建立

三个文件css（表现）,js（行为）,image(图片，素材)⭐⭐
创建一个文本文件，后缀名改为html。

基础标签

1、基础语体⭐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

2、标记

<meta charset="utf-8">
这是防止中文乱码，在（head）里面

<br/>：换行；
<hr/>:空标记，一条长长的横线；
<s></s>:删除线
<u></u>:下划线
<tt></tt>:等宽
<sup></sup>:上标
<sub></sub>:下标
&nbsp;：空格；
&gt;   :>右大于号
&lt;   :<左小于号
&copy;  ：网页版权所有          
<p>段落文本</p>（不能自动换行）
<!--注释-->：快捷键为ctrl+/,选中内容即可转为注释

<b>内容</b>：加粗
<strong>内容</strong>：加粗
<i>内容</i>:倾斜
<em>内容</em>：倾斜
<div></div>：只有换行效果，用来创建网页的模块
<span></span>：内容中的的某一点提出改格式

<h1>网页的logo</h1>
<h2>网页的标题</h2>
...
<h6>网页的标题</h6>

HTML标签

1、图片

<img src="目标文件路径及全称" alt="图片替换的文本" title="图片标题"/>

文件名+/：是打开这个文件夹。

…/：返回上一级

./：当前文件夹

若网页和图片在同一个文件，直接输入图片的文件名。
图片在当前文件的子文件夹，用子文件夹名+/打开子文件，在输入图片名。
若都在子文件夹，先…/返回上一级，在进行上述操作。

2、链接

<a href="目标文件夹路径及全称/链接地址/内部链接id名" target="打开方式" title="提示文本" [download="下载路径"]>

链接地址一般都是遵循http://协议，所有网站地址前不加这进不去。
打开方式_self覆盖当前网页打开。_blank打开新的窗口。
download下载选项属性⭐⭐

3、基本标签

<div></div>
<span></span>

4、H5新标签⭐⭐⭐

<heaedr></heaedr>
<footer></footer>
<nav></nav>
<section></section>（一般表示内容快）
<article></article>（一般表示与上下不关联的独立内容）
<aside></aside>（一般表示article左右两边的内容）
<figure></figure>（独立内容，脱流）
<figcaption></figcaption>（figure标题，仅一个）
<mark></mark>（高亮）
<center></center>（居中标签）

5、序列表

1、有序列表：

<ol type="1<!--或i或I或a或A-->" start="数字"<!--表示从第几个地方开始-->>
    <li>列表内容</li>
    。。。
    <li>列表内容</li>
</ol>

2、无序列表：

<ul type="形状的英文单词"<!--如circle空心圆、aquare正方形。默认实心圆-->>
     <li>列表内容</li>
    。。。
    <li>列表内容</li>
</ul>

3、自定义列表：

<dl>
    <dt>名词</dt>
    <dd>解释</dd>
</dl>

6、表格⭐

<table width="数字px" height="数字px" bgcolor="背景颜色" cellspacing="数字px" cellpadding="数字px" border="边宽" bordercolor="边框颜色" rules="行列之间的线" align="left/center/right">
    <caption>标题</caption>
    <thead>
        <tr>
            <th></th>
            <!--注意⭐thead里的td换成th使用-->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        tr>td*3（快速创建）
    </tfoot>
</table>

cellspacing：单元格间的距离

cellpadding :单元格与元素间的距离

border=“边款实线或虚线颜色”

实线：solid；虚线：dotted；

align:模板位置，在表格和模块中使用。

align=“center”；使表格模板居中

注意：auto在表格里不适用，但align在页面上不能用。

valign：列排列位置：middle(中间)

rules：

rows：行之间的线

cols：列之间的线

all：行和列之间的线

none：没有线

group：每个格子的线（默认）

都是给td加

colspan=“所要合并的单元格的列数”，合并列

rowspan=“所要合并的单元格的行数”，合并行

7、表单

1、表单框

<form name="表单名称" method="post/get" action="路径" [enctype="multipart/form-data"]></form>

method：传递方式，“post”和“get”两种。get不安全，传输数据有限。

action：数据传输的路径。

name：和人名的功能一样，方便分组

enctype="multipart/form-data"：表单里有上传文件的表单项时必须加

2、表单分区⭐

<fieldset>
    <legend>我的</legend>
    <label for="">name</label>
    <input type="text">
</fieldset>

fieldset:自带边框边距

legend：线上写字，用padding调节位置

label：input的前(后)名字

input：单行文本输入框，前后名也可用p标签

3、input类型🌙

<input type="text" value='名字'><br>
<input type="password" placeholder="密码"><br>
<input type="submit"><br>
<input type="reset"><br>
<input type="button" value='按钮'><br>
<input type="checkbox">多选1
<input type="checkbox">多选2
<br>
<input type="radio" name="radio">单选1
<input type="radio" name="radio">单选2
<br>
<input type="number"><br>
<input type="color"><br>
<input type="file"><br>上传文件
<input type="email"><br>
<input type="url"><br>
<input type="range"><br>
<input type="search"><br>
<input type="time"><br>
<input type="month"><br>
<input type="week"><br>
<input type="hidden" value='123'>
<!-- <input type="image">(待定) -->🌙

4、input内联🌙

value=‘内容’

placeholder=“提示”

size=“字数”

patten=“正则表达式”

下面的可以使用正则更好

maxlength=“最大字数”

checked=“checked”(默认选中)

disabled=“disabled”(禁止选中)

step=“数据间隔”（待定）🌙

required(提交时内容不能为空)

min=‘’;max=‘’;（限制范围）🌙

multiple(框内输入多值，逗号隔开，设置多张图片等上传也是它)

autofocus（获取焦点）

autocomplete='off/on'(待定)🌙
list=‘id名’ (下拉提示框)
<input type="text" list='id'>
<datalist id='id'>
 <option value="我"></option>
 <option value="你"></option>
</datalist>

5、下拉列表()

<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>

select的value值为选中的option的value值

6、文本域⭐

<textarea name="" id="" cols="30" rows="10"></textarea>

8、视频⭐

<video src="视频路径" controls poster="图片路径">
    <source src="路径" type='video/mp4'>
    <source src="路径" type='video/ogg'>
    <source src="路径" type='video/webm'>
</video>

9、音频

<audio src="音频路径" controls poster="图片路径">
    <source src="路径" type='video/mp4'>
    <source src="路径" type='video/ogg'>
    <source src="路径" type='video/webm'>
</audio>

10、视频音频控件（内联）

controls：播放控件

autoplay：自动播放

loop：循环播放

poster：放前显示图片

muted：静音

js控制播放：play();

js控制暂停：pause();

11、滚动标签

<marquee behavior="" direction=""></marquee>

behavior:alternate(晃动)&scroll(滚动)&slide(到边停)

direction:四个方向

height

width

hspace=''设置水平边距。

vspace=''以像素或百分比值设置垂直边距。

loop=‘数’（次数）

scrollamount='数px'（滚动长度，默认6）

scrolldelay='数'（滚动间隔，单位毫秒）

12、flash(仅了解)⭐

1、新建一个flash文件

2、语法

<object data="" type="">
    <param name="movie" value="路径">
    <param name="wmode" value="transparent">
</object>

3、背景透明

1、<param name="wmode" value="transparent">
2、<embed src='路径' wmode='transparent'>

13、`iframe`标签

<iframe src="网站" 
        frameborder="0/1" (周围边框)
        scrolling="yes/no"(滚动条)
        name=""
        height=""
        width=""
        >
</iframe>

14、框架标签

<frame> 标签定义frameset中的一个特定的窗口（框架）。

在 HTML 中，<frame>标签没有结束标签。

在 XHTML 中，<frame> 标签必须被正确地关闭。

<html>
<frameset rows="165，*">
    <frame src="frame_top.htm" />
</frameset>
<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

</html>
将屏幕分为了上边一个横的，下面三条竖的。

属性	值	描述
frameborder	0 1	规定是否显示框架周围的边框。
longdesc	URL	规定一个包含有关框架内容的长描述的页面。
marginheight	pixels	定义框架的上方和下方的边距。
marginwidth	pixels	定义框架的左侧和右侧的边距。
name	name	规定框架的名称。
noresize	noresize	规定无法调整框架的大小。
scrolling	yes no auto	规定是否在框架中显示滚动条。
src	URL	规定在框架中显示的文档的 URL。

15、自定义属性

添加非标准的属性，只需要加前缀data-就可以

<div data-add="007"></div>

选择器⭐⭐⭐

1、通配符：

选择所有内容：*{}

2、群组选择器

语体：html,body{width:100%;height:100%;}

3、包含选择器

语体：ul li{}

4、层次选择器

1、父子选择器

语体：父>子>孙{}

注：可以连写，不能越级

2、兄弟选择器

语体：E+f:选择e后面的一个同级元素

3、兄弟们选择器

语体：E~f:选择e后面所有的同级元素

5、id选择器

语体：#id名{}

注：一个标签元素只能起一个id

6、class选择器

语体：.class名{}

注：class可以是多个标签的(类)名

7、属性选择器

语体：

E[属性名]{}：选择有该属性的元素

E[属性名='属性值']{}：选择有此属性及值的元素

E[属性名~='属性值']{}：选择多个属性名字中有此属性的

E[alt^='cat']{}：cat属性值在开头的元素

E[alt$='cat']{}：cat属性值在结尾的元素

E[alt|='cat']{}：属性值为cat且以alt_或alt-开头

8、结构选择器

1、多个相同的标签

E:first-child{}

E:last-child{}

E:nth-child(数字/odd/even/函数式){}

E:only-child{}

E:first-child{}

E:nth-last-child(数字/odd/even/函数式){}

2、多个不同的标签

将child换成of-type

9、伪类选择器

1、链接伪类选择器

1、a:link{}：选择前

2、a:visited{}：选择后

3、a:hover{}：鼠标悬浮

4、a:active{}：鼠标点击

5、div,a:hover{}：div为默认点击的效果

6、a:focus{}：被激活的选择器

7、E:not(#id名){}：除自己外的所有元素

注：这是所有元素都能使用，不仅是a标签。

2、根选择器

:root{}：根元素html的选择器

:empty{}：空元素的选择器

E:target{}：被链接锚点的选则器

3、表单伪类选择器

E:enabled{}：可选中的input

E:disabled{}：不可选中的input

E:checked{}：选则被点击的

E:selection{}：选择被选中的option

10、权重⭐

内联>id选择器>class选择器>标签选择器>通配符选择器。

1000>0100>0010>0001>0000

`CSS`样式⭐

1、字体

1、字体font

大小：font-size:16px (一般默认16px)

字形：font-family:'微软雅黑'
. 倾斜：font-style:italic (italic/oblique为倾斜，normal为默认正常)

加粗：font-weight:500 (bold为加粗，normal为正常，或100到900整百调整)

大写字母小型：font-variant:small-cap

复合：font: [italic] [bold] 16px/16px ‘’

2、字体颜色

color:red (或rgba/rgb 或#fff )

3、字体行间距

ling-height:16px

4、字体间距

中文：letter-spacing:1px
英文：word-spacing:1px

2、字段text

居中对齐：text-algin:center (center为居中，left为左对齐，right为右对齐，justify为两端对齐)

大小写：text-transform:none (uppercase为大写，lowercase为小写，capitalize为首大写，none为正常)

下划线：text-decoration:none (underline为下划线，overline为上划线，line-through为删除线，none为正常)

缩进：text-indent (缩进，单位：em，几个字符，数值为负时隐藏)

省略：text-overflow:clip (clip为不显示省略。。。，仅溢出隐藏；ellipsis为溢出显示省略）

文本阴影：text-shadow:(2px[水平偏移] 2px[垂直偏移] 2px[模糊度] red[阴影颜色])

3、列表样式`list`

形状：list-style-type:none (disc为实心圆，circle为空心圆，square为方体，none为无)

链接形状：list-image:url()

形状位置：list-position:outside (outside为在li外面，inside为在li里面)

清空样式：list-style:none

4、表格样式

border-collapse:collapse; 合并框，单线框
border-spacing:0px;格间距，或0px 0px(列间距行间距)
empty-cells:hide/show; 无内容单元格是否隐藏
table-layout：auto/fixed;自动分配宽度/固定表格的宽（加快加载速度）

5、内边距和外边距

margin (可为负)和padding (不可为负)

margin:0 auto;水平居中（浮动时不生效）

vertical-align:top/bottom; 垂直居中

1个值为四周，两个值为上下、左右，四个为上下左右

6、浮点float

参数：float:left(left为左浮动，right为右浮动)
影响：（未设宽）块元素的浮动后内容撑开宽度，内联转块
清除：clear:left（怎么浮动怎么清）或 overflow:hidden

7、background

background-color：颜色值。（只能设置颜色）
background-image:url(路径及名称);
background-repeat:no-repeat(不平铺) /repeat-x（水平） repeat-y（垂直）/ repeat（平铺）
background-position：0px 0px；（背景图片位移，图片整合技术-精灵图）
background-attachment:scroll(默认效果) /fixed（固定）容易与定位属性产生冲突。;
background-size:100% 100%；背景图片填充大小
background-clip:;背景裁剪

padding-box;padding内有颜色

content-box；框内有颜色；

border-box；默认
background-origin：；背景原点

padding-box：背景图片相对与边框定位

content-box；相对于内容定位

border-box；默认，相对于边框定位

复合使用：background:bg-color bg-image position/bg-size bg-repeat bg-clip bg-attachment

8、border⭐⭐

border-width：数值；
border-color:颜色值；
border-style:solid(实线)/dashed(虚线)/dotted(点线)/double(双线)；

. border：none；取消边框
bottom：；单独设一个边
radius:；弧形框设置，可多值设置；或者：（20px/20px）(水平半径/垂直半径)–-也能多值设置

. > 1个值是4个方向； 2个值：1上下 2左右；

3个值：1上，2左右，3下； 4个值：上右下左。
border-image-（网上查，用的极少）

source；边框图片的路径

slice；图片的偏移或裁剪程度；

repeat；repeat(平铺；效果不好) /round(铺满；效果好) /stretch(拉伸)

outset;向外超出边框线的倍数，无单位
```
border-img:url() 0px 0px round;
```

9、盒子阴影

box-shadow: 0px 0px 0px 0px red inset/outset

水平垂直模糊度阴影大小阴影颜色内外阴影

多个阴影设置时用逗号隔开，配合border可实现月牙效果

10、溢出overflow

overflow:visible（默认）
overflow:hidden(隐藏)超出隐藏
overflow:scroll；无论超出否，都有滚动条。
overflow:auto;超出才有滚动条。
overflow:overflow-x;
overflow:overflow-x;
overflow:inherit;继承

11、white-space

white-space:normal 默认值
white-space: nowrap；不换行，自到遇换行符
white-space: pre 空白（空格打出来的）会被浏览器保留。不换行
white-space: pre-warp 空白保留，换行
white-space: pre-line 空白合并
white-space:inherit 继承

12、省略号显示

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:4;/*设置显示行数*/
-webkit-box-orient:vertical;

直接复制到需要的标签的css颜色设置里

13、换行

粗暴换行：word-break:break-all

直接按顺序排列内容，超出部分直接换行
智能换行：word-wrap:break-word

先尝试把内容放下一行，放不下时才换行

14、定位

position:

relative;相对定位（占位）

absolute；绝对定位（不占位）

fixed；固定定位（不占位）

static；取消定位

sticky；粘性定位（效果极差，不如jQuery直接设置）

i-index:

i-index：1；数值为整数，可谓负，表层级面面位

15、display

display设置

display：none；绝对隐藏，不占位

block；块元素

inline；行内元素

inline-block;行内块元素

list-item；li的特殊转换

标签的元素分类⭐⭐⭐

块元素：
```
div p h ol ul dl li dt dd form hr
```
行内元素
```
span i em b strong a br
```
行内块元素
```
img input select textarea
```

继承关系

不可继承的

display margin border padding height min-height max-height min-width max-width background overflow position left right top bottom z-index float clear table-layout vertical-align

所有元素可继承：

visibility和cursor

字体样式和段落样式

列表继承列表

表格继承表格

16、透明度及居中

1、透明度

rgba(0,0,0,0.5)/*只变背景*/
opacity:;/*范围0到1，内容也一起变化*/

2、水平垂直居中

position:absolte;
left:0;top:0;right:0;bottom:0;
margin:auto;

17、占位隐藏

opacity为负数时占位隐藏

配合固定定位实现遮罩效果
visibility:hidden;占位隐藏
background-visibility：hidden；定义与那是不面向屏幕隐藏

18、高度塌陷

原因：

父元素不设高度和设置最小高度时，子元素浮动不占位时会出现高度塌陷，父元素保不住子元素

解决

父元素加：overflow:hidden
最后添加一个占位的空盒子

万能清除法

.cleanfix:after{
     
    content:"";
    height:0px;
    visibility:hidden;
    display:block;
    clean:both;
}
.cleanfix{
     *zoom:1;}

19、鼠标指针

cursor:

url()

default; 默认或auto 默认

crosshair; 十字光标

pointer；手指

move；移动光标

text

wait

help

20、`icontont`使用

https://www.iconfont.cn/

class名的修改使用，基于class的使用

21、多列

column-count：；列数，设置列分组
column-gap：；列之间的距离
column-rule：；例：1px solid #000列之间的线
column-fill：；设置每列高度是否一致
auto；列高度自适应；填充满后换列

balance；列的高度一样
column-width：；设置列的宽度。会与column-count起冲突（和执行顺序无关）谁分配的宽度大执行谁

22、伪对象选择

content在html里表示内容的意思

:after与content一起使用，定义在对象后面的内容
:before与content一起使用,定义在对象前面的内容
:first-letter定义在第一个字符的样式
:first-line定义在第一行内容的样式
例
div:first-line{color:red}
还如万能清除法的使用

bug问题

1、兼容过滤器

下划线过滤器

background:red;高版本识别
_background:red;低版本识别

!important;	跟着设置的属性后面，表示超大权限

*过滤器 加载属于前面，ie7以上的识别（如万能清除法）

2、`BFC`⭐⭐⭐⭐⭐

1、bfc的布局规则

1.浮动的元素会被父级计算高度（父级触发了BFC）

2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

3.margin不会传递给父级（父级触发了BFC）

4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

2、触发条件：

1.float的值不为none

2.overflow的值不为visible（副作用最小）

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

5.根元素：html

3、浏览器内核

1、分类

Trident(MSHTML)(三叉线)

Grcko（壁虎）

Presto（迅速的）

Webkit（Safari内核，Chrome内核原型，它是苹果公司自己的内核，也是苹果公司Safari浏览器使用的内核）

Blink（由Google和Opera Sotfware开发的浏览器排版引擎）

2、代表作品

Trident:IE,Maxthon（遨游），theworld世界之窗，360浏览器

Gecko:代表作品mozilla Firefox 是开源的，它的最大优势是跨越平台，能在Microsoft windows Linux和MacOS X等主要操作系统上运行

Webkit:代表作品Safari,Chrome,傲游浏览器3，是一个开源项目

Presto：代表作品Opera(前内核)，Presto是由Opera sotfware开放的浏览器排版引擎，它也是世界上公认的渲染速度最快的引擎，Opera现已改用Google Chrome的Blink内核

Blink：由Google和Opera Software开发的浏览器排版引擎。

3、bug的产生

不同浏览器的开发商的核心架构和技术不同。导致了bug的产生。

CSS Hack:css中的非官方补丁修改。

filter：过滤器的意识。

4、浏览器前缀⭐⭐

前缀	-ms-	-moz-	-o-	-webkit-
浏览器	ie	gecko	opera	webkit

5、图片bug

1、自带边框

当a包裹图片的时候，在ie10一下浏览器对自带边框。

解决办法：

img{border：none;}

2、图片间隙

当块元素包裹图片的时候，在任何浏览器都会出现下面3px的间隙。

解决办法：

img{dispay:block}

img{vertical-algin:top；}

在父元素加font-size：0；

6、双倍边距

ie双倍边距bug

在ie6浏览器下，浮动元素设置margin，第一个设置Margin的元素时双倍的外边距。

解决方法：

属性定义最后转换成内联元素。

7、最小高度

在ie6一下版本的浏览器，设置18拍的高度，

加overflow：hidden

8、form表单的bug⭐⭐⭐

1、对齐问题

按钮和文本框对齐方式不一致。

解决方法：给文本框和按钮都加浮动。

2、文本框的行高问题

ie6及一下，内容不是垂直居中。

解决：给文本框加行高

3、按钮边框问题

在ie低版本浏览器下。按钮会自带两条边框。

若按钮需要边框，用其他标签设置

解决：按钮设置border：none/0

4、按钮大小问题

按钮宽高的解析方式更其他元素不同，边框是宽高内容里

解决：如果按钮是链接效果，可以用a标签模拟

9、%宽度bug

低版本50%+50%>100%的bug

7及7一下的会出现。

给右浮动的元素加clear：right；

10、`li`的梯状bug

若给导航的a设置float，在ie7一下浏览器会出现梯状bug，

解决办法。给li里加浮动。

移动端弹性盒⭐

1、怪异盒

box-xizing:border-box;（转换）

padding和border都算在width里面，不会额外增加width。

2、弹性盒

1、display：flex;（转换）

父元素设置弹性盒，子元素就称为灵活元素。

灵活元素基本都能设置宽高。

2、排列flex-direction

x轴排列：

row;从左到右

row-reverse;从右到左

y轴排列：

column:从上到下

column-reverse:从下到上

注意，y轴排列时子元素加行高父系高度自适应保不住。

3、换行flex-wrap

flex-wrap：

nowrap；（默认不换行，子元素一行相互挤压）

wrap：自动换行

wrap-reverse；自动换行，内容reverse；

4、主轴排列方式justify-content：

flex-start；从头部开始排

flex-end；从尾部开始排

center；居中

space-between；两端对齐；

space-around；自动分配

5、侧轴排列方式align-items

flex-start；从头部开始排

flex-end；从尾部开始排

center；居中

stretch；（默认拉伸）子元素不设置高度时

baseline；基线对齐

行间距+height=不设置高度时的拉伸。

6、取消换行后的行间距align-content

flex-start；从头部开始排

flex-end；从尾部开始排

center；居中

space-between；两端对齐；

space-around；自动分配

3、flex项目属性（子元素属性）

1、align-self：；设置单个子元素的位置

auto

flex-start；从头部开始排

flex-end；从尾部开始排

center；居中

stretch；（默认拉伸）子元素不设置高度时

baseline；基线对齐

2、flex（复合）

flex-order:;默认为0，值越大排列越靠后

flex-grow:;设置份数，按份数分父元素的宽或高。

flex-shrink:;值为0时不缩小，为1时缩小。

flex-basis:;默认为auto，其他值不知道也没用过。

常用复合：flex：1；或flex：0 1 auto；

4、移动端布局

1、搜索框宽度自适应

两边设置宽度，中间不设置宽度，父系弹性盒。

2、悬挂

第一个加align-self：flex-start；效果如定位，但比定位好。

3、流式（又称为百分比）

每行的格子数一定。

子元素设置父元素宽度的%。
父元素设置弹性盒，自动换行，清行间距。

5、媒体查询

直接使用栅格布局，不用媒体查询

@media后的词

screen and{ }

all and{ }

screen and （orientation：portrait）竖屏

screen and （orientation：landscape）横屏

使用格式：

@media all and (min-width: 320px){
   
	html{
   
		font-size: 12px;
	}
}
@media all and (min-width: 321px) and (max-width: 375px){
   
	html{
   
		font-size: 14px;
	}
}
@media all and (min-width: 376px){
   
	html{
   
		font-size: 16px;
	}
}

5、禁止缩放

<meta name="viewport" 
      content="width=device-width,
               initial-scale=1.0,
               maximum-scale=1.0,
               user-scalable=no"
      >

6、`vw`移动端设置

1、`dpr`的概念

===设计像素➗物理像素=dpr==

1080的dpr=3；

750的dpr=2；

680的dpr=2；

2、vw相对单位：

当前窗口的百分比（整个屏幕包括滚动条）

%是父元素的百分比，不含滚动条，与vw不同。

3、使用方法：

例：如果当前为750px；（逻辑像素）

750px的dpr为2；
750px➗dpr=375px（物理像素）
1vw=3.75px
100px=26.67vw

所以html的font-size设置为26.67vw

子元素的物理像素➗100=子元素设置的rem值。

4、不同的vw

750px的设置26.67vw

680px的设置31.25vw

1080px的设置27.78vw

`css`3特效⭐

1、颜色渐变

1、线型渐变

1.1标准

background:linear-gradient( to+变化方向，颜色1，颜色2，。。);

1.2兼容

background:-webkit-linear-gradient( to+变化方向，颜色1，颜色2，。。。)；

兼容是方向与标准是相反的。

2、径向渐变（只有兼容）

background:-webkit-radial-gradient( 渐变中心，形状，大小，颜色1，颜色2，。。。)；

center：渐变中心（top left),或（15px 30px）

shape：circle 圆，ellipse 椭圆，

size:

closest-side;最近边；

closest-corner：最近角；

fathest-corner：最远角；

fathest-corner；最远边；

注意：

shape和size只能存在一个。

3、重复渐变

1、重复型线型渐变

background:linear-gradient( to+变化方向，颜色1，颜色2  20%， 颜色3 %。。。)；（不设置方向默认从上到下）

兼容的和线型一样。

2、重复型径向渐变

background:-webkit-repeating-radial-gradient( 渐变中心，形状，大小，颜色1，颜色2  20%， 颜色3  30%，。。。)；

3、两种不同背景颜色

background:linear-grandient(颜色1 50%，颜色2 50%)；

2、`css`动画过渡

属性设置

transition：	all	0s	0s	ease
transition：	属性名	过度时间	延迟时间	过度速度
transition：	porperty	duration	delay	timing-function

timing-function的属性值

ease 逐渐慢

ease-in 加速

ease-out 减速

ease-in-out 先加后减

linear 匀速

贝塞尔曲线：网上查询函数值。

3、`2D`特效

1、transform

translate(水平，垂直)；移动，根据自己原来的位置移动

%为单位时是自己的宽度%，可配合定位的中心放大使用；

translate-X（水平）；

translate-Y（垂直）；

scale（水平，垂直）自身倍数缩放（默认中心放大）0是隐藏,没有了

scale-X（）

scale-Y（）

rotate(0deg) 旋转，单位度（deg）

默认中心旋转

rotate-X（）中心x轴旋转

rotate-Y（）中心y轴旋转

skew（x轴deg，y轴deg）倾斜（长方形变平行四边形）

transform-origin：（左右，上下）旋转的中心点

可设置单词也可设置数值

2、transform的复合

transform:{
   属性1   属性2  。。}用空格隔开

3、div的变形

1、div变箭头

设置左边框和上边框，用transform：rotate（45deg），变成箭头

2、div变三角（transparent透明属性）

不设宽高，用边框宽度将div撑起来，给需要的方向的变上色，其他边设置透明属性：transparent；

4、动画使用

ie9以上才兼容

1、关键词

创建动画：@keyframes

触发动画：animation

2、创建动画@keyframes

1、@keyframes name{
   form{
   初始状态} ...to{
   结束状态}}
2、@keyframes name{
   0%{
   初始状态} ...100%{
   结束状态}}

name必须写，用于调用

3、调用动画animation

animation-

name:;动画的名字，必写

duration:;动画的执行时间，必写

timing-function:;过度速度

delay:;延迟时间

iteration:;执行次数：数字或infinite（无限循环）

direction：运动的。。。

normal;正常

alterbnate；交替运行

alterbnate-reverse；反交替

fill-mode：

none；默认

both/forword；动画完成后，保留最后在最后一帧画面。

backwords；动画完成后，回到起点

play-state：动画时的状态，与hover配合使用。

runing;运动

paused；暂停

4、`3D`特效

1、景深（近大远小）perspective

与3d一起使用才能出效果

1、父元素设

perspective:1200px;每个子元素的效果不同

2、子元素设

transform:perspective(1200px);每个子元素效果一样

2、景深中心点

perspective-origin

perspective-origin: x轴，y轴 ; 默认为50%；

3、3d空间

transform-style：preserve-3d；

必须写，不写不出效果。

4、3d位移

transform-translate-Z（）多个z轴

transform-translate3d（，，）改变三个轴。

5、3d旋转

transform：rotated3d（ x ，y ，z， a）

（x， y， z）为旋转中心点，a为旋转的角度。

6、放缩

transform：scale3d（，，）

笔记md下载地址：

https://download.csdn.net/download/weixin_44070254/19138539

博主汇总不易，喜欢的朋友们可以收藏。欢迎一键三连哦~

转载：https://blog.csdn.net/weixin_44070254/article/details/117339998

查看评论

小言_互联网的博客