一、尺寸和标签图
二、尺寸单位
%:百分比 in:英寸 cm:厘米 mm:毫米 pt:磅(点)(1pt等于1/72英寸) px:像素(计算机屏幕上的一个点) em:1em等于当前的字体尺寸,2em等于当前字体尺寸的两倍 (相对单位)
三、颜色单位
rgb(x,x,x):RGB值,如rgb(255,0,0) rgb(x%,x%,x%):RGB百分比值,如rgb(100%,0%,0%) #rrggbb:十六进制数,如#ff0000 #rgb:简写的十六进制数,如#f00 表示颜色的英文单词,如red
四、尺寸
尺寸属性适用于设置元素的宽度和高度 单位一般为像素或者百分比 宽度属性 width max-width 只能让用户设置的里面使用 min-width 只能让用户设置的里面使用 高度属性 height max-height min-height
五、溢出
- 使用尺寸属性控制框的大小的时候,如果内容所需的空间大于框本身的空间会导致内容溢出
- overflow:当内容溢出元素框的时候如何处理
--visible
---hidden
---scroll
---auto
- overflow-x
- overflow-y
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*定义选择器,设置边框颜色为黑色,设置y轴没有滚动条,x轴有滚动条*/ div.sample_img{ 500px; height: 150px; border: 1px solid#000; overflow-y: hidden; overflow-x: auto; } div.sample_img img{ 100px; height: 100px; } /*设置p标签在宽度上大于所有图片的宽度*/ div.sample_img p{ 800px; height: 150px; } </style> </head> <body> <div class="sample_img"> <p> <!--图片路径--> <img src="p_small_001.jpg"> <img src="p_small_002.jpg"> <img src="p_small_003.jpg"> <img src="p_small_004.jpg"> <img src="p_small_005.jpg"> <img src="p_small_006.jpg"> <img src="p_small_007.jpg"> </p> </div> </body> </html>
如果让一个非块级元素设置宽和高需要加上display元素
span{ 500px; height:150px border:1px solid #000 display:block; }
六、边框
简写方式
border:width style color;
单边定义
border-left/right/top/bottom:width style color;
border-width
border-left/right/top/bottom-width
boder-style
border-left/right/top/bottom-style
border-color
border-left/right/top/bottom-color
边框颜色,可以设置transparent(用于创建有宽度的不可见边框)