CSS初级知识三(常用属性)

  ·   CSS     浏览量:

浮动

float:left/right
让元素居左居右浮动,

定位(默认值:static)

  • fixed
    相对于浏览器窗口定位,不随改变滚动改变,常见于侧边广告

    position: fixed;
    top: 100px;
    right: 30px;
    
  • absolute
    相对于父级定位,如果父级没有设置position属性,会产生意想不到的结果

  • relative
    相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

  • inherit
    继承父级定位

盒子模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
就是用来设置块级/内联块级元素的大小边框等的
如图
box-model

背景

设置元素的背景图片,颜色等
常用属性
background-color:颜色
background-position:背景图位置
background-size:背景图大小(设置成cover,能让图片宽和高至少有一个占满)
background-repeat:是否重复
background-image:背景图片

字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

  • 字体系列:font-family:Times, TimesNR, 'New Century Schoolbook',
    Georgia, 'New York', serif;从前到后自动识别是否有,有就使用
  • 大小:font-size:20px
  • 加粗:font-weight:
    normal 默认值。定义标准的字符。
    bold 定义粗体字符。
    bolder 定义更粗的字符。
    lighter 定义更细的字符。
    100、200、300、400、500、600、700、800、900定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
    inherit 规定应该从父元素继承字体的粗细。
  • 风格(如斜体):font-style:normal默认值/italic斜体/oblique倾斜/inherit继承。
  • 变形(如小型大写字母):font-variant,字变小变大写
    2

颜色

用来设置背景,文字,边框(border)等颜色
背景有时会使用到渐变
(RGB)和(hex) 两种都可以,分别如下
3
通常由UI给定

渐变

不用特别记忆,直接搜出来改变值就行了

  • 线性渐变 linear-gradient(direction, color-stop1, color-stop2, ...);
#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

4

  • 径向渐变 background: radial-gradient(center, shape size, start-color, ..., last-color);
#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 标准的语法 */
}

6



收起 >>
CSS初级知识三(常用属性)