第二篇、css尺寸和边框
一、尺寸和标签图
二、尺寸单位
%：百分比 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{ width: 500px; height: 150px; border: 1px solid#000; overflow-y: hidden; overflow-x: auto; } div.sample_img img{ width: 100px; height: 100px; } /*设置p标签在宽度上大于所有图片的宽度*/ div.sample_img p{ width: 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{ width: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（用于创建有宽度的不可见边框）
