CSS基础

前端菜鸟zzz
56 阅读5分钟

CSS是谁发明的？

Håkon Wium Lie

李爵士的挪威同事赖先生首先提出CSS.

CSS全称：层叠样式表

CSS 2.1 (2004~2011)是使用最广泛的版本（IE支持）

CSS3 1999年开始起草，现代化版本，分模块（IE8部分支持）

http://caniuse.com/ 可以知道哪些浏览器支持哪些特性。

语法一：样式语法

选择器{

属性名:属性值；

}

注意！ 注释要这样写：/*注释*/

注意事项：

1.所有符号都是英文

2.区分大小写，a和A是不同的东西。

3.没有//注释

4.不要漏分号 " ; "

5.注意单词有没有拼写错误

语法二：@语法

@charset "UTF-8";

@import url(2.css);

@media (min-width: 100px) and (max-width: 200px) 
{   
语法一 
}

注意事项：

@charset 必须放在第一行

前两个 @ 语法必须以分号 ; 结尾

charset 是字符集的意思，但 UTF-8 是字符编码

charset指定的是文件编码

border调试法

步骤：

怀疑某个元素有问题，就给这个元素加 border。

border 没出现？说明选择器错了或者语法错了。

border 出现了？看看边界是否符合预期，bug 解决了才可以把 border 删掉。

记住 CSS 的 border 调试法 就相当于 JS 的 log 调试法。

查资料： MDN、CSS tricks

基本概念

  • 文档流 文档流即文档流动的方向。

  • inline（内联）元素，方向是从左到右，直到第一行排满才会另起一行，比如span元素。

内联元素一般不能包含块级元素

  • block（块级）元素，方向是从上到下，每一个都另起一行，比如div元素。

  • inline-block 也是从左到右。与inline元素的区别是，inline元素在边界会被分离，inline-block不会，会完整的转到第二行。

其实元素不分内联和块级

因为所有元素都是可以设置成内联或块级的。比如：

span{
  display:block;
   }

就把span设置成块级了。

之所以说（div是块级/span是内联）是因为浏览器默认他们是（块级/内联）元素。

所有元素都是可以通过 display:block/inline/inline-block 设置相应的属性。

用浏览器查看元素是内联还是块级

  • 宽度：

  • inline 元素宽度为内部 inline 元素的和，不能用 width 指定

  • block 元素默认自动计算宽度，可用 width 指定。不写宽度默认宽度是 width: auto 不是100%。永远不要写宽度是100%，容易出Bug。

  • inline-block 元素结合前两者特点，可用 width指定。

特点是：默认样式和inline一样，由内部元素数量决定宽度，但样式上和block一样可用width调节。

  • 高度：

  • inline元素高度由 line-height(行高) 间接确定（大部分时候是一样的，但是如果字体不一致，就只能间接决定，会有一些误差），跟 height 无关

  • block元素高度由内部文档流元素决定，可以设 height。

block元素比如<div>，<div>里面不写东西，高度为0。inline元素比如<span>就算里面不写东西也有高度，因为span的高度由行高（line-height)决定,block元素由内部文档流元素决定。

  • inline-block元素跟 block 类似，可以设置 height。

overflow溢出

当内容大于容器：

当内容的宽度或高度大于容器的宽度或高度，会溢出，可用 overflow 来设置是否显示滚动条

overflow:auto; 是灵活设置，内容超出会显示滚动条，不超出则不显示。

scroll 是永远显示滚动条（很丑。。每有auto好用）

hidden 是直接隐藏溢出部分

visible 是直接显示溢出部分

overflow 可以分为 overflow-x 和 overflow-y

脱离文档流

  • 哪些元素脱离文档流？

在要脱离文档流的元素里面加：

float:left; / right;

或者是

position: absolute; / fixed;

速打：pos:a +tab

  • 怎么让元素不脱离文档流？

不要用上面属性就不脱离了

脱离文档流后会对高度造成影响

盒模型

CSS盒模型分两种：一种是content-box，另一种是border-box。

content-box 内容盒 - 内容就是盒子的边界

border-box 边框盒 - 边框才是盒子的边界

二者区别是：

  • content-box宽度只包含content。高也一样

  • border-box宽度只包含border、padding、content。高也一样

    border-box更好用。

margin合并

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
      <div class="parent">
      <div class="child">第2个孩子</div>
      <div class="child">第2个孩子</div>
      <div class="child">第3个孩子</div>
      <div class="child">第4个孩子</div>
      <div class="child">第5个孩子</div>
      </div>
</body>
</html>

CSS:
.parent{
margin:15px 0;
background:red;
}
.child{
border:1px solid blue;
margin:30px 0;
}
body{
border:1px solid green;
}
  • 哪些情况margin会合并? parent(父)的margin会与child（子）合并

child与child之间的margin也会合并

简称：父子 margin 合并；兄弟 margin 合并

外边距（margin）合并只存在于上下边距合并，左右不存在，左右不合并。

  • 如何阻止合并？

  • 父子合并用 padding / border 挡住，在父元素上加padding/border-top即可阻止margin合并。

  • 父子合并用 overflow: hidden 挡住 在父元素上加overflow:hidden;

    overflow:hidden 速打：o:h +tab

  • 父子合并用 display: flex，不知道为什么

  • 兄弟合并是符合预期的

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

基本单位

  • 长度单位 px：像素

em：相对于自身 font-size 的倍数

rem：这个单位代表根元素（通常为 元素）的 font-size 大小。 当用在根元素的 font-size 上面时 ，它代表了它的初始值。

vw：视口的初始包含块的宽度的 1%。

vh：视口的初始包含块的高度的 1%。

  • 颜色

十六进制 #FF6600（淘宝色） 或者 #F60

RGBA 颜色 rgb(0,0,0) = rgb(红,绿,蓝）

或者 rgba(0,0,0,1)，1为调整透明度，0是透明，1是不透明，0-1之间可调整。

hsl 颜色 hsl(360,100%,100%) 三个属性分别是：色相、饱和度、亮度

  • 小技巧：速写嵌套版的标签

div>div>div>div> +tab生成四个嵌套的div

div可以替换成任何标签

margin的拓展用法

margin-top：用来设置元素的顶部外边距，也可以使用负值。这个属性对于不可替换的inline元素没有效果，比如<tt>、<span>。

margin-top:5%/10px/-10px/1em

同理，margin-bottom：是用来设置元素的底部外边距，允许设置负数值。

margin-right/left也一样。

设置最大宽度100px：max-width=100px;

设置最小宽度100px：min-width=100px;

同理，高度也是一样的。

avatar
文章
阅读
粉丝