CSS 的尺寸和边框

1、CSS单位

1.1、尺寸单位

单位	说明
px	像素
%	百分比
in	英寸（1英寸 = 2.54cm）
pt	磅（1磅 = 1 / 72英寸）
mm	毫米
cm	厘米

注意：在css中，尺寸单位不能省略，但在HTML中是可以省略的

div{
      font-size: 24px;color: red;background-color: grey
  }

1.2、颜色单位

单位	说明
rgb	r:red(0-255);g:green(0-255),blue(255,255,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、边框

3.1、边框的实现

a）简写方式，同时设置四条边框 border
语法： border：1px solid #000

取值	说明
1px	宽度
solid、dotted、dashed	样式（实线、点虚线、线虚线）
#000、transparent	颜色或透明

特殊用法： border：none 或 border：0 （取消边框）

b）单边定义，只设置一条边框 border-方向（top、bottom、left、right）
语法： border-top：1px solid #000

取值	说明
1px	宽度
solid、dotted、dashed	样式（实线、点虚线、线虚线）
#000、transparent	颜色或透明

特殊用法： border-tpo：none 或 border：0 （取消上边框）

c）单属性定义，设置四边框的属性 border-属性：值（width、style、color）
语法： border-width：3px 设置四条边框宽度为3像素

d）单边单属性定义，设置一条边框的属性 border-方向-属性：值
语法： border-top-width：3px 设置上边框宽度为3像素

<head>
    <style>
        #d1{
            width:0px;
            height:0px;
            border: 10px solid transparent;
            border-top-color:#000 /* 上边框为黑色 */
        }
    </style>
</head>
<body>
    <div id="d1"></div>   /* 画三角形 */
</body>
</html>

3.2、轮廓 outline：none（取消轮廓）

3.3、边框圆角 border-radius

取值	说明
5px	半径为5px的圆角
50%	边框占比50%的圆角

3.4、边框阴影 box-shadow

语法：box-shadow：0px 0px 1px 1px red；

取值	说明
h-shadow	水平偏移距离，取值为正往右偏移，反之，做偏移（必须有）
v-shadow	垂直偏移距离，取值为正往下偏移，反之，做偏移（必须有）
blur	模糊距离，数值越大，模糊效果越强烈
spread	阴影尺寸
color	阴影的颜色