CSS知识总结(一)

InnerXuan
215 阅读3分钟

概述

css是谁发明的？

Lee(Html的发明人)的同事 Hakon Wium Lie 提出的css

我们简称“赖先生”,于1996年提出了css的概念，并且提倡用HTML和CSS写书

css的层叠性

  • 样式层叠:可以对同一个选择器进行样式的声明
  • 选择器层叠:可以对同一选择器对同一个元素进行样式层叠
  • 文件层叠: 可以用多个文件进行层叠 这样造成了css的许多隐患
版本 年代 声明
css1 1996 不用管
css2 1998 定位，media，不用管
css2.1 04-11 最广泛的版本(IE支持)
css3 99年起草 现代版本，分模块IE8部分支持

怎么知道哪些浏览器支持哪些属性？

1.几十种浏览器全部跑一遍
2.使用caniuse.com
比如查grid布局的兼容性

css语法

语法1
选择器{
    属性名:属性值;
    /*注释*/
}

注意事项:

  • 没有//注释
  • 区分大小写
  • 最后一个分后可以省略
  • 任何地方写错了，浏览器会直接忽略
语法2
 @charset "UTF-8"
 @import url(2.css)
 @media (min-width:100px) and(max-width:200px){
     
     
 }

注意事项:
@charset必须放第一行
前两个at语法以分号结束

charset是字符集的意思
'utf-8'是字符编码的意思

在css中charset其实强调的是文件的字符编码方式

如何调试

  1. VSCOD调试看颜色
  2. Webstorm调试看颜色
  3. chrome开发者工具
  4. border调试法
border调试法

步骤：

  1. 怀疑某一个元素有问题，就给这个元素加border
  2. border在第一行的时候，查看浏览器border没出现，说明选择器错了
  3. border出现了？看看边界是否符合

在哪里查查找资料

  1. google 搜索关键字 mdn
  2. 关键词 css tricks
  3. 张鑫旭的博客

书籍推荐

不推荐买任何书

练习素材

PSD
freepik搜索psd web
365psd 里的UI套件
效果图
dribbble.com顶级设计师社区,可以用肉眼去模范它。
商业网址
京东，淘宝，网易

不要沉迷临摹

每个类型的临摹1-2即可

标准制定者

w3c

文档流与盒模型

inline行内元素，向右流动，换行时会截断
block 从上到下流动，每个都会另起一行
inline-block也是从左到右，不会跨两行
新的HTML5标准中，不分内联元素，块级元素，主要看样式
不要在inline中嵌套元素,inline元素的宽度为内部inline元素的和 inline元素不接受宽度 div默认宽度width:auto,不是100% 永远不要写width:100%

 <style>
        span {
            border: 1px solid #000;
            line-height: 100px;

        }

        div {
            margin-top: 70px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <span>我是行内元素</span>
    </div>

</body>

浏览器运行效果

inline的实际高度是由Lineheight间接决定的 div包的是实际高度，由line-height决定

在span里面加padding:50px 10px;使用默认linehight
效果

就可以验证这种猜测

溢出

就是当内容大于容器 溢出隐藏overflow:hidden
auto是默认的

脱离文档流

那些元素脱离文档流？ float的元素
postion:absolute/fixde
两种盒模型
content-boxcontent内容就是盒子的边界
宽度content的宽度
border-boxwidth边框盒-边框才是盒子的边界
宽度: content + padding+ border

基本单位

  • px像素
  • em相对于只身的倍数
  • 百分比
  • 整数

颜色：

  • 16进制
  • hsl(100%,100%,100%)
  • rgb()
avatar
文章
阅读
粉丝