CSS
minisal
永存渴望
展开
-
CSS垂直居中
CSS垂直居中transform: translateY(-50%)flexposition: absolute + margin: -50px 0 0 0;transform: translateY(-50%)1)使用top: 50%使得元素上边界偏移至页面竖直方向上的中心线2)使用position: relative使得实际展示的元素相对于本身位置进行偏移3)使用transform: ...原创 2020-03-31 16:00:00 · 142 阅读 · 0 评论 -
CSS定位的四种类型:static | relative | absolute | fixed
CSS定位文档流定位的四种类型static 静态定位relative 相对定位absolute 绝对定位abdolute不生效对齐优先级fixed 固定定位文档流文档流也被称为normal flow普通流,是元素在html中的排列方式。block元素单独占一行垂直排列,inline元素在行内从左至右依次排列。定位的四种类型static 静态定位静态定位是默认的定位方式。它遵循正常的文档...原创 2020-03-31 09:22:50 · 701 阅读 · 0 评论 -
CSS display | opacity | visibility的区别;回流与重绘
opacity=0该元素变透明,但是不会改变页面布局。并且若此元素绑定了事件,点击该元素所占区域时,响应事件同样会被触发。visibility=hidden该元素变为不可见,但是不会改变页面布局。对用户不可见后,点击相应的区域也无法触发绑定的事件display=none该元素不再展示,会改变页面布局点击相应的区域也无法触发绑定的事件...原创 2020-03-29 17:44:13 · 3752 阅读 · 0 评论 -
CSS 盒模型
盒子模型 Box Model我们可以将html中的元素可以看作一个box,然后对这个box本身和box与周围box的放置进行设置。即,盒模型用于对元素进行布局,布局内容包括外边距margin、边框border、内边距padding和实际内容content四个部分。四个部分的排列方式如下图所示:标准盒模型与怪异盒模型现有两种盒子模型:W3C的标准盒模型和IE的怪异盒模型。大部分浏览器都以W3...原创 2020-03-28 10:57:29 · 90 阅读 · 0 评论 -
CSS基础入门
CSS基础入门CSS 概述CSS Cascading Style Sheet - 层叠样式表目的样式定义的优先级CSS基础语法CSS语法构成选择器颜色值的不同表示方法注意派生选择器 | 上下文选择器 contextual selectorsID选择器ID选择器和派生选择器结合使用类选择器属性选择器选择器里的特殊符号插入CSS外部样式表内部样式表内联样式多重样式CSS 概述CSS Cascadi...原创 2020-03-28 10:34:01 · 129 阅读 · 0 评论