css从0开始

前言

一直苦于 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 另开一个新坑。