CSS 的尺寸 和 边框
1、CSS单位
单位 | 说明 |
---|
px | 像素 |
% | 百分比 |
in | 英寸 (1英寸 = 2.54cm) |
pt | 磅 (1磅 = 1 / 72英寸) |
mm | 毫米 |
cm | 厘米 |
- 注意:在css中,尺寸单位不能省略,但在HTML中是可以省略的
div{
font-size: 24px;color: red;background-color: grey
}
单位 | 说明 |
---|
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 | 颜色 或 透明 |
<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 | 阴影的颜色 |