CSS
北漂编程小王子
程序猿的工作日记
展开
-
css背景图片半透明效果
css 设置背景色半透明效果,参数 background:rgba(x,x,x,x)最后一个a表示半透明,取值是0-1原创 2021-11-02 18:17:03 · 1119 阅读 · 0 评论 -
css 文字垂直居中
css样式中提供了text-align=center 实现的是水平居中,但没有提供直接的垂直居中,具体原因不得而知,实现方式可以通过设置行高=盒子的高度,原因很好理解,行高= 上缝隙+文字高度+下缝隙,而文字的高度又是固定的,上下缝隙距离是均分的,所有就会强制文字垂直居中显示了,只不过上下缝隙是没有颜色的看不见而已,举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-11-02 16:38:44 · 1655 阅读 · 0 评论 -
css行内元素转块级元素 块级元素转行内元素
一个超链接打开一个页面,正常情况下只是在这个超链接上点击才可以打开目标页面,有时候优化需要在一个区域范围内(有宽度、高度)点击,都可以打开超链接,这个时候就需要将行内元素转化成块元素,使用到属性display : block 属性即可;如果是块级元素转行元素,则需要display:inline,配置后,发现高度和宽度都无效了。举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g原创 2021-11-02 15:36:07 · 809 阅读 · 0 评论 -
css 伪类选择器
给选择器增加特殊的效果,使用冒号(:)表示举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-11-02 11:46:29 · 99 阅读 · 0 评论 -
css 样式并集选择器
举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum.原创 2021-11-01 18:23:10 · 223 阅读 · 0 评论 -
css 样式 子选择器
样式控制时,利用标签下包含子标签的方式,会导致只要父标签下的能找到的子标签的话,样式都会生效,可能是孙子或者重孙级别,怎样只控制只是儿子级别的样式控制呢?这时候就需要子选择器,标签之间用> 分割举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-11-01 17:55:21 · 386 阅读 · 0 评论 -
css行间距 line-height
行间距,由三部分组成,文本高度+上间距+下间距举例:行高设置26px,文字默认大小是16px,上下间距就平分5px,测量行间距方法一般测量上一行的下底部,到下一行的底部,也就可以通过测量工具按照这样的测量方法测试出来。...原创 2021-11-01 12:07:56 · 567 阅读 · 0 评论 -
css首行缩进2个空格相对大小
有时候段落文本需要首行缩进两个空格,可以通过text-indent属性设置,单位em表示相对当前行文本大小缩进,例如当前文字大小是10px,那么2em就是相当于首行缩进了10xp*2=20px,也就是20px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&原创 2021-11-01 11:54:19 · 917 阅读 · 0 评论 -
css 类选择器 多类名使用
前端常用类名定义样式,但是遇到一些重复的样式,可以考虑使用多类型写法,实现代码公复用!举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid原创 2021-10-29 11:41:07 · 848 阅读 · 0 评论 -
CSS中margin和padding的区别
区别如下:margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。CSS是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。...原创 2021-09-16 16:47:34 · 2799 阅读 · 0 评论 -
padding:5px 0px; 是什么意思
上下内边距为5px,左右内边距为0px。下面来了解一下padding:Padding(填充)属性定义元素边框与元素内容之间的空间。padding 简写属性在一个声明中设置所有内边距属性。设置所有当前或者指定元素内边距属性。该属性可以有1到4个值。举个例子说明:padding:10px 5px 15px 20px;上内边距是 10px右内边距是 5px下内边距是 15px左内边距是 20px当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。原创 2021-09-16 15:55:13 · 2584 阅读 · 0 评论