1, CSS支持的尺寸单位
1, px 像素
2, % 占据父元素对应属性的占比
3, in 英寸inch; 1 in = 2.54cm 一般表示硬件尺寸
4, pt 磅point 1pt = 1/72in 一般设置文字大小
计算机中一般设置PPI(Pixel Per Inch)72;
5, cm 厘米
6, mm 毫米
注意:css中,所有的尺寸单位是不可以省略的;(HTML可以省略)
2, 颜色单位(颜色取值)
1, rgb(r,g,b)
r: red 红色范围值, 0-255
g:green 绿色范围值, 0-255
b: blue 蓝色范围值, 0-255
eg:
background-color:rgb(255,0,0) 红色
rgb(255,255,255) 白色
2, rgba(r,g,b,alpha)
alpha: 颜色透明度,取值 0-1之间的数字
0:完全透明
1:完全不透明
eg:
background-color:rgba(155,0,0,0.5)
3, #rrggbb (red,red,green,green,blue,blue)
由6位16进制数字来组成的颜色
#ff0000
4, #rgb -->
#rrggbbd的缩写,当每两位数字相同时,可以使用缩写方式
#ff0000 -> #f00
#11ff33 -> #1f3
#333 -> #333333
5, 表示颜色的英文单词
red,gree,blue,yellow,black,white,....
注意:取色的时候一般美工会给出效果图,或者给出颜色的值;或者自己用取色工具取出
3, 尺寸属性
1,作用
改变元素的宽度和高度
2,属性
1, 宽度
属性:width
取值: px或%为单位的数值
2, 高度
属性:height
取值: 以px或%为单位的数值
所有块级元素的尺寸:
宽度: 占父元素100%的宽
高度: 已内容为准
所有行内元素的尺寸:
宽度和高度均以内容为准;
注意:
html和css中,除了img以外所有的行内元素尺寸都不允许修改;
3, 溢出的处理
1,什么是溢出:
当使用尺寸属性限制元素尺寸时,如果内容所需要的空间大于元素尺寸的话,则产生溢出效果;
2,溢出属性
overflow:
1, visible 可见的,默认值
2, hidden 溢出内容会隐藏
3, scroll 溢出时滚动条可用,不溢出有滚动条,不可用
4, auto 溢出时产生滚动条,不溢出无滚动条;
4, 边框属性
1,边框实现:
1, 边框简写方式:
属性: border
取值: width style color
width: 边框宽度,px为单位
style: 边框样式, solid实线/dotted点状虚线/dashed线状虚线
color: 边框颜色
1,合法颜色值
2, transparent透明的
特殊用法: border:none; 取消边框
2, 单边定义:
定义上下左右,某一条边的宽度,样式,颜色
属性:border-方向: width style color;
border-top
border-bottom
border-left
border-right
3, 单属性定义
设置四个方向边框的某一属性值
语法: border-属性:值
border-width
border-style
border-color
4, 单边单属性的定义
设置某一个方向某一个属性的值
语法: border-方向-属性:值;
eg: border-bottom-color:black;
border-bottom-style:dashed;
border-right-width:3px;
2, 轮廓
边框外围的一条线框;
outline:none; 取消轮廓
3,边框倒角
1, 作用
将边框的四个角变为圆角
2, 语法
属性: border_radius
取值:
1, 以px为单位的取值;弧长
2, 以 %为单位的数值,以当前矩形的宽和高的占比,一般取 50%;
4, 边框阴影
属性: box-shadow:h-shadow v-shadow blur spread
取值: x-shadow 阴影的水平偏移距离,数字
取值为正,阴影向右便宜
取值为负, 阴影向左便宜
v-shadow 阴影的垂直偏移距离,数字
取值为正,阴影向下偏移
取值为负:阴影向上偏移
blur 阴影模糊大小,数字
数字越大,越模糊
spread 阴影大小,数字
color:阴影颜色
eg:
#uname:focus,#upass:focus{
border-color:rgb(139,177,239);
box-shadow: 0px 0px 2px rgb(139,177,239)
outline:none;
}