![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML\CSS
HTML\CSS
illion-78
志向远大程序猿
展开
-
移动端开发(rem布局)
移动web开发之rem布局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-size:原创 2020-06-04 13:22:08 · 226 阅读 · 0 评论 -
HTML5CSS3(translate3d)
cHTML5 第三天一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值二、3D 转换3D 转换知识要点3D 位移:translate3d(x, y, z)3D 旋转:rotate3d(x, y, z)透视:perspctive3D呈现 tran原创 2020-05-27 20:43:02 · 1253 阅读 · 0 评论 -
HTML5&&CSS3(html5 transform)
HTML5 第一天一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成H原创 2020-05-27 09:54:18 · 92 阅读 · 0 评论 -
移动端:(弹性布局)flex布局
移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局1.2 flex布局操作方便,布局极其简单,移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局,还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活原创 2020-05-12 09:54:08 · 603 阅读 · 0 评论 -
前端:HTML5和CSS3(一)
HTML5 第一天一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 ...原创 2020-03-31 20:00:21 · 79 阅读 · 0 评论 -
前端:CSS基础(九)定位
定位视觉格式化模型,大体上将页面中盒子的排列分为三种方式:常规流浮动:float定位:position定位:手动控制元素在包含块中的精准位置涉及的CSS属性:positionposition属性默认值:static,静态定位(不定位)relative:相对定位absolute:绝对定位fixed:固定定位一个元素,只要position的取值不是static,认为该元...原创 2020-03-30 21:04:15 · 77 阅读 · 0 评论 -
前端:CSS基础(八)浮动
浮动视觉格式化模型,大体上将页面中盒子的排列分为三种方式:常规流浮动定位应用场景文字环绕横向排列浮动的基本特点修改float属性值为:left:左浮动,元素靠上靠左right:右浮动,元素靠上靠右默认值为none:不浮动,为常规流当一个元素浮动后,元素必定为块盒(更改display属性为block)浮动元素的包含块,和常规流一样,为父元素的内容盒盒子尺...原创 2020-03-30 20:53:51 · 60 阅读 · 0 评论 -
前端:css基础(七)常规流
盒模型:规定单个盒子的规则视觉格式化模型(布局规则):页面中的多个盒子排列规则视觉格式化模型,大体上将页面中盒子的排列分为三种方式:常规流浮动定位常规流布局常规流、文档流、普通文档流、常规文档流所有元素,默认情况下,都属于常规流布局总体规则:块盒独占一行,行盒水平依次排列包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。绝...原创 2020-03-22 20:34:27 · 125 阅读 · 0 评论 -
前端:css基础(六)盒模型
盒模型box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)盒子类型:行盒,display等于inline的元素块盒,display等于block的元素行盒在页面中不换行、块盒独占一行display默认值为inline浏览器默认样式表设置的块盒:容器元素、h1~h6、p常见的行盒:span、a、img、video、audio盒子的组成部分无论是行盒、还是块盒,都由下...原创 2020-03-22 20:23:37 · 161 阅读 · 0 评论 -
前端:css基础(五)属性值的计算过程
属性值的计算过程一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行渲染每个元素的前提条件:该元素的所有CSS属性必须有值一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程1.确定声明值:参考样式表中没有冲突的声明,作为CSS属性值2.层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值比较重要性比较特殊性比较源次序3...原创 2020-03-19 20:16:40 · 143 阅读 · 0 评论 -
前端:css基础(四)层叠、继承
层叠声明冲突:同一个样式,多次应用到同一个元素层叠:解决声明冲突的过程,浏览器自动处理(权重计算)1. 比较重要性重要性从高到底:作者样式表:开发者书写的样式1)作者样式表中的!important样式2) 作者样式表中的普通样式3) 浏览器默认样式表中的样式2. 比较特殊性看选择器总体规则:选择器选中的范围越窄,越特殊具体规则:通过选择器,计算出一个4位数(x x ...原创 2020-03-19 20:01:04 · 95 阅读 · 0 评论 -
前端:css基础(三)选择器
选择器选择器:帮助你精准的选中想要的元素简单选择器ID选择器元素选择器类选择器通配符选择器:*,选中所有元素属性选择器:根据属性名和属性值选中元素伪类选择器:选中某些元素的某种状态(书写顺序)1)link: 超链接未访问时的状态2)visited: 超链接访问过后的状态3)hover: 鼠标悬停状态4)active:激活状态,鼠标按下状态爱恨法...原创 2020-03-18 13:18:36 · 68 阅读 · 0 评论 -
前端:css基础(二)常见样式声明
常见样式声明color元素内部的文字颜色预设值:定义好的单词三原色,色值:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达,色值。rgb表示法:rgb(0, 255, 0)hex(16进制)表示法:#红绿蓝淘宝红:#ff4400, #f40马尔斯绿:#008c8c黑色:#000000,#000白色:#ffffff, #fff红:#ff0000, #f...原创 2020-03-18 13:09:23 · 178 阅读 · 0 评论 -
前端:CSS基础(一)
CSS样式基础术语解释h1{ color:red; background-color:lightblue; text-align: center;}CSS规则 = 选择器 + 声明块选择器选择器:选中元素ID选择器:选中的是对应id值的元素#text{ color:red; background-color:lightblue; te...原创 2020-03-11 20:27:30 · 49 阅读 · 0 评论 -
前端:HTML基础(一)元素
第一个网页Emmet插件:自动生成HTML代码片段注释注释为代码的阅读者提供帮助,注释不参与运行在HTML中,注释使用如下格式书写:<!-- 注释内容 -->元素其他叫法:标签、标记<a href="http://www.duyiedu.com" title="黑龙江渡一教育有限公司">渡一教育</a><title>Docum...原创 2020-03-09 22:17:10 · 230 阅读 · 1 评论