![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5+CSS3
wuCase
这个作者很懒,什么都没留下…
展开
-
HTML5+CSS3-基础10-圣杯布局
HTML5+CSS3-基础10-圣杯布局圣杯布局(左固定右固定,中间自适应)圣杯布局(左固定右固定,中间自适应)<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">原创 2020-06-24 10:40:08 · 383 阅读 · 0 评论 -
HTML5+CSS3-基础09-水平&垂直居中
HTML5+CSS3-基础09-水平&垂直居中直接上代码直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style原创 2020-06-24 10:21:43 · 141 阅读 · 0 评论 -
HTML5+CSS3-基础08-弹性盒模型
HTML5+CSS3-基础08-弹性盒模型弹性盒模型父元素属性子元素属性(flex item)弹性盒模型弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。注意:弹性容器外及弹性子元素内是正常渲染的。弹性盒子...原创 2020-04-28 10:20:22 · 307 阅读 · 0 评论 -
HTML5+CSS3-基础07-animation动画
HTML5+CSS3-基础07-animation动画animation动画animation动画animation比较类似于 flash 中的逐帧动画,逐帧动画就像电影的播放一样,表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态,整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道,这种逐帧动画是由关键帧组成,很多个关键帧连续的播放就组成了动画,...原创 2020-04-28 00:08:04 · 155 阅读 · 0 评论 -
HTML5+CSS3-基础06-transition过渡
HTML5+CSS3-基础06-transition过渡CSS3 过渡transform属性CSS3 过渡transition:过渡属性 过渡时长 过渡速度 延迟时间;transition-property:指定过渡的CSS属性。transition-duration:指定完成过渡所需的时间。transition-timing-function:指定过渡调速函数。transitio...原创 2020-04-27 23:10:28 · 296 阅读 · 0 评论 -
HTML5+CSS3-基础05-重排&重绘
HTML5+CSS3-基础05-重排&重绘重排(Relayout/Reflow)重绘(Repainting)性能优化重排(Relayout/Reflow)重排也叫回流,所谓重排,实际上是根据渲染树中每个渲染对象的信息,计算出各自渲染对象的几何信息(DOM对象的位置和尺寸大小),并将其安置在界面中的正确位置。由于浏览器渲染界面是基于流式布局模型的,也就是某一个DOM节点信息更改了,就需要...原创 2020-04-27 16:43:36 · 391 阅读 · 0 评论 -
HTML5+CSS3-基础04-盒模型&BFC
HTML5+CSS3-基础04-盒模型&BFCW3C盒模型(标准盒模型)IE盒模型(怪异盒模型)盒子尺寸:box-sizing: 默认值(content-box)BFC (块级格式化上下文)W3C盒模型(标准盒模型)在标准的盒子模型中,width指content部分的宽度IE盒模型(怪异盒模型)(IE6及以下 ,不设置!doctype)在IE盒子模型中,width表示c...原创 2020-04-27 16:13:33 · 383 阅读 · 1 评论 -
HTML5+CSS3-基础02-选择器
HTML5--html5基础02选择器选择器标签选择器 div {}class选择器 .btn {}id选择器 #btn {}通配符选择器 * {}组合选择器 div, .btn,#btn {}层级选择器 div>p{} div下的所有子p标签后代选择器 div p{} div下的所有p标签兄弟选择器 div+p 与div相邻的p...原创 2020-04-27 14:31:54 · 223 阅读 · 0 评论 -
HTML5+CSS3-基础01-meta&语义化&行内和块级元素
01-HTML5基础01HTML5-metaHTML语义化行内和块级元素HTML5-meta定义文档编码==> <meta charset="ISO-8859-1">定义针对搜索引擎的关键词 ⇒ <meta name="keywords" content="关键词" />定义对页面的描述==> <meta name="description" c...原创 2020-04-27 13:37:05 · 245 阅读 · 0 评论 -
HTML5+CSS3-基础03-清除浮动&position
HTML5+CSS3-基础03-清除浮动&position3种清除浮动方法Position定位3种清除浮动方法1. 添加新元素,使用clear:both; 这种方式优点就是代码少,容易理解,浏览器几乎都支持,出现的问题比较少,但缺点就是如果页面浮动浮动布局多的话,就要添加很多空div去清除浮动,不便优化。虽然这是常用的清除浮动方式,但不建议使用2.父容器使用overfl...原创 2020-04-27 15:23:54 · 536 阅读 · 0 评论