CSS尺寸与边框与实例

最新推荐文章于 2023-12-27 17:27:49 发布

梦见憨憨丽吖

最新推荐文章于 2023-12-27 17:27:49 发布

阅读量327

点赞数 3

分类专栏： CSS web 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_44799645/article/details/102863745

版权

本文详细介绍了CSS中的尺寸单位，包括%、in、cm等，以及颜色单位如rgb、hex等。同时，讨论了CSS的尺寸属性，如width、height、min-width、max-width等，并解释了如何处理元素的溢出。最后，深入探讨了边框属性，包括边框样式、宽度、颜色以及如何单独设置各个边框。通过实例展示了各种属性的用法。

摘要由CSDN通过智能技术生成

CSS尺寸与边框
1、CSS单位
1、尺寸单位
1、%
占据父元素尺寸的占比
2、in
英寸，1in=2.54cm
3、cm
厘米
4、mm
毫米
5、px
像素，计算机屏幕上的一个点
6、pt(point)
磅/点
1pt=1/72in
7、em
1em 相当于当前字体尺寸
2em 相当于当前字体尺寸的2倍
注意：css中描述尺寸的单位是不能省略的。
2、颜色单位
1、rgb(r,g,b)
r:red
g:green
b:blue
r,g,b的范围分别是 0~255
background-color:rgb(125,28,96);
2、rgb(r%,g%,b%)
3、#rrggbb
由6位16进制数字表示颜色
16进制范围:
0-9 A-F
#ff0000 : 红色
#123456 :
4、#rgb
#rrggbb的缩写
#001122 --》 #012
5、表示英文的单词
red,green,blue,yellow,
2、尺寸属性
1、作用
尺寸属性一般用于设置元素的宽度和高度
2、宽度
属性：
width
min-width
max-width
注意：min-width/max-width 与 width 属性相冲突，最终以width属性值为准
3、高度
属性：
height
min-height
max-height
4、注意
1、不是所有的元素都支持修改尺寸
支持修改尺寸属性的元素如下：
1、块级元素
2、非块级元素中，存在width，height属性的html元素
table，img
5、溢出
使用尺寸属性控制元素大小时，如果内容所需的空间大小大于元素本身的空间，会导致内容溢出
处理溢出的属性:
overflow:
overflow-x:横向溢出处理
overflow-y:纵向溢出处理
取值：
1、visibile
默认值，溢出可见
2、hidden
隐藏
3、scroll
让元素显示滚动条，溢出时可用
4、auto
自动，溢出时显示滚动条，并可用
3、边框
1、作用
在元素周围绘制一条线
2、属性
1、简写方式
border:width style color;
width:边框粗细，以px为单位
style:边框样式
solid : 实线
dotted : 虚线
dashed : 虚线
color:边框颜色
合法的颜色值
作用：控制元素的上下左右四个边框的粗细，样式，颜色
2、单边定义
border-方向:width style color;
方向：
top：上
bottom：下
left：左
right：右
3、单属性定义
border-属性:值;
属性：
width : 边框粗细
style : 边框样式
color : 边框颜色
作用：控制四条边的对应属性
4、单方向单属性定义
border-方向-属性:值;
5、注意
1、边框颜色可取值为 transparent，意味透明
2、取消边框显示
border:0;
border:none;

				border-方向:0;
				border-方向:none;

如下为CSS尺寸与边框实例：

<!doctype html>
&

最低0.47元/天解锁文章