css基础整理(2)调位宽度，列表

科技前沿 • 2025-02-28 22:11 • 阅读 54

大家好，我是讯享网，很高兴认识大家。

color 用于设置元素字体颜色
支持两种用法一种是rgb rgb(n,n,n) 另一种是十六进制颜色码
这里建议大家使用
https://www.sioe.cn/yingyong/yanse-rgb-16/ :RGB取色
可以那颜色在这两种格式中转换

div{ 
    color: #11ff88; }

讯享网

font-weight 设置字体加粗
常用加粗使用bold
在这里插入图片描述
讯享网
text-align 设置子元素水平对齐方式

line-height设置元素行高是在已知元素高度后一种非常不错的垂直居中方式
vertical-align设置子元素垂直对齐方式
但个人觉得不是很好用
建议还是用flex会比较好

如果你真很想用vertical-align 那你可以试着把元素的display设置成table-cell

还有一些文本样式，不是很常用可以放出来，没必要特意记，几年都用不上一次
在这里插入图片描述
text-decoration:underline;文本添加下划线但我们更多
用

讯享网a{ 
    text-decoration:none; }

去除下划线
width 设置元素宽度
height 设置元素高度

width: 10px; height: 10px;

max-height 设置最大高度
这就相当于一个限制在没有达到最大高度之前这个样式没有任何效果
但如果最大设置 10px 实际高度达到了20px 则元素高度还是10px
min-height为最小高度同理只是相反
相当于最大最小的限制
对宽度也有效最大最小设置 max-width
在这里插入图片描述 border 为css边框属性

border-width 设置边框宽度
border-color 设置边框颜色
border-style 设置边框样式
我们更多时候会选择简写它

讯享网border: 1px solid rgb(247, 247, 247);

1px 宽度
rgb(247, 247, 247) 颜色
solid形式
边框形式有
dashed : 设置虚线边框
solid : 定义实线边框
可以控制方向例如
左侧边框

border-left: 1px solid rgb(247, 247, 247);

padding内边距

讯享网padding: 10px;

在这里插入图片描述
需要注意的是 padding是会占据元素位置的
例如你的宽度是
width: 30px;
内边距 padding: 0 10px;
此时我们左右内边距为10px 加本身宽度
这块元素将有 50px的宽度
这是如果我们这想要里面的10
可以写 width: calc(50px - 20px);
很多人会说那你还不如写 width: 30px;呢
但有些单位不同的就需要这样写了
例如宽度是rem 内边距是px

同理外边距

margin: 10px;

在这里插入图片描述

background-image:url(img路径);
背景图片优先级高，背景图片会覆盖背景颜色
因为图片会覆盖背景颜色所以很多时候网页会即设置背景颜色又设置背景图片
这是为防止背景图片没有展示，可以展示出背景颜色，虽然所有浏览器都可以读取background-image可背景图片有时会加载不出来
background-repeat:属性可设置图片的重复形式值有
repeat :重复
no-repeat :不重复
repeat-x :水平方向重复
repeat-y :垂直方向重复