CSS(二) 颜色 盒模型 文字相关 border

时间:2022-04-17 05:46:02

一、颜色

  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 画三角形

CSS(二) 颜色 盒模型 文字相关 borderCSS(二) 颜色 盒模型 文字相关 border

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

  

  border-radius

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

  CSS(二) 颜色 盒模型 文字相关 border

当超最大的值 超过 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: 可选值,将前阴影修改为内阴影