前端知识学习 - CSS基础

简单学习CSS的一些基础知识,为RN和Weex的学习做准备

2017-02-07 | 阅读

CSS

CSS为层叠样式表Cascading Style Sheets, 用于定义如何显示Html元素。css的语法有两个部分组成:

  • Selector :选择器,用于选取样式作用的html元素。
  • Declaration :声明,一条声明由一个属性和值来规定。

如 :

p {
color:red;
text-align:center;
}

选择器还有idClass两者,id选择器选定特定id的元素 :

#para1
{
text-align:center;
color:red;
}

class选择器,用于描述一组样式,可以用于多个元素,html元素通过class属性来进行定义class :

.center {text-align:center;}

css样式可以通过三种方式来格式化Html文档:

  • 外部样式表 : 通过link标签来连接:

      <link rel="stylesheet" type="text/css" href="mystyle.css">
    
  • 内部样式表 : 使用<style>标签在文档头部定义内部样式表:

      <head>
      <style>
      body {background-image:url("images/back40.gif");}
      </style>
      </head>
    
  • 内联样式 : 直接在标签内,使用style属性来定义 :

      <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
    

多重样式作用在一个元素上时, 优先级为 :

内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省设置

盒子模型

所有元素都可以看做一个盒子, 盒子如下所示 :

包括以下4个部分 :

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

而设置高度和高度时, 设置的是 content的部分。

position

CSS中通过positon来定义布局方式,一般有absolute,fixed,relative,flex,static四种。

  • absolute绝对定位,相对于static定位以外的第一个父元素进行定位.left表示距父元素的left的偏移,依次类推。使用后,元素脱离文档流,即如果当前布局是flex,则绝对定位是浮在所有兄弟元素上方的,不与兄弟元素相互作用,不决定兄弟元素的定位。
  • relative 相对定位,相对与自己原有的位置进行定位。原有位置表示元素在文档流中按照布局应该处于的位置。relative没有脱离文档流。
  • fixed : 生成绝对定位,但是相对的是浏览器的窗口,所以即使页面滑动,元素依旧浮动在浏览器的固定位置。
  • static : 默认值,表示没有定位,按照正常文档流进行定位。
  • flex : 使用flex-box定位。

绝对定位与相对定位的区别就在于坐标系,绝对定位以父节点进行定位,而相对定位是相对于自己原有的文档流进行定位。

flex布局

传统的CSS中的布局方案是基于盒状模型,依赖displaypositionfloat属性,而flexbox, 弹性布局为盒状模型提供了灵活的配置能力,任何一个容器都可以指定为flex布局:

.box{
  display: flex;
}

行内元素也可以使用flex布局:

.box{
  display: inline-flex;
}

webkit内核中,必须加上-webkit前缀,

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

设为Flex布局以后,子元素的floatclearvertical-align属性将失效。

采用flex布局的元素,称为flex container, 而它所有的子元素自动称为容器的成员,称为flex item

容器默认存在两根轴, 水平的main axis ,和垂直的cross axis ,前者开始和结束的位置称为 main startmain end ,而后者开始与结束的位置称为 cross startcross enditem默认沿 mian axis排列,占据的main的空间称为main size ,占据cross axis上的空间称为cross size

container 属性

对于container ,有以下6个属性:

  • flex-direction : 决定main axis的方向,即item排列方向:

      .box {
        flex-direction: row | row-reverse | column | column-reverse;
      }
    

    默认是row, 也就是水平向右。

  • flex-wrap : 默认情况下,item排列在一条线上,而该属性定义的是,如果一条线排不下,应该如何换行,有三个选项 :

      flex-wrap: nowrap | wrap | wrap-reverse;
    

    默认是 nowrap,表示不换行,wrap表示换行,向下排列,而wrap-reverse表示换行,向上排列 :

  • flex-flow : 该属性是flex-directionflex-wrap的简写形式,默认是row nowrap .
  • justify-content : 该属性定义了项目在main axis上的对齐方式:

      justify-content: flex-start(左对齐) | flex-end(右对齐) | center(居中) | space-between(两端对齐,间隔相等) | space-around (两端间隔);
    

  • align-items : 属性定义项目在cross axis上如何对齐。选项有flex-start(起点对齐) | flex-end (终点对齐) | center | baseline(第一行文字的基线对齐) | stretch(默认值,如果没有设置高度,则占满) :

  • align-content : 属性定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用。有以下选项:flex-start | flex-end | center | space-between | space-around | stretch

item属性

  • order: 定义项目排列顺序,数值越小,排列越靠前,默认为0.
  • flex-grow : 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大item.
  • flex-shrink : 定义项目缩小比例,默认为1,即如果空间不足,则该item将缩小,如果为0,表示不缩小。
  • flex-basis : 定义在分配多余空间之前,项目占据的main size.默认值是auto,即项目本来的大小。
  • flex属性,是flex-grow,flex-shrinkflex-basis的简写,默认值是 0 1 auto ,后两个属性是可选的。该属性有两个快捷值 : auto 表示1 1 auto ,和 none 表示 0 0 auto.
  • align-self 属性允许单个item有与其他item不一样的对齐方式,可覆盖align-items属性。默认值是 auto,表示继承父元素的algin-items,如果没有父元素,则等同于stretch