前端菜鸟打怪路：CSS基础概念（四）

月石子君
286 阅读6分钟

CSS发明者

  • Håkon Wium Lie

体系化学习

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

  • 语法（怎么写代码？）
  • 如何调试（找出自己写代码的错误？）
  • 在哪查资料（抄代码）
  • 标准制定者是谁

如何学

  • Copy-抄文档
  • Run—自身机器运行成功
  • Modify-加入自己的想法，然后运行

层叠样式表

样式层叠

  • 可以多次对同一选择器进行样式声明

选择器层叠

  • 可以用不同的选择器对同一元素进行样式声明

文件层叠

  • 可以用多个文件进行层叠

CSS 版本

版本 时间 重点
CSS 1 1996年 不用管
CSS 2 1998年 添加定位、Z-index、media
CSS 2.1 2004~2011年 使用最广泛的版本（IE都支持）
CSS 3 1999年起草 各个部分拆分成模块，一个个模块逐个细化
CSS 4* 分模块升级 各个模块，分别升级，只有模块的版本号

CSS语法（写代码）

样式语法

选择器{属性名：属性值；}
例：h2{color:red;}
.a{color:red;}
/*表示为CSS注释*/

at语法

  1. @charset "UTF-8";
  2. @import url(2.css);
  3. @media(min-width:100px) and (min-width:50px){语法}
  • 注意事项
    • @charset,表示声明字符编码，必须放在第一行
    • @import,导入额外的CSS表，前两个at语法必须以分号结尾
    • 区分大小写

CSS调试方法（找错误代码）

  1. [W3C验证器](caniuse.com/网页验证错误
  2. WedStorm看颜色
  3. 开发者工具警告
    • 看他是否有选择器
    • 看他的样式是否被划掉
    • 看他的样式是否有警告

Border调试法(重点重点重点)

borde:1px solid red;

步骤

1. 怀疑某个元素有问题,就给这个元素加`border`
2. 若找不出就一行一行加代码`border`
  3. `border`没出现？查看是否是选择器或语法错误
 4. `border`出现了，看边界是否符合预期

常见错误

  • 选择器拼写错误
  • 属性名拼写错误
  • 属性值拼写错误
  • 大小写错误
  • 没有分号错误
  • 中文冒号错误
  • 没写反花括号错误
  • 没加单位错误

查资料（抄代码）

标准制定者

练习：

  1. 365PSD练习
  2. dribbble.com顶级设计师社区
  3. pc网站，手机网址，UI套件，每种临摹两个足够

文档流 Normal Flow

文档流动方向

行级（inline）元素特征

  1. 盒子不会产生换行。
  2. width和 height 属性将不起作用。
  3. 内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开

块级（block）元素特征

  1. 撑满父亲可用空间
  2. 宽高有效
  3. 外边距、内边距、边框有效，会将其他盒子从元素周围推开
  4. 每个盒子会换到新行

流动方向

  • inline元素从左到右，到达最右边才会换行（但从左至右空间不够时会自己把自己截成两瓣）
  • block元素从上到下，每一个都占一行剩余另起一行（绝对不会把自己截成两瓣）
  • inline-block也是从左到右（但从左至右空间不够绝对不会把自己截成两瓣）

宽度

  • inline宽度为内部inline元素的和，不能用width指定
    • inline元素中不可以加block元素，使页面不会产生反应
  • block默认自动计算宽度，可用width指定
    • block元素默认占满全行，但是不是宽度100%
    • block元素默认widtn:auto,能有多宽占多宽，但不影响其他元素
    • 忠告：一般情况下：永远不要写宽度为100%,特殊情况除外
  • inline-block结合两者的特点可用width指定宽度

高度

  • inline高度由line-height（行高）间接确定，跟height（高）无关
    • pading只能改变inline看的见的可视高度，实际高度无法改变
  • block高度由内部文档流元素决定，把文档流元素全部包住，可以用height指定
    • 注意：有些元素position脱离了文档流，就无法包住
  • inline-block跟block类似，可以用height指定
    • inline-block也是包住文档流元素的

行级（inline）与块级（block）元素知识点更新

  • 新的HTML5可以被指定样式(自定义)，可以是内联，也可以是块级
    display:inline
display:block
display:inline-block
  • 但是大家在书写页面是尽量使用元素的默认样式，不可以随意指定一个元素是是（行是块）
  • 在使用inline-block样式可以随意使用

inline-block特点

  1. 具有行级（inline）与块级（block）元素的共同特点
  2. 流动方向从左至右，宽度可用width指定，高度height指定

overflow溢出

当内容大于容器

  • 等内容宽度或高度大于容器的，会溢出,用overflow是否显示滚动条

    • flow文档流，over超过

  • auto灵活设置

overflow:auto;

  • scroll永远显示
overflow:scroll;
  • hidden直接隐藏溢出部分
overflow:hidden;
  • visible直接显示溢出部分
overflow:visible;
  • overflow-x和overflow-y

脱离文档流

  • 元素
    • float
    • position:absolute/fixed

盒模型

content-box内容盒

  • content-box内容盒
  • border-box边框盒

公式

  • content-box
width=conten
  • borde-box
width=content +  padding +border

margin合并

  • margin父子合并

  • margin兄弟合并。
    • 记住：只有上下重叠，左右从来不会重叠

如何阻止合并

  • 父子合并用padding/border挡住

    border-top:10px solid blue
padding-top:1px;

  • 父子合并用overflow: hidden挡住

    overflow: hidden

  • 父子合并用display: flex挡住

    display: flex

  • 兄弟合并可以用inline-block消除

    display: inline-block;

    margin，padding和height,width语法

    元素 描述
    margin 元素的外边距属性
    margin-top 顶部外边距，允许有负值的
    margin-right 右外边距，允许有负值的
    margin-bottom 底部外边距，允许有负值的
    margin-left 左外边距，允许有负值的
    padding 元素的内边距
    padding-left 左内边距，不允许有负值的
    padding-right 右内边距，不允许有负值的
    padding-top 顶部内边距，不允许有负值的
    width 元素内容区的宽度
    min-width 给定元素设置最小宽度
    max-width 给元素设置最大宽度值
    height 指定了一个元素的高度
    min-height 给定元素设置最小高度
    max-height 给元素设置最大高度值 
    只有一个值时，这个值会被指定给全部的四个边.
两个 值时，第一个值被匹配给 上和下, 第二个值被匹配给 左和右.
三个 值时，第一个值被匹配给 上, 第二个值被匹配给 左和右, 第三个值被匹配给 下.
四个 值时，会依次按 上、右、下、左 的顺序匹配 (即顺时针顺序).

面试

  • 问：目前世界上使用最为广泛的CSS版本那个？
  • 答：CSS2.1
  • 问：目前CSS比较新的版本，比较现代的版本是那个？
  • 答：CSS3
  • 查看不同浏览器支持那些特性（ps记住浏览器各个使用内核，查资料）
  • caniuse.com
  • 对样式进行搜索即可
  • （ps Ctrl+shift+R 强制刷新，清除缓存）
  • 面试
  • 问：查charst "UTF-8"中指的是什么？
  • 答：chaert指向的不是字符集，而是文件编码
  • 问：content-box 与 border-box用那个好？
  • 答：border-box边框盒 比较好。

资料引用：
饥人谷方方老师
本文参考了饥人谷内部课程

avatar
文章
阅读
粉丝