CSS基础

嗨慢走
130 阅读4分钟

css基础笔记

css历史

  • css是有李爵士挪威的同事赖先生提出的

  • 赖先生的生平

    1991年获得MII媒体实验室视研究理学博士约为

    1994年提出css感念而闻名

    1999年任opera的cto

    2005年开始写信给比尔盖茨问为什么ie不支持web标准，盖茨说ie7马上发布，他写了Acid2用来验证

    2006年通过了博士论文答辩

    2006年他提倡web网页应使用通用字体模式

    2007年他提倡浏览器可以支持video标签

css的厉害之处（层叠样式表）

  • 层叠样式表指什么

    层叠样式；（可以多次对一个选择器进行样式声明）

    选择器层叠：（可以用同选择器对一个元素进行声明）

    文件层叠：（可以多个文件进行层叠）

怎样知道浏览器是否支持

  • 方法一：几十种浏览器都跑一边
  • 方法二；使用caniuse.com

css语法

  • 语法一

     选择器 {
     属性名；属性值；
     /*注释*/
 }

  • 注意事项

     所有符号都市英文符号。如果写错，浏览器会警告
 区分大小写，a和A是不一样的
 没有//注释
 最后一行的分号可以忽略，但建议不要忽略
 任何地方写错，都不会报错，浏览器会自动忽略

  • 语法二；at语法

     @charse "UTF-8"; (声明字符编码)
 @import url(2.css);（插入外部的css文件）
 @media （min-width：100px） add （max-width：200px）{
     
 }

  • 注意事项

     @charse必须放在第一行
 前两个at语法必须以分号，结尾
 charse是字符集的意思，但是UTF-8s是字符编码

border调试法

  • 步骤

    怀疑某个元素有问题

    就给它添加border

    border没有出现说明，选择器错了或者语法错了

    border出现了，看看边界是否符合预期

    bug解决了，才可以删掉border

基本概念

  • 文档流
  • 块，内联，内联块
  • magin合并
  • 两种盒模型（border-box更符合人类思维）

文档流

  • 文档流流动的方形

     inline元素从左到右，到达所有边才会转行
 block元素从上到下，每一个都另起一行
 inline-block元素从左到右

  • 宽度

     inline宽度为内部inline元素的和，不能用width指定
 block默认自动计算宽度，可以用width指定
 inline-block结合前两者的特点，可以用width指定

  • 高度

     inline高度由line-height间接确定，与height无关
 block高度由内部的文档流元素决定，可以设置height
 inline-block高度与block类似，可以设置height

overflow溢出

  • 当内容大于容器

     内容的宽度或者高度大于容器是，会溢出
 可以用overflow来设置是否显示滚动条
 auto灵活设置
 scrll永远显示
 hidden直接隐藏溢出部分
 visivle是直接显示溢出部分
 overflow可以分为overflow-x和overflow-y

脱离文档流

 block高度由内部文档流决定，可以设置height，这句话的意思是不是说有些元素可以在文档流中
 那些元素脱离文档流
 float（浮动元素）
 position：absoule/fixed (y有定位的元素)

两种盒模型

  • 分别是

     conent-box内容盒-内容就是盒子的边界
 border-box边框盒-边框才是盒子的边界

  • 公式

     content-box宽度=内容的宽度
 border-box 宽度=内容的宽度+padding+border
 那个更好用
 border-box更好用

    1640610917046

margin合并

  • 那些情况会合并

     父子 margin合并
 兄弟 margin合并

  • 如何组织合并

     父子合并用padding/border挡住
 父子合并用overflow；hidden挡住
 父子合并用display；flex 
 兄弟合并是符合预期的
 兄弟合并可以用inline-block清除

基本单位

  • 长度单位

     px像素
 em相对自身的font-size的倍数
 百分数
 整数
 rem 等把em用熟正在学
 vw和vh

  • yanse

     十六进制#ff6600或者#60
 rgba颜色rgb（0,0，0）rgba（0，0，0.1）
 hsl颜色hsl（360,100%，100%）

    \

avatar
文章
阅读
粉丝