css
文章平均质量分 87
qiaoyurensheng
某普通双非大学计算机专业研究生在读
展开
-
前端移动web_布局_响应式布局
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和原创 2021-02-20 13:41:23 · 176 阅读 · 0 评论 -
前端移动web_布局_rem布局
移动web开发之rem布局 1. rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-si原创 2021-02-20 13:40:38 · 153 阅读 · 0 评论 -
前端移动web_布局_flex布局
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局,还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵原创 2021-02-20 13:39:52 · 89 阅读 · 0 评论 -
前端移动web_布局_流式布局
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。 总结:兼容移动端主流浏览器,处理Web原创 2021-02-20 13:38:34 · 153 阅读 · 0 评论 -
前端CSS高级技巧
1. 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。 因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称CSS Sprites、CSS 雪碧)。 核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。 精灵技术目的: 为了有效地原创 2021-02-20 13:34:28 · 144 阅读 · 0 评论 -
前端CSS浮动
1. 浮动 1.1传统网页布局的三种方式 网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置. CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动 定位 1.2 标准流(普通流/文档流) 块级元素会独占一行,从上向下M赡扫冽。 常用元素:div、hr、p、hl~h6、ul、o1、dl、form、table 行内元素会按照顺序,从左到右111赡排列,碰到父元素边缘则自动换行。 常用元素:span、a、i、em等 以上都是标准流布局,我们前原创 2021-02-20 13:33:13 · 287 阅读 · 1 评论 -
前端CSS定位
1. 定位 1.1 为什么需要定位 提问: 以下情况使用标准流或者浮动能实现吗? 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子. 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。 以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。 所以: 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。 1.2 定位组成 定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的原创 2021-02-20 13:32:25 · 158 阅读 · 0 评论 -
前端CSS基础
页面布局要学习三大核心, 盒子模型, 浮动 和 定位。 学习好盒子模型能非常好的帮助我们布局页面 1.盒子模型 1.1 看透网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式,然后摆放到相应位置。 往盒子里面装内容 . 网页布局的核心本质: 就是利用 CSS 摆盒子 1.2 盒子模型(Box Model)组成 所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。 CSS 盒子模型本质上原创 2021-02-20 13:31:24 · 82 阅读 · 0 评论