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 外边距距最近有定位的父级进行定位

值的个数	分别代表
4	上，右，下，左
3	上，左右，下
2	上下，左右
1	上下左右

　　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：可选值，将前阴影修改为内阴影

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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