乐趣区

关于css: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. 盒模型

  • 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)
退出移动版