CSS（二） 颜色 盒模型 文字相关 border

一、颜色

rgb(r,g,b)  　　rgb取值 0-255   分别是 色光三元色  red green blue

rgba(r,g,b,a)　　rgb同上  a 是 alpha  代表透明度

colot : #ffffff;　　6个16进制   两两 一组  三组分别代表 rgb    如果 其中一组ff  可以 简写为 f

二、盒模型

Margin 外边距距最近有定位的父级 进行定位

margin:auto;相对于父级  左右居中

margin 也可以拆开写   margin-top　　margin-right 　　margin-bottom 　　margin-left

padding 内边距　　内部填充  如果内部看空间不足 会成大元素 　　也可以像margin一样才分开来表示

width

min-width　　最小宽度

max-width　　最大宽度

height

min-height　　最小高度

max-height　　最大高度

三、字体相关

font-size :12px;

color : red;

font-style: normall;

font-weight: normal/bold　　或者   200 ~900　　超过500 就是粗

font-variant:normal/small-caps

字体引入

@font-face{

font-family: ''king'';

src:url(king.ttf)

}

文字水平排版方式

text-align　　left/center/left

文本样式

text-decoration: none/underline/overline/linethrough

行高

line-height : 'height'　　当行高等于 父级高度时 文本居中显示

行首缩进

text-indent:'2em'

文本阴影

text-shadow:'水平，垂直，模糊度，颜色'

处理留白

white-space:'nowrap'　　不换行

文本结构

word-break:break-all　　破坏单词结构

word-break:keep-all　　在半角状态下 的空格进行换行

文本溢出

overflow:hidden;

text-overflow: clip　裁剪　　ellipsis 省略

单行溢出打点

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis

多行溢出打点

div{

    position: absolute;

    width: 100px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp :;

    overflow: hidden;

}

overflow

hidden : 隐藏

scroll : 滚动条

auto : 自动

设置  scroll  和 auto 都是 产生  滚动条  scroll  还会产生 下边的滚动条  我更倾向用  auto

也可以  处理某个方向的溢出

overflow-x: 　　横向溢出处理方式

overflow-y: 　　纵向溢出处理方式

四、border

border: 1px solid red;

border-width　　border-style 　　border-color

border-style

solid实线　　dotted点线　　dashed虚线　　double双线

可以 solid aotted 组合使用 或者  solid double  等  想 符合使用  要在  border-style 中定义  也可以像 margin padding 一样 写成  1-4个值

用border 画三角形

把width height 设置成 0 border的扔一边就变成三角形了  其他变得 color设置成transparent

border-radius

0 0 0 0 / 0 0 0 0 前四个是横向的半径  后四个是纵向的半径

当超最大的值 超过 100%   则把这连个值等比换算  是最大值为 100%   画圆

border-image

border-image-scure:图片路径

border-image-width:图片边框的宽度

border-image-repeat:边框的平铺方式

取值： repeat 平铺

round:铺满

stretch拉伸

border-shadow:

h-shadow:水平阴影距离

v-shadow:垂直阴影距离

blur： 可选  模糊距离

spread： 可选 阴影尺寸

color： 可选 颜色

outset: 外阴影  默认

inset： 可选值，将前阴影修改为内阴影