HTML+CSS
HTML和CSS
Liang_Shun
这个作者很懒,什么都没留下…
展开
-
Grid布局
一、什么是Grid布局?Flex布局是轴线布局,只能指定针对轴线的位置,可以看做是一维布局;Grid布局则是将容器划分为“行”和“列”,产生单元格,然后指定元素所在的单元格,可以看做是二维布局。Grid布局比Flex更强大,兼容性不如Flex布局,也相对复杂一些。二、基本概念1.容器(可看做是一个大盒子)2.项目(可看做装在盒子中的东西)3.(row)行、(column)列、(g...转载 2020-05-04 16:01:20 · 479 阅读 · 0 评论 -
CSS之2D、3D转换总结
一、2D转化2D 转换是改变标签在二维平面上的位置和形状移动: translate旋转: rotate缩放: scaletranslate 语法 /* x 就是 x 轴上水平移动 */ /* y 就是 y 轴上水平移动 */transform: translate(x, y)transform: translateX(n)transfrom: translate...翻译 2020-04-23 21:50:54 · 298 阅读 · 0 评论 -
DOM元素display、visibility、opacity三种隐藏方式的对比
方式一、display: noneDOM结构:浏览器不会渲染display属性为none的元素,不占用空间;事件监听:无法进行DOM事件监听,毕竟没有被渲染出来;性能:动态改变此属性会引起重排,性能较差;继承:不会被子元素继承,毕竟子元素也不会被渲染出来transition(过渡):不支持display。方式二、visibility: hiddenDOM结构:元素被隐藏,但会被...原创 2020-04-23 11:10:15 · 982 阅读 · 0 评论 -
HTML的meta标签
meta标签简介meta标签是一个单标签,位于head标签中。它提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。可简单理解为一个用来描述我们网站的一些信息的描述性标签。我们通过一个实例:某东的meta标签,来学习一下。 <meta charset="utf8" versi...原创 2020-03-13 13:44:21 · 357 阅读 · 0 评论 -
HTML中元素水平垂直居中的方法
HTML中元素水平垂直居中的方法水平居中 当元素的display属性是inline 或inline-block (行内元素或行内块元素)的时候,将父元素(容器)设置text-align: center; 就可水平居中。 当元素的display 属性是block (块元素)的时候,将元素本身的margin-left 和 margin-right 设定为 auto,即可水平居中。 ...原创 2020-03-12 14:45:09 · 232 阅读 · 0 评论