CSS基础

基本概念

CSS(层叠样式表)

1.层叠的含义?

  • 样式层叠
    可以多次对同一选择器进行样式声明
  • 选择器层叠
    可以用不同选择器对同一个元素进行样式声明
  • 文件层叠
    可以用多个文件进行层叠

2.语法

  • 语法一
    选择器{
    属性名:属性值;
    /**/;
    }
  • 语法二
    @charset "UTF-8" //申明字符编码
    @import url(2.css); //导入额外的css文件
    @media (min-width:100px) and (max-width:200px){
    语法一
    }

3.CSS查资料相关

  • MDN
  • CSS ticks
  • 张鑫栋

4.文档流
流动方向:

  • inline元素从左到右,达到最右边才会换行 e.g span
  • block元素从上到下,每一个都另起一行 e.g div
  • inline-block元素也是从左到右

内联元素:

  • inline宽度为内部inline元素的和,不能用width指定
  • inline高度由line-heigth间接确定,跟height无关

块级元素:

  • block默认自动计算宽度,可用width指定
  • block高度由内部文档流元素确定,可以设height
  • block默认自动计算宽度,可用width指定 备注:width默认值是auto,注意永远不要自行设置width:100%;

inline-block

  • inline-block结合前两者特点,可用width 备注:宽度默认和inline一样,但是可以自行设置
    高度;
  • inline-block跟block类似,可以设置height

注意:
1.不存在内联元素和块级元素,可以说目前这个元素是内联的,或者是块级的。因为这些元素都可以通过display:inline 或者display:block 来修改默认样式
2.不要在inline元素里面加上display为block的元素,不然会出问题

overflow溢出:

  • 当内容的高度或高度大于容器的。会发生溢出 备注:当内容的高度或者宽度大于你自己设置的高度或者宽度,内容会发生溢出。
  • 可以overflow来设置是否显示滚动条,相关值:scroll(永远显示)、auto(灵活设置)、hidden(隐藏溢出内容)、visible(直接显示溢出内容)

脱离文档流:
block的高度可以由内部文档流元素决定,换句话说如果这个块里面所在的元素不在这个容器里面,也就是脱离了文档流,那么该容器在计算高度时,就不会计算脱离了文档流的元素
设置脱离文档流元素的样式:
float:left;
position:absolute/fixed
额外:纠错方式:border调试法(给元素加border)、开发者检查、开发者工具

5.盒模型

CSS基础_第1张图片

  • content-box(内容盒):宽度只包含内容-内容就是盒子的边界
  • border-box(边框盒):宽度包含了border-框架才是盒子的边界
    content-box width=内容宽度 备注:同理高度也是一样
    border-box width=内容宽度+padding+border
  • 边距重叠:只发生在上下边距 左右边距不会发生重叠
  • magin合并:前提是里面的值相同,即padding、border。若要改变边距重叠情况,只需要使里面的值不一样就行。

基本单位:

  • px-像素
  • em-相对于自身font-size的倍数 即font-size*em
  • 百分数
  • 整数
  • 十六进制:e.g #FF6600
    rgb(0,0,0)/ RGBA颜色 rgba(0,0,0,1)

你可能感兴趣的