前言

一直苦于 css 的内容繁多,潜意识回避。但是对于初级前端岗位,重现页面是基本功。所以,决定花几天时间,重学 css。知乎上的回答建议将 css 分为选择器、样式、盒模型、定位四个部分。那么我就按这个路线学一遍,并记录自己容易出错的地方。

选择器

id,类自不必说。

  • 分组/后代/子元素区别
h1,
h2 {
} /*分组*/
h1 h2 {
} /*后代*/
h1 > h2 {
} /*子元素*/
  • 兄弟选择器
h1 + h2 {
} /*兄弟选择器有两种,这种是相邻兄弟选择器,只选择到了h2*/
h1 ~ h2 {
} /*通用兄弟选择器,选择h1所有的兄弟h2*/
  • 属性选择器
a[href] {
} /*模仿了其他语言对象属性的表达方式,选择有href属性的a标签*/
  • 伪类选择器
a:link {
} /*语法特点:单个冒号,后面表示标签的状态。常见的:p:first-child, nth-child(n)*/
  • 伪元素选择器
div::before{} /*指定元素的某一部分,一共5种伪元素选择器*/


选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。
  • 一个大坑
.class1.class2
  同时属于两类的元素
  .class1
  .class2
  属于class1的元素的后代里,属于class2的;
  • 总结
    没什么,背住!

样式

这部分一般面试不问,使用时查找即可。

  • background
    一种是颜色背景,一种是图片背景。后者需要设置一些属性,写法上应该都采取简写:
body {
  background: #ffffff url("tree.png") no-repeat right top;
}
  • text
    文本对齐
text-align:left\right\justify
vertical-align:top\middle\button
  • line-height 一张图说明

  • 一些坑

要实现文本的水平垂直居中对齐,可以分别设置

text-align: center;
line-height: //box height;;

盒模型

面试重点!应该牢牢掌握。

  • padding
    内边距,空白透明,只能设置长度。顺便记录一下非常重要的浏览器长度单位:
    可分为绝对单位和相对单位,
    绝对:

    • px. 最基础的
    • in\cm\mm 计算机中都会转成 px。

    相对:

    • em: 相对于父元素字体大小的倍数, 百分号也是基于父元素
    • rem: 相对于根节点 html(16px).rem 用的更多,因为它不需要层层换算。
    • vw/vh:基于可视区域,1vw=可视区宽度的 1%
  • border
    牵涉到上下左右的问题,出于简便的考虑,应该采用简写形式。

p {
  border: 5px solid red; /**如果要设置某一侧边框的样式,应该写border-left: xxxx */
}
  • margin
    margin 和 padding 书写方式很像,但是操蛋的是 auto。auto 表示自动计算应得的空间。所以可以实现居中操作。

定位

最复杂和让人蛋疼的部分。

  • position
    要想让元素移动,除了要设置 position, 还要设置 top\left 等数值

    position: relative/absolute/fixed;
    • relative
      相对于其原来位置移动,不脱离文档流

    • absolute
      相对于最近的有定位的祖先元素移动,脱离了文档流

    • 子绝父相:本质上是父元素不脱离文档流,而子元素可以在父元素内方便得改变位置

  • float

    float: left/right/none/inherit;

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

  • flexbox
    flex 比 float+position 组合好用多了。

先写到这里吧,flex 另开一个新坑。