CSS 的尺寸和边框

最新推荐文章于 2022-10-10 10:47:10 发布

Python小子

最新推荐文章于 2022-10-10 10:47:10 发布

阅读量912

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43883022/article/details/88688692

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS 的尺寸和边框

1、CSS单位

1、尺寸单位

单位	说明
px	像素
%	百分比
in	英寸（1英寸 = 2.54cm）
pt	磅（1磅 = 1 / 72英寸）
mm	毫米
cm	厘米

注意：在css中，尺寸单位不能省略，但在HTML中是可以省略的

div{
      font-size: 24px;color: red;background-color: grey
  }

2、颜色单位

单位	说明
rgb	r:red(0-255);g:green(0-255),blue(0-255)
rgba	alpha(0-1的小数) 0是透明，1不透明
#rrggbb	由6位十六进制表示一种颜色
#rgb	#rrggbb的缩写，每两位数字相同时，可以采用缩写（#000000 = #000）

2、CSS尺寸

属性	说明
width	改变元素宽度
height	改变元素高度

块级元素的默认尺寸	宽度：	占父元素的100%
块级元素的默认尺寸	高度：	以内容为准
行内元素的默认尺寸	宽度：	以内容为准
行内元素的默认尺寸	高度：	以内容为准

允许修改尺寸的元素：

1、所有的块级元素都可以修改尺寸
2、所有的行内块元素（表单控件）都可以修改尺寸
3、表格可以修改尺寸
4、除img以外的行内元素，都不能修改尺寸

<head>
    <style>
        #title{
            width: 200px;
            height: 50px;
            background-color: #00cc11;
        }
        #name{
            width: 200px;
            height: 50px;
            background-color: #123acb;
        }
    </style>
</head>
<body>
    <div id="title">python基础</div>   <!--修改成功-->
    <span id="name">山姆</span>   <!--未修改成功-->
</body>
</html>

溢出处理

1、当使用尺寸属性限制元素的尺寸时，如果内容过多，就会产出溢出效果
2、溢出处理属性 overflow

取值	说明
visible	可见的，默认值
hidden	隐藏
scroll	显示滚动条，溢出出可使用
auto	自动，溢出方向会自动产生滚动条

3、边框

1、边框的实现
a、简写方式，同时设置四条边框 border
- 语法： border：1px solid #000
- 特殊用法： border：none 或 border：0 （取消边框）

取值	说明
1px	宽度
solid、dotted、dashed	样式（实线、点虚线、线虚线）
#000、transparent	颜色或透明

b、单边定义，只设置一条边框 border-方向（top、bottom、left、right）
- 语法： border-top：1px solid #000
- 特殊用法： border-top：none 或 border：0 （取消上边框）

取值	说明
1px	宽度
solid、dotted、dashed	样式（实线、点虚线、线虚线）
#000、transparent	颜色或透明

c、单属性定义，设置四边框的属性 border-属性：值（width、style、color）
- 语法： border-width：3px 设置四条边框宽度为3像素
d、单边单属性定义，设置一条边框的属性 border-方向-属性：值
- 语法： border-top-width：3px 设置上边框宽度为3像素

<head>
    <style>
        #d1{
            width:0px;
            height:0px;
            border: 10px solid transparent;
            border-top-color:#000 /* 上边框为黑色 */
        }
    </style>
</head>
<body>
    <div id="d1"></div>   <!-- 画三角形（黑色倒三角） -->
</body>
</html>

2、轮廓 outline：none（取消轮廓）
3、边框圆角 border-radius

取值	说明
5px	半径为5px的圆角
50%	边框占比50%的圆角

4、边框阴影 box-shadow
- 语法：box-shadow：0px 0px 1px 1px red；

取值	说明
h-shadow	水平偏移距离，取值为正往右偏移，反之，做偏移（必须有）
v-shadow	垂直偏移距离，取值为正往下偏移，反之，做偏移（必须有）
blur	模糊距离，数值越大，模糊效果越强烈
spread	阴影尺寸
color	阴影的颜色

Python小子

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS 的尺寸和边框

CSS 的尺寸和边框1、CSS单位    1、尺寸单位单位说明px像素%百分比in英寸（1英寸 = 2.54cm）pt磅（1磅 = 1 / 72英寸）mm毫米cm厘米注意：在css中，尺寸单位不能省略，但在HTML中是可以省略的div{ font-size: 24...
复制链接

扫一扫