HTML
背太阳的牧羊人
管它什么真理无穷,进一寸有一寸的欢喜。
展开
-
CSS工程化
CSS工程化主要包括 组织,优化,构建和维护。这里主要介绍两个工具:PostCSS和PostCSSpost是 后面,后置 的意思,它跟预处理器的概念是相对的。预处理器是把不是css的语言 经过处理后 变成css,也就是先有预处理语言再有css。postcss是把css变成css,是先有css再对代码进行处理。这里需要说明的是,前面提到postcss是先有css然后postcss再处理转换变...原创 2019-12-06 13:56:16 · 517 阅读 · 0 评论 -
CSS预处理器
它是基于CSS的另一种语言,也就是说它并不是纯粹的CSS语法。可以类比JS,现在有ES6语法,通过babel预处理器可以将ES6新的语法编译成浏览器能够运行的代码。这里同样可以通过工具将新的语法编译成CSS供浏览器解析。CSS预处理器添加了很多CSS不具备的特性,它能提升CSS文件的组织方式。常见的CSS预处理器主要有 less(基于nodejs写的) 和 sass(它后面有新的版本是scss)...原创 2019-12-04 17:18:40 · 540 阅读 · 0 评论 -
常用布局方法
table表格布局早期以table为主,早期的表格解析并不是流式的,如果表格很长 浏览器会把整个表格的代码都下载完后再渲染解析,这样会造成用户等待的时间过长。事实上现在的浏览器性能都很高了,也可以对表格布局进行流式的加载,这种问题不是很突出了,所以现在表格的布局也没有很明显的缺点,除了语义化不够明确。表格有一些好的特性,表格本来就是方框的,它的横向和竖向的格子天生就有的,不需要我们去想办法并...原创 2019-12-03 11:02:33 · 296 阅读 · 0 评论 -
CSS中非布局样式(一)
CSS布局是一块非常重要的内容,这里单独介绍非布局样式。非布局样式有下面几种分类(还有其它分类看系列文章):字体,字重,颜色,大小,行高这些是跟文字相关的样式。字体族族,顾名思义,就是一堆的东西,字体族就是一堆的字体,具体可以分为五个字体族:serif 是衬线字体,字体周围会有一些装饰性的小勾角,英文解释就是:a short line at the top or bottom of s...原创 2019-11-30 18:07:45 · 240 阅读 · 0 评论 -
HTML元素分类和默认样式的处理方法
HTML元素分类按默认样式分block 块级:独占一整行,可以设置自己的宽高。inline 行内元素,设置宽高无效。inline-block 内联块级元素,可以和行内元素在同一行显示,可以设置自己的宽高。按内容分HTML元素嵌套关系块级元素可以包含行内元素块级元素不一定能包含块级元素,比如 p 标签里面不能再包含 div 元素行内元素一般不能包含块级元素,比如在span里...原创 2019-11-29 13:45:47 · 392 阅读 · 0 评论 -
视口(viewport)相关概念(二)
两个视口(layout viewport &visual viewport)因此视口太窄,不能作为CSS布局的基础。显而易见的解决办法是扩大视口。然而,这要求将其分为两个部分:可视视图和布局视图。George Cummins 在 Stack Overflow上解释了 可视视图 和 布局视图 的基本概念:布局视图 就像一个大小形状固定的大图像。可视视口就像你手里拿着一个不透明遮挡你部分...翻译 2019-11-23 17:09:59 · 527 阅读 · 0 评论 -
视口(viewport)相关概念(一)
这系列文章将解释 视口和各种重要元素的宽度是如何工作的,比如<html>元素,以及窗口和屏幕。(how viewports and the widths of various important elements work, such as the element, as well as the window and the screen.)概念:设备像素和CSS像素(device...翻译 2019-11-20 11:17:18 · 2057 阅读 · 0 评论 -
网页定位导航设计的知识点
锚点(anchor):锚点是页面内的超级链接滚动条定位的事件和方法: scroll:当用户滚动指定的元素时会发生scroll事件,scroll事件适用于所有可滚动的元素和window对象(浏览器窗口)。 例如:当页面滚动条发生变化时执行函数$(window).scroll(function(){ //滚动时执行的代码}); scrollTop:获取/...原创 2018-09-08 17:12:28 · 657 阅读 · 0 评论 -
移动web开发----Viewport
首先抛出一个问题,,, 一个PC页面在移动设备上展示效果会咋样?是像下面整个页面展示还是只是展示页面的一部分呢? iPhone5是320px,一个1000多像素的pc页面在一个320px的移动设备上会怎么显示?下面用代码来亲自测一下就知道鸟。 在iPhone5的设备容器上能看见整个页面,iPhone5只有320px但是却能显示出来整个页面,像上图中的左图一样这就是viewpoint的作用...原创 2018-09-06 16:50:23 · 161 阅读 · 0 评论