![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css+html
文章平均质量分 95
css和html学习笔记
nuise_
这个作者很懒,什么都没留下…
展开
-
CSS 布局-垂直居中-盒模型
文档流是元素中文档流向,从上往下分成一行行的,块级元素从上至下、行内元素在每行中从左到右依次排放。块元素(block)独占一行,设置宽高生效,margin和padding的上下左右均对其有效常见块元素div、p、h1行内元素不独占一行,设置宽高不生效,margin上下无效常见行内元素span,img是行内元素,但具有行内块的属性,可以自由设置宽高。div和p的使用场景一般来说块级元素可以包含行内元素和块级元素,但是h1~h6、p内部只能包含行内元素,不能包含块级元素语义上,div。原创 2022-10-03 21:32:54 · 899 阅读 · 0 评论 -
WebGL、canvas、svg
webGL是一种帮助我们开发3D网页的绘图技术,底层是JavaScript APIWebGL 技术旨在帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果。原创 2022-09-01 16:27:55 · 1224 阅读 · 0 评论 -
DOM渲染与优化 - CSS、JS、DOM解析和渲染阻塞问题
知识点对于浏览器说,页面加载主要有两个事件浏览器向服务器请求到了 HTML 文档后便开始解析,产物是 DOM(文档对象模型),到这里 HTML 文档就被加载和解析完成了。HTML文件的解析就是生成DOM树的过程HTML中的三类script渲染进程在解析 HTML 的时候,如果遇到一个没有任何属性的 标签,就会暂停解析,先发送网络请求获取该 JS 脚本的代码内容,然后让 JS 引擎执行该代码,当代码执行完成后再切换回渲染引擎继续渲染流程。async、defer属性的js脚本,渲染引擎遇到这一行命令,原创 2023-09-08 14:17:40 · 4123 阅读 · 3 评论 -
H5新增特性 DOMContentLoaded事件-自定义属性-async属性-history接口方法-本地存储-postMessage
DOMContentLoaded事件触发的时机在HTML文档加载和解析完毕。浏览器向服务器请求到了 HTML 文档后便开始解析,产物是 DOM(文档对象模型),到这里 HTML 文档就被加载和解析完成了。JavaScript 可以阻塞 DOM 的生成,当浏览器在解析 HTML 文档时,如果遇到 ,会停下对 HTML 文档的解析,转而去处理脚本。如果脚本是内联的,浏览器会先去执行这段内联的脚本,如果是外链的,那么先会去加载脚本,然后执行。在处理完脚本之后,浏览器继续解析 HTML 文档因为 JavaS原创 2022-06-14 22:03:45 · 319 阅读 · 0 评论 -
实现圣杯布局与双飞翼布局 原始实现-flex实现-grid实现
本质:三列布局,左右两边固定,中间自适应且优先加载优先加载:主区域标签写在最前面float + margin负值+relative/添加盒子前期准备1.三个区域的盒子向左浮动:三栏在一行显示问题:出现高度塌陷原因:父元素的高度默认被子元素撑开。当子元素浮动后,完全脱离文档流,子元素将无法撑起父元素的高度,导致父元素的高度丢失。父元素高度丢失后,其下的元素会自动上移,影响布局。解决办法:清除浮动清除浮动是指该元素恢复浮动元素没有浮动之前的位置给受影响的盒子添加clear属性,clear元原创 2022-06-04 21:52:29 · 851 阅读 · 0 评论 -
css布局 flex布局 grid网格布局 布局练习
flex是CSS3中新增的布局手段,它主要用来代替浮动来完成页面的布局。主轴:弹性元素的排列方式为主轴侧轴:与主轴垂直方向为侧轴justify开头表示与主轴相关align开头表示侧轴相关指定容器中弹性元素的排列方式,设置主轴方向row 默认值,弹性元素在容器中水平排列 从左向右row-reverse 默认值,弹性元素在容器中水平排列 从右向左column 弹性元素纵向排列 自上向下column-reverse 弹性元素纵向排列 自下向上 设置弹性元素是否在弹性容器中自动换行nowrap:默认值原创 2022-06-04 21:49:20 · 1822 阅读 · 0 评论 -
移动Web开发学习笔记 流式布局-百分比布局-flex布局-rem布局
文章目录移动Web开发学习笔记视口 viewportmeta视口标签二倍图物理像素 & 物理像素比二倍图背景缩放 background-size移动端技术解决方案CSS3盒子模型box-sizing移动端特殊样式设置移动端常见布局流程布局/百分比布局flex布局flex布局小练习需求1: 常见的上下结构需求2:背景渐变色需求3:10个盒子占两行需求4:> 箭头符号rem适配布局 rem+媒体查询rem单位媒体查询 Media Query引入资源rem适配方案技术方案1:less+媒体查询+re原创 2022-06-04 20:08:17 · 611 阅读 · 0 评论 -
Less学习笔记
文章目录Less学习笔记less和css的区别变量变量的运算less嵌套媒体查询混合方法无参数的混合带参数的混合方法的匹配模式继承extend()all全局搜索替换Less学习笔记less属于css的一种预处理器处理在浏览器运行前,基础语法变量混合(Mixins)嵌套规则 代码更有逻辑运算函数作用域less和css的区别1.less扩展了CSS语言,增加了css本身没有的变量、混合等特性,让css代码更易维护和扩展2.css可以被浏览器直接识别,less需要先编译为css。s原创 2022-05-26 20:55:03 · 1200 阅读 · 0 评论