CSS基础1

A互动投影程鑫
226 阅读5分钟

css的简介

  1. css的历史 CSS的全称为：Cascading Style Sheets，层叠样式表。它是由李爵士的挪威同事赖先生在1994年提出的。
  2. css的版本 目前使用最广泛的版本是css2.1，它是在2004年~2011年之间不断完善形成的。css3是分模块进行升级的，它1999年开始起草的是目前最新的版本，由于可模块升级所以没有css4的说法。
  3. css的特点
  • 样式层叠 可以多次对同一选择器进行样式声明
  • 选择器层叠 可以用不同选择器对同一元素进行样式声明
  • 文件层叠 可以用多个文件进行层叠

caniuse.com查看哪些浏览器支持哪些特性

caniuse.com输入查询哪些浏览器不支持

css是艺术

需要用感性思维来理解css，不要问为什么，而是原来是这样。浏览器说是什么就是什么。所见即所学！

体系化学习

  1. 学一门语言必须学会什么？

  • 语法（怎样写代码） 语法一：样式语法

    p(选择器){
  color（属性名）:red（属性值）;
}/*注释*/

    语法二：at语法

    @charet "UTF-8"；声明你的字符编码。 必须放在第一行
@import url(2.css);导入一个额外的css文件
@media (min-width: 100px) and (max-width:200px){语法一}媒体查询
前两个@语法必须以“；”结尾
charset "UTF-8"指定的是文件编码，而不是字符集

  • 如何调试（怎样知道自己的代码写错了） border调试法 border：1px solid red；

  • 在哪里查资料（其实就是为了抄代码） 1、谷歌关键词加mdn；2、css tricks；3、张鑫旭的博客

  • 标准制定者是谁 w3c，css spec *怎样练习 模仿、

文档流

文档流指的是文档的流动方向有以下两种

  1. 流动方向
  • 从左到右 的元素一般有两种 inline-block元素和span元素。 span元素到达最后会分成两块，span{第$个span元素}*8可以快速写8个span元素
  • 从上到下 div元素从上到下，每个元素占一行
  • inline 元素从左到右，到达最右边才会换行
  • block 元素行上到下，每一个都另起一行
  • inline-block也从左到右，但是到达最后的时候不会分成两块
  1. 新的HTML5所有元素都可以是内联元素和块级元素,如何区分？
  • 样式为display:inline就是内联元素
  • 样式为display：bloch就是块级元素
  • 不要在inline元素里面写block
  • span元素为display：inline元素，div元素是dispiay：block元素
  • inline-block元素可以用span表示也可以用div表示
  1. 宽度 width
  • span 元素宽度是由里面的所有内联元素的宽度合成的。特点尽量的窄
  • inline 宽度为内部inline元素的和不能用width指定
  • div 元素宽度默认是能有多宽但不代表是100%，它不影响其他元素可以单独设置宽度。如果不写宽度默认是width：auto。永远不要写宽度100%，需要的时候再写。div的特点尽量的宽。
  • block 默认自动计算宽度，可用width指定
  • inline-block 结合两者特点，可用width单独设置宽度。
  1. 高度 height
  • span的实际高度是行高ling-height决定的，ling-height行高可以继承写哪里都一样。
  • inline 高度由line-height间接确定，跟字体相关，字体不一样高度也不一样这个知识点叫做行盒。跟height无关。
  • div的高度是由里面的文档流中元素的总和决定的。如果不写任何内容div高度为0；如果脱离文档流就包不了住 style=position：absolute;background:whitr；
  • block 高度由内部文档流元素决定，可以设height
  • inline-block跟bloch类似，可以设置height

overflow 溢出

当内容大于容器

  • 等内容的width和height大于容器的，会溢出
  • 可以用overflow来设置是否显示滚动条
  • auto是灵活设置，如果下面有滚动条，内联元素只显示第一屏的内容，后面是留空的。
  • scroll是永远显示
  • hidden是直接隐藏溢出部分
  • visible是直接显示溢出部分
  • overflow可以分为overflow-x和overflow-y

脱离文档流

  1. float：left
  2. position: absolute/fixed
  3. 脱离文档流是会影响高度的计算的。
  4. 从上到下 div元素从上到下，每个元素占一行

盒模型

  1. 盒模型有两种
  • content-box内容盒-内容就是盒子的边界
  • border-box边框盒-边框才是盒子的边界
  1. 两种盒模型的区别
  • content-box的宽度只包含content
  • border-box的宽度包含到border，有内边距（padding）、边框（border）和内容（content）
  1. 公式
  • content-box width=内容宽度
  • border-box width=内容宽度+padding+border
  1. 哪个好用 boeder-box更好用

margin合并

  1. 哪些情况会合并
  • 父子margin 合并
  • 兄弟margin 合并
  1. 如何阻止合并
  • 父子合并用padding/border 挡住
  • 父子合并用overflow:hidden挡住
  • 父子合并用display:flex，不知道为什么
  • 兄弟合并是符合预期的
  • 兄弟合并可以用inline-block 消除
  • 总之要一条一条死记
  • 而且CSS的属性逐年增多，每年都可能有新的

display: inline-block;可以取消margin合并 border-top 边框上边距

基本单位

  1. 长度单位
  • px像素 em 相对于自身font-size的倍数百分数 整数 rem：等你把em滚瓜烂熟了再问rem vw和vh其他长度单位都用得很少，不用了解
  1. 颜色 十六进制#FF6600或者#F60 RGBA颜色rgb（0，0，0）或者rgba（0，0，0，1）a透明，最大1，0全透明 hsl颜色hsl（360，100%，100%）
avatar
文章
阅读
粉丝