CSS尺寸与边框

尺寸与边框

1.单位

1.尺寸单位  1.px：像素    1024*768
  2.in:英寸    1in=2.54cm
  3.pt：磅(1pt=1/72in)
    多数用于表示文字的大小  4.cm:厘米  5.mm:毫米  6.em:相对于父元素乘以倍数(多个父元素2em)  7.rem:根相对（元素字体大小乘以倍数，html\body）2.颜色单位（颜色取值）  1.英文单词
    red,blue,gray,green,yellow,black....  2.rgb(r,g,b)
    r:0-255g:0-255b:0-255
  3.rgba(r,g,b,alpha)
    alpha:透明度，取值为0-1之间的小数，值越大，不透明度越高  4.#rrggbb
    由6位16进制的数字\字母表示一个颜色0-9或A-f#000000:黑色#ffffff:白色#eeeeee:灰色#ff11aa
  5.#rgb是上面的缩写形式    #000:黑色#fff:白色#f1a

2.尺寸属性

1.作用
  设置元素的宽度和高度2.语法  1.宽度    width:宽度min-width:最小宽度max-width:最大宽度  2.高度    height：高度min-height:最小高度max-height:最大高度3.页面中哪些元素允许设置尺寸属性  1.所有的块级元素都允许设置尺寸    div,p,h1,h2..h6,ul,ol,dl,结构标记  2.本身具备width和height属性的行内元素是可以设置的    img,table
  3.行内块允许设置尺寸
    大部分的表单控件（单选按钮，复选框）  4.大部分的行内元素是无法设置尺寸    a,span,b,i,u,s等

3.溢出处理

当内容多，元素区域小的时候，就会产生溢出的效果，默认都是纵向溢出。
属性：overflow,overflow-x,overflow-y
取值：   1.visible
     可见的，默认值，溢出可见   2.hidden
     隐藏的，溢出的内容全部隐藏，溢出内容不可见   3.scroll
     显示滚动条，溢出时，可用   4.auto
     自动，溢出时才显示滚动条并可用

4.边框

1.边框属性  1.简写方式    border:width style color;     width:边框的宽度，以px为单位的数值     style:边框的样式
       取值：
         solid:实线
     dotted:虚线边框(点)
     dashed:虚线边框(线)     color:边框的颜色
         取值：合法的颜色值     transparent:透明色
     注意：
       取消边框：border:0;或border:none;       

  2.单边定义
    只设置某一条边的边框
属性：border-方向:width style color;
    方向：top/bottom/left/right
       上   下     左   右  
  3.单属性定义
    只设置四条边框的一个属性
属性：border-width/style/color:值；
  ex:border-width:3px;     border-style:dotted;     border-color:red;  4.单边单属性的定义
    只设置某一个方向的某一个属性
属性：  border-方向-属性：值；
  方向：top/bottom/left/right
  属性：width/style/color
  ex：    border-left-color:blue;    border-right-style:solid;    border-bottom-width:6px;2.边框倒角
  将元素的直角倒换成圆角
  属性：border-radius
  取值：        1.以px为单位的数值        2.百分比 %  设置圆形（50%）

  单角设置：     border-top-left-radius:左上角 border-top-right-radius:右上角 border-bottom-left-radius:左下角 border-bottom-right-radius:右下角3.边框阴影
 属性：box-shadow
 取值：h-shadow v-shadow blur spread color inset
    h-shadow:阴影在水平方向的偏移距离，必须值   
     取值为正：阴影向右偏移
     取值为负：阴影向左偏移
v-shadow:阴影在垂直方向的偏移距离，必须值   
     取值为正：阴影向下偏移
     取值为负：阴影向上偏移
blur:阴影模糊距离，取值越大，模糊效果越明显，以px为单位的数值（可选值）
spread:阴影的大小，指定要在基础阴影上扩充出来的大小，取值以px为单位的数值（可选值）color:阴影颜色（可选值）
inset:将默认的外阴影改为内阴影（可选值） 
4.轮廓
  轮廓指的是边框的边框，绘制于边框外围的一条线
  属性：
     outline:width style color;
 widht:轮廓的宽度 style:轮廓的样式  
    取值：solid/dotted/dashed color:轮廓的颜色

  取消轮廓：
       outline:none/0;

本文链接：https://www.weguiding.com/zhishi/200.html