第二篇、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{
             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>

View Code

如果让一个非块级元素设置宽和高需要加上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（用于创建有宽度的不可见边框）