上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]CSS基础之元素基础

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-10-4 21:35:33 | 显示全部楼层 | 阅读模式

前言

由于之前已经讲过了大部分常见的问题以及套路以及操作用法以及如何正确嗦东北话。

所以接下来的日子里我们将在短暂接触CSS后学习如何绘制页面以及学习Vue。

块级元素和行级元素

HTML元素通常分为两大种,块级元素以及行级元素,块级元素如div,每次创建后自动占满一个横行,我们可以给他设置长宽等,而行级元素则不会占满一整行,会与其他元素相邻,无法设置宽度高度等等,这时候我们可以通过设置display为inline-block来让其可以设置宽高度。

PX

px称之为一像素,对于普通的屏幕,为一个像素点,对于高分辨率屏幕一个像素占了多个物理像素,通常来说96px=2.54cm

宽度

width,我们通常可以使用固定的宽度,如100px,200px等,也可以设置50%等,这时候会根据上层的宽度计算自身的宽度。

也可以设置最大宽度max-width以及最小宽度min-width来设置元素的最大与最小宽度

高度

height,与width同理。

同样有max-heigt以及min-height。

外边距

管控元素与元素之间的距离,如A B,A与B之间的距离就是外边距。

我们使用margin设置

通常为margin:1px 2px 3px 4px

其设置的方向为上右下左。

如果为margin:1px 则为四个方向都是1px

如果设置为margin:1px 2px;则上下为1px左右为2px;

内边距

内边距是元素自身的距离

图片.png

红色是元素的宽度,红色与蓝色之间是内边距,这个地方是无法放置元素的,当我们放了一个元素在内,是由蓝色内开始放元素的,

通常使用padding

如padding:1px 2px 3px 4px

建议:能用padding的时候尽量不要用margin,margin存在一些穿透的兼容性问题

混的人。

发表回复

本版积分规则

快速回复 返回顶部 返回列表