CSS 快速上手

HTML / CSS HTML / CSS 55 人阅读 | 0 人回复 | 2021-01-14

前端入门系列视频教程:
本文适合 CSS 零基础同学阅读


CSS 并不是一门编程语言,由于它的无逻辑性,反而让一些习惯了后端语言编程的同学抓耳挠腮,无所适从,本文就抓大放小,快速的上手一下 CSS


1、盒子

CSS 的主要作用是布局,在CSS中,每一个 HTML 元素都是一个方块,页面的布局即是这些方块由左至右,由上到下排列而成
这些方块,我们称之为盒子,盒子由内至外依次是:内容,内边距,边框,外边距
CSS 快速上手-1.jpg
CSS 盒子模型
首先尝试把这几个名词,和图中的英文单词对应起来,留个初步印象
    内容(width, height)内边距( padding)边框( border)外边距( margin)
我们可以通过修改这些属性的值,来调整元素的大小,盒子模型是 CSS 基础中的基础,需要牢记在心。


2、display

display 的字面意思是显示,它的作用是用来定义元素的默认显示方式,例如 HTML 的元素分为两类:
    块级元素:div p ul li行内元素:a span input
所谓块级元素,就是横向占满一行,比如你有两个 div,那么一定是上下排列,因为第一个 div 占满了一行,第二个 div 自然就被挤到下一行去了,块级元素天生自带了display: block 的属性
CSS 快速上手-2.jpg
CSS 块级元素


而行内元素,它的默认大小则是由内容撑开,内容有多少,它就占多大的地方,行内元素天生自带了display: inline的属性
CSS 快速上手-3.jpg
CSS 行内元素


你可能会发现,诶,不对啊,明明高度都是100,为啥行内元素绿的不够高呢。CSS 在初始设计时候留的小坑(我觉得纯粹是个bug):行内元素不能调整宽高。所以为了弥补这个缺陷,他们又准备了一个display: inline-block的属性,叫做行内块级元素,行为和行内元素一样,不过可以调整宽高
CSS 快速上手-4.jpg
CSS 行内块级元素
这样终于够绿了


最后还有个display: none 的属性,被赋予这个属性的元素,相当于被从页面里删除了


3、选择器

看客老爷们可能要问了,你说了这么多,我又不知道怎么写,感觉很虚啊。那么我要贴代码了
<html>
  <head>
    <style>
      /* 标签选择器 */
      span {
        display: inline-block;
        height: 100px;
        font-size: 36px; /* 字体大小 */
        color: white; /* 字体颜色 */
      }
      /* 类选择器 */
      .blue {
        background-color: #0080ff; /* 背景颜色 */
      }
      .green {
        background-color: #009a61;
      }
    </style>
  </head>
  <body>
    <span class="blue">我是高度100的蓝色span</span>
    <span class="green">我是高度100的绿色span</span>
  </body>
</html>这是上面inline-block示例的代码,从这里你可以看到 CSS 是怎么写的,重点关注一下样式是如何被加到元素身上的。
选择器就是找元素的意思,码农界经常会起一些很吓人的名字,比如持久化啊(存本地),鲁棒性啊(够健壮),云计算啊(我帮你算),选择器啊(找元素)


上面的代码中主要用到了两种选择器(两种找元素的方法)
    标签选择器类选择器
所有命中的样式,都会被加到元素身上,所以第一个 span 运行时会具有:标签选择器span和 类选择器blue的样式


4、定位

我们现在可以定义元素的显示方式,盒子的大小,那么是时候布局一下它们的位置了,想想这种布局怎么做
CSS 快速上手-5.jpg
CSS 定位
正常的排列是从左到右,从上至下的,这种盖在其它元素上的,需要使用 CSS 定位,以改变元素正常的位置。定位使用position属性,它的值有三种:
    relative相对定位,相对于自身的位置absolute绝对定位,向上查找上级元素,第一个有position属性的元素(有点绕,待会细讲)fixed固定定位,相对于浏览器窗口


比如上面的例子,只要使用 相对定位,把绿球向左移动一定距离即可
.green {
    position: relative;
    left: -30px;
    background-color: #009a61;
}

那么如果我要把下图的橙色方块,移到蓝色方块的左上角呢
CSS 快速上手-6.jpg
这种情况,相对定位就有点不好使了。因为真实的页面中,盒子大小往往随着内容变化,也就是说高宽是动态的。那么我们就无法确切的知道,橙色方块距离蓝色方块左上角的距离,也就无法使用相对定位。
这时候需要使用绝对定位,根据绝对定位的规则(向上查找上级元素,相对于第一个有position属性的元素定位),那么不仅要给橙色方块设置position属性,还需要给蓝色方块也设置position属性,伪代码如下:
.blue {
    position: relative; /* 只设置relative,不设置top,left,这样不改变自身位置 */
}
.orange {
    position: absolute;
    top: 0; /* 由于默认相对于左上角定位,故 top:0 的情况可省略不写 */
    left: 0; /* 由于默认相对于左上角定位,故 left:0 的情况可省略不写 */
}

<div class="blue">
    <div class="green">
        <div class="orange"></div>
    </div>
</div>

绝对定位position: fixed相对于浏览器窗口左上角定位,相对简单,略过不讲


5、结语

各位看官现在已经知道了选择器,display,盒子模型和定位,用这几种方法搭配使用,基本上可以搞定大部分的页面样式。
可能有些了解过 CSS 的同学会问:浮动呢?浮动不也是 CSS 基础之一吗?刚才说到行内元素不能设置宽高是 CSS 设计留下来的小坑,浮动则是 CSS 设计中留下来的巨坑。


实际上,由于 CSS 初期设计中坑挺多的,所以诞生了一门叫CSS Tricks的学问,意思就是:我不知道为什么要这么写,但你按我这么写样式就对了。所以我不打算讲浮动了,后面我会再开一篇 CSS进阶,讲一下 Flex布局(顺便讲一下动画),你应该就不再需要浮动了
如果觉得我写的不错,欢迎点赞评论分享
更多关于 CSS 和 JS 的文章:前端同学 - 文章索引
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号