WEB 十月 07, 2021

Http缓存-协商与强制缓存

文章字数 6.7k 阅读约需 6 mins.

通常根据是否需要向服务器重新发起HTTP请求去确认缓存是否有效将缓存分为强制缓存和协商缓存

强制缓存

强制缓存就是直接从浏览器缓存查找该结果,并根据结果的缓存规则来决定是否使用该缓存的过程。

  • 不存在...
查看全文

WEB 七月 13, 2021

CSS样式表-移动WEB开发之响应式布局

文章字数 65k 阅读约需 59 mins.

响应式开发

响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的

设备划分 尺寸区间
超小屏幕(手机) < 768px
小屏设备(平板) >=768px ~< 992px
中等屏幕(桌面显示器) >=992px ~ <1200px
宽屏设备(大桌面显示器) >=1200px

响应式布局容器

响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。

原理就是在不同屏幕下,通过媒体查询来改变这...

查看全文

WEB 六月 29, 2021

CSS样式表-rem适配布局

文章字数 16k 阅读约需 15 mins.

rem 基础

rem 单位

rem(root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小.比如,根元素(html)设置font-size=12px,非根元素设置width:2rem;则换成px表示就是24px

媒体查询

什么是媒体查询

媒体查询(Media Query) 是CSS3新的语法

  • 使用@media查询,可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小过程中,页面也会更具...
查看全文

WEB 六月 29, 2021

CSS样式表-Flex布局

文章字数 24k 阅读约需 22 mins.

传统布局与flex布局

传统布局

  • 兼容性好
  • 布局繁琐
  • 局限性,不能再移动端很好的布局

flex 弹性布局

  • 操作方便,布局极为简单,移动端应用很广泛
  • PC端浏览器支持情况较差
  • IE11 或更低版本,不支持或仅部分支持

初体验

搭建HTML结构

1
2
3
4
5
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>

添加CSS样式

1
2
3
4
5
6
7
8
9
10...
查看全文

WEB 六月 28, 2021

CSS样式表-WEB移动开发

文章字数 38k 阅读约需 35 mins.

移动端基础

浏览器现状

PC端常见浏览器

360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器

移动端常见浏览器
UC浏览器,QQ浏览器,欧明浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。

国内的UC和QQ,百度等手机浏览器都是根据webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机的操作系统都是基于Android修改开发一样

总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可

手机屏幕的...

查看全文

WEB 六月 27, 2021

CSS样式表-CSS3扩展

文章字数 125k 阅读约需 1:54

CSS3 2D转换

转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果

转换(transform)你可以简单理解为变形

  • 移动:translate
  • 旋转:rotate
  • 缩放:scale

二维坐标系

2D转换时改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系

2D转换之移动 translate

语法:

1
2
3
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform...
查看全文

WEB 六月 26, 2021

HTML5与CSS3提升

文章字数 63k 阅读约需 57 mins.

HTML5 的新特性

HTML5 的新增特性主要是针对以前的不足,增加了一些新的标签、新的表单新的表单属性

这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些特性。

HTML5 新增的语义化标签

以前布局,我们基本用div,div对于搜索引擎来说,是没有语义的。

1
2
3
4
<div class="header"></div>
<div class="nav"></div>
<div class=...
查看全文

WEB 六月 25, 2021

CSS样式表-高级技巧

文章字数 73k 阅读约需 1:07

精灵图

为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。

因此,为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了。

精灵技术目的:为了有效地减少服务器的发送请求次数,提高页面的加载速度

精灵图(sprites...

查看全文

WEB 六月 25, 2021

CSS样式表-定位

文章字数 32k 阅读约需 29 mins.

定位

为什么需要定位

提问:一下情况使用我们的标准流或者浮动能实现吗?

1.某个元素可以自由在一个盒子内移动位置,并且压住其他盒子

以上效果,标准流或者浮动都无法快速实现,此时需要定位来实现

所以:

  1. 浮动可以让多个会计盒子一行没有缝隙排列显示,经常用于横向排列盒子
  2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子

定位组成

定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素...

查看全文

WEB 六月 24, 2021

CSS样式表-浮动

文章字数 56k 阅读约需 51 mins.

浮动

传统网页布局的三种方式

网页布局的本质—-用CSS来摆放盒子。把盒子摆放到相应的位置,CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):

  • 普通流(标准流)
  • 浮动
  • 定位

标准流(普通流/文档流)

所谓的标准流:就是标签按照规定好默认方式排列

  1. 块级元素会独占一行,从上向下顺序排序。
    • 常用元素: div、hr、p、h1~h6、ul、ol、dl、form、table
  2. 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
    • 常用元素:·span、a、i、em

以...

查看全文
加载更多
0%