一阶段点滴

最新推荐文章于 2023-08-19 22:12:29 发布

转圈圈_

最新推荐文章于 2023-08-19 22:12:29 发布

阅读量150

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/m0_55804486/article/details/118023619

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

web标准

制作网页要遵循的规范

包括html（结构标准语言）、css（样式标准语言）、js（行为标准语言）

get/post区别

get:

1、从服务器上获取数据 2、get方式不安全，数据可以在url（浏览器地址栏）上看到 3、get传输数据大小有限制，一般2kb左右 4、get传输速度比post快 post:

1、向服务器传输数据 2、是通过https加密过的，所以更安全 3、post理论上数据大小没有限定 4、post没get快

title/alt区别

title 图片标题鼠标悬停时出现的标题 alt 提示信息图片无法加载时给用户的一个警告

常用的css选择器

元素选择器/类型选择器，类似div{}

ID选择器：#ID名{}

class选择器：.class名{}

群组选择器：名称1，名称2，名称3...{}

通配符选择器：*{} //重置样式

包含选择器：父元素名称子元素名称{}

伪类选择器：（要按顺序写）

a:link{} 初始状态

a:visited{} 被访问后的状态

a:hover{} 滑过时的状态

a:active{} 按下时的状态

import/link区别

1、link是html提供的方式，import属于css自身提供的方式 2、link可以让样式和结构同时加载，import是先加载结构后加载样式，当网速过慢时会出现明显闪烁情况。 3、link没有兼容问题，import一些老版本浏览器不支持 4、link可以被js里的DOM控制，import没办法被控制

优先级问题

！important优先级最高

内联样式表优先级权重1000

id选择器优先级权重100

class选择器优先级权重10、伪类选择器优先级权重10

元素选择器/类型选择器优先级权重1

高权重会覆盖低权重的属性，相同权重的选择器后写的会采用。

清除浮动的三种方法

1、给父元素添加overflow：hidden；

2、在父元素下添加一个空的子元素div，给它写入css样式：clear:both; //这个div下只能有这一个属性。

3、万能清除浮动
.clear::after{
    height:0;
    clear:both;
    content:"";
    display:block;
    visibility:hidden;
}
.clear{zoom:1;}

border实现三角形

div下不给宽高，只给border属性，

类似border-top：10px solid #f00;
此时显示的就是一个方向朝下的红色三角形

border-radius、圆角

border-radius：边框圆角属性

border-top/bottom-left/right-radius: xx px;

边框的线型
border-style：solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)

盒模型：标准盒、怪异盒

box-sizing:border-box(怪异盒)/content-box(标准盒);
标准盒包含margin、border、padding、content
怪异盒包含margin、content，content里面包含border、padding和内容区域

实现省略号

设置宽度width
再设置一行内显示 white-space:nowrap;
再设置溢出隐藏 overflow:hidden;
再设置溢出显示省略号 text-overflow:ellipsis;

元素类型：块、内联块、内联（行内）

块级元素：div、dl、dt、dd、ol、ul、fieldset、h1-h6、p、form、hr、colgroup、table、td、tr、col
特点：独占一行
行内元素/内联元素 a、span、i、em、strong、b
特点：横向排列，不可设置宽高
内联块元素：img、input、textarea
特点：同时具备内联元素和块状元素的特点，可设置宽高，且在一行内显示

锚点定位

在同一页面内的不同位置进行跳转

例：通过#a这个链接，跳转到a这个div盒子

定位

position:static/relative/absolute/fixed/sticky;

static:默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位设置了固定定位，他会相对于整个浏览器进行定位
sticky：粘性定位粘性定位是相对定位和固定定位的混合

一般使用是子绝父相，子元素设置绝对定位，父元素设置相对定位

透明度的兼容写法

在IE上需要使用filter:alpha(opacity=值);值在1-100
其他浏览器透明度的写法是opacity:值; 值在0-1

图片整合优势

1、通过图片整合减少对服务器的请求次数，从而提高页面加载速度。

2、通过整合图片来减少图片的体积。

3、减少了图片文件数目，提高了页面性能

浏览器兼容：8种问题

- css Bug：css样式在浏览器解析不一致的情况，或者说css样式在浏览器中不能正确显示的问题都叫css bug

- css Hack是一种兼容css在不同浏览器正确显示的技巧方法。

与此同时，Hack也会带来一些副作用：降低了css代码的可读性，增加了代码负担。

1、图片间隙

在div中插入图片时，图片会将div撑大三像素

hack1：给img添加display：block；
hack2:设置float:left;
hack3：设置vertical-align：top；

2、margin-top

问题：子元素没设置任何浮动，设置了margin-top之后，会错误的把margin-top给父元素添加

即父子一起移动。

hack:给父元素添加overflow：hidden；

3、图片有蓝色边框

问题：出现在IE中，当图片加在a标签里，会出现蓝色边框

hack:给图片设置border：0；

4、透明度问题

问题：IE上与其他浏览器上的透明度写法不同。

在IE上需要使用filter:alpha(opacity=值);值在1-100
其他浏览器透明度的写法是opacity:值; 值在0-1

5、表单距浏览器顶部不一致

表单元素距离顶部位置不一致

hack：float：left；

6、表单按钮样式不一样

问题：不同浏览器默认的按钮样式不一样

hack：
1.统一大小（宽高等）

2.input外面套一个标签，然后在这个标签里写按钮的样式，再把input边框去掉

3.如果按钮是一个图片，直接把图片做为按钮的背景图即可。

7、鼠标指针问题

问题：cursor的hand属性值只有在IE9以下浏览器可以识别，其他浏览器不识别，而pointer属性值在IE6.0以上都可以识别。

hack:添加cursor值，例如cursor：pointer，将鼠标变为手型，不使用hand

8、表单文本行高问题

问题：表单元素里的文本无法居中

hack:给表单元素设置行高

filter过滤器

下划线过滤器 _属性：属性值；高版本卡不懂，只有与IE看得懂

浏览器内核自带私有词缀

-webkit-谷歌

-moz-火狐

-ms- IE

-o- 欧朋

浏览器代表作

五大内核

Trident

代表作品：IE、Maxthon、腾讯

Gecko

代表作品：Firefox

Presto

代表作品：Opera

Webkit（Safari内核，Google内核）

代表作品：Safari、Chrome

Blink（由谷歌和Opera Software开发的浏览器引擎）

可以为负值的属性：

margin、background-、z-index、transform、text-indent...

BFC的概念

1、上下文指的是代码的执行环境

2、css里面有很多属性的规则：

==》浮动流

==》定位流

==》标准流（文档流）

3、BFC也是一种规则：

box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。

BFC是一个独立的隔离的环境，不会影响其他的环境。

高度塌陷因为脱离文档流，触发了一个BFC，不再遵循文档流。

设置overflow：hidden，也触发了一个BFC，浮动的规则不再影响父元素。

BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素。它规定了元素与其他元素的关系和相互作用。

H5标记

<header></header>头部
<nav></nav>导航
<main></main>内容区域
<footer></footer>脚部
<section></section>内容的一个块
<aside></aside>侧边栏
<article></article>文章
<figure></figure>是一种元素的组合，带有可选标题
<figcaption></figcaption>表示figure的标题，一个figure只能有一个figurecaption
<mark></mark>高亮显示
<address></address>地址
<canvas></canvas>画布必须配合js使用

表单里的语义化标签：
<label>电子邮箱</label>
<input type="email"/>
<label>电话号码</label>
<input type="tel"/>
<label>搜索</label>
<input type="search"/>
<label>数字</label>
<input type="number" value="" min="" step="" max=""/>
min最小值，max最大值，step间隔
<label>进度条</label>
<input type="range"/>
<label>取色器</label>
<input type="color"/>
<label>日历</label>
<input type="date" value="2000-01-01"/ >
<label>地址</label>
<input type="url"/>

css3选择器

1、属性选择器

选择的是html属性

元素[含有的属性名称]{}

元素[含有的属性名称="属性值"]{}

元素[含有的属性名称~"包含指定的词"]{}

元素[含有的属性名称|="val"]{}开头带有的整个单词

元素[含有的属性名称^="val"]{}val里面开头有这个词就行，可以不是整个单词

元素[含有的属性名称$="val"]{}val里面结尾有这个词就行

元素[含有的属性名称*=“val”]{}只要val里面有这个词就行

^开头有才行，$结尾有才行，*只要有就行

2、伪类选择器

UI元素状态伪类

：enabled 可用的都可以有这个样式，禁用的没有这个样式

：checked默认选中

：disabled禁用

上面三个都是表单里使用的

：：selection当鼠标选中文字时会发生样式的改变（默认选中文字时只能改变背景和文字颜色，其他改不了）

selection的属性只会针对在该选择器下的文本元素，该选择器下其他

含有标记的子元素里的文字没有selection的属性。

：focus 表示获取焦点时内容改变

否定选择器

定位不匹配该选择器的元素。

input:not([type="submit"]){border:1px solid red;}

此时，type中含有submit这个属性值的元素不包含这个属性，其他都有。

3、层级选择器

子元素选择器

E>F{属性：属性值;}

只能取该元素下的直接子元素。

相邻兄弟选择器

E+F{属性：属性值；}

两个元素相邻，且两个元素具有相同的父元素后面的会起作用起作用的是F这个元素，这个元素会显示相应的属性值

通用兄弟选择器

E~F{属性：属性值；}

E后面所有F选择器都会有这个属性

2D、3D属性

过渡效果：
transition：all 2s linear 2s;
transition-property/transition-duration/
transition-timing-fuction/transition-delay
应用过渡的css属性名称/过渡所需时间/过渡的时间曲线/过渡的延迟时间

2D变形
transform：none/rotate/scale/skew/translate
无/旋转/缩放/倾斜（扭曲）/平移
单位：无/deg/倍数（百分比）/deg/px

分为x，y，z三个轴，transform里面的属性都可以按照x，y，z轴进行变换

要实现3D效果，要加一句：transform-style：flat/preserve-3d;
要看到具体效果，还要添加perspective：800px；景深效果。

动画

@keyframes animationname{选择器{css属性}}
在这之前要给对应的选择器给一个animation名字

animation:aa 2s linear 2s infinite alternate;
名字/动画持续时间/动画变化速度曲线/动画延迟/动画运行次数（infinite无限次）/动画轮流反向播放。
和transition类似
让动画暂停或运行：animation-play-state：paused/running；

transition、animation区别（一个需要触发，一个不要）

单位，px， em，pt，rem，vw概念

px 像素单位，最常使用单位

em 默认情况下1em=16px，可以根据修改font-size值，改变em大小

pt 点或磅，印刷行业的单位

rem 相对于根元素的字体大小的单位。

需要使用rem.js

vw 将屏幕分成100份，也就是100vw

弹性盒

display:flex;

弹性盒默认是横向排列的。即主轴默认为水平的

写在父元素的
juestify-content
作用：主轴上的对齐方式
juestify-content:flex-start/flex-end/center/space-between/space-around/space-evenly(新增的属性)

align-items
作用：侧轴上的对齐方式
align-items:flex-start/flex-end/center/baseline/stretch;

flex-direction
设置弹性盒主轴的起点和终点位置

子元素依然按照从主轴起点向终点方向排列。
flex-direction:row/row-reverse/column/column-reverse;

flex-wrap
设置或检索弹性盒对象的子元素超出父容器时是否换行。
flex-wrap:nowrap/wrap/wrap-reverse;

align-content
设置各个行的对齐
align-content：flex-start/flex-end/center/space-between/space-round/stretch;

flex-flow缩写方式
缩写形式：换行和伸缩方向两个值同时定义或单独定义都生效，不分先后顺序
flex-flow:flex-direction flex-wrap;
值：direction:row/row-reverse/column/column-reverse
wrap:nowrap/wrap/wrap-reverse

写在子元素的
align-self
主要用来设置单独伸缩项目在侧轴的对齐方式。注意点：align-self可以覆盖align-items
align-self:auto/flex-start/flex-end/center/baseline/stetch

order
设置或检索弹性盒模型对象的子元素出现的顺序。
order:<integer>;用整数值来定义排列顺序，数值小的排在前面。可以为负值。

flex
作用：可以让元素自动占用容器的可用空间，等比划分
flex:none/[flex-grow]/[flex-shrink]/[flex-basis];
flex合并的flex-grow、flex-shrink、flex-basis三个值，他们的默认值为0 1 auto。
缩写flex：1:
则给这三个的值分别为1 1 0，flex-grow多余空间每个分配1份，flex-shrink超出空间每个缩减一份，flex-basis不给他们额外设置宽度。按照之前设置的宽度。
flex：auto:
则给三个值分别为1 1 auto，auto也是不给额外的值。
none就是0 0 auto。
flex-grow

作用：分配父元素多余的空间
flex-grow：<number> (default 0);

flex-shrink
作用：分配子元素超出父元素的空间
flex-shrink:<number>(default 1);(默认值为1)

flex-basis
作用：设置或检索弹性盒伸缩基准值
flex-basis:<length>/auto(default auto);（默认值为auto）