css
文章平均质量分 91
css相关文章
前端蜗牛君
前端开发工程师
展开
-
图解 CSS Grid 布局详解
在解释 CSS Grid 布局之前,我们先来看看 Grid 布局中一些重要概念。原创 2022-10-13 18:45:00 · 3911 阅读 · 0 评论 -
css中z-index无效解决方法
问题:设置z-index很大,但是仍然被其他元素遮挡图片:问题描述:即使设置弹窗div的z-index特别大,也会被阴影遮挡。原因:弹窗的父级节点(或祖辈节点)设置的z-index值小于阴影的z-index的值,所以,即使设置弹窗的z-index比阴影的z-index大,也会在阴影下面。解决:去掉弹窗父级节点的z-index属性,或者设置弹窗父级节点的z-index大于阴影父级元素溢出隐藏或者不显示如果父元素设置了 overflow:hidden /display:none/ 等,那么子元原创 2021-10-22 16:10:58 · 2727 阅读 · 0 评论 -
css系列-transform变形动画
基础知识#坐标系统要使用元素变形操作需要掌握坐标轴,然后通过改变不同坐标来控制元素的变形。X轴是水平轴 Y轴是垂直轴 Z轴是纵深轴#变形操作使用transform规则控制元素的变形操作,包括控制移动、旋转、倾斜、3D转换等,下面会详细介绍每一个知识点。下面是CSS提供的变形动作。选项 说明 none 定义不进行转换。 translate(x...原创 2020-01-08 20:51:12 · 372 阅读 · 0 评论 -
css系列-grid栅格布局
栅格介绍#名词解释CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行。栅格系统与FLEX弹性布局有相似之处理,都是由父容器包含多个项目元素的使用。#兼容性下面是栅格系统兼容性数据,所以在根据项目使用的场景决定是否使用栅格布局。#声明容器#块级容器<style> *...原创 2020-01-04 21:35:37 · 1786 阅读 · 0 评论 -
css系列-flex弹性盒子
了解弹性Flex 是 Flexible Box 的缩写,意为"弹性布局",可以轻松的控制元素排列、对齐和顺序的控制。现在的终端类型非常多,使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。#响应体验通过下面小米移动端中间区域水平排列元素,来体验一下响应布局带来的便利性。<style> * { padding: 0; margin: 0;...原创 2020-01-04 20:51:17 · 415 阅读 · 0 评论 -
css系列-float浮动
浮动布局float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。在网站开发中需要一行排列多个元素,使用浮动可以方便实现。下面是使用浮动排列多个元素#FLOAT使用浮动可以控制相邻元素间的排列关系。选项 说明 left 向左浮动 rig...原创 2019-12-30 22:29:00 · 662 阅读 · 0 评论 -
css系列-伪元素::after,::before
#基本使用使用伪类::before向前添加内容,使用::after向后面添加内容。伪类的应用场景比较多,一定要掌握,最下面通过应用实例讲解。a::after { content: " (坚持努力) ";}#提取属性使用属性值添加内容,可以使用标准属性与自定义属性(一般用data-*表示,比如data-title=“标题”)。<style> a::a...原创 2019-12-14 20:05:19 · 511 阅读 · 0 评论 -
css系列-ol,ul
列表#列表符号使用list-style-type来设置列表样式,规则是继承的,所以在ul标签上设置即可。值 描述 none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 decimal-leading-zero 0开头的数字标记...原创 2019-12-14 19:51:40 · 2503 阅读 · 0 评论 -
css系列-table
表格表格可以非常快速的部署数据,灵活控制表格样式是必要的。表格不能设置外边距。#定制表格除了使用table标签绘制表格外,也可以使用样式绘制。样式规则 说明 table 对应 table table-caption 对应 caption table-row 对表 tr table-row-group 对应 tbody table...原创 2019-12-13 21:58:48 · 792 阅读 · 0 评论 -
css系列-背景色、背景图片
背景颜色背景颜色可以使用 关键字|rgb|rgba|十六进制等颜色格式<style> h2 { background-color: red; }</style>...<h2>背景色</h2>#背景图片可以使用png| gif |jpeg等图片做为背景使用这里特别说明:背景图片是没有空间位的,即元素不会因...原创 2019-12-08 17:06:29 · 1034 阅读 · 0 评论 -
css系列-display,visibility,溢出
DISPLAY#控制显示隐藏使用display控制元素的显示机制。选项 说明 none 隐藏元素 block 显示为块元素 inline 显示为行元素,不能设置宽/高 inline-block 行级块元素,允许设置宽/高 #行转块元素span { border: solid 1px #ddd; display: b...原创 2019-12-02 21:22:06 · 263 阅读 · 0 评论 -
css系列-border,outline
边框设计#样式选择类型 描述 none 定义无边框。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border...原创 2019-11-27 22:07:18 · 348 阅读 · 0 评论 -
css系列-盒子模型
下而是基本使用示例<style> a { display: inline-block; border: solid 1px #ddd; text-align: center; padding: 10px 20px; margin-right: 30px; }</style>...<a href=""&g...原创 2019-11-25 21:59:51 · 209 阅读 · 0 评论 -
css系列-font文本
字体设置可以定义多个字体,系统会依次查找,比如'Courier New'字体不存在将使用Courier以此类推。font-family: 'Courier New', Courier, monospace;自定义字体可以声明自定义字体,如果客户...原创 2019-11-24 14:10:55 · 936 阅读 · 0 评论 -
css系列-样式权重
样式权重元素会被多个样式一层层作用,这就是层叠样式表的来源。如果多个样式做用在元素上就会产生优先级权重问题。使用类、ID、伪类都有不同的权重,具体应用哪条规则要看权限大小。相同权重的规则应用最后出现的 可以使用!important强制提升某个规则的权限 权重应用 规则 粒度 ID 0100 class,类属性值 0010 标签,...原创 2019-11-22 22:25:10 · 1985 阅读 · 0 评论 -
css系列-样式4种声明方式
1.外部样式使用link标签引入外部样式文件,需要注意以下几点。link 标签放在head标签内部 样式文件要以.css为扩展名 一个页面往往需要引入多个样式文件属性 说明 rel 定义当前文档与被链接文档之间的关系 href 外部样式文件 type 文档类型 <link rel="stylesheet" href="my....原创 2019-11-17 11:56:34 · 1925 阅读 · 0 评论 -
css系列-样式选择器
样式选择器能让我们能够选取页面任意元素并给它设置样式。基本选择器选择器 示例 描述 .class(类选择器) .intro 选择 class="intro" 的所有元素 #id (id选择器) #firstname 选择 id="firstname" 的所有元素 * (全局选择器) * 选择页面中所有元素 element (标...原创 2019-11-21 21:32:01 · 726 阅读 · 0 评论