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

 

转载于:https://www.cnblogs.com/96weibin/p/7828627.html