2 篇博文 含有标签「css」

前言​

tailwindcss 使得不用离开 html 界面就可以完成 css coding。常见的样式多写几次自然就记住了，如果不会的，还可以查文档，但是遇到布局相关的 flex 和 grid，需要一定的知识。

flex​

在菜鸟教程的基础上，做一点总结。

基本组成，flex container 和 flex item。他们可以分别设置属性。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

所以想到 flex 布局，应该在脑海中想起的画面是：一个容器内有两条轴，一条横轴从左到右，一条竖轴从上到下。项目也是按上述顺序排列。

flex 容器的属性​

• flex-direction：决定主轴是哪一条及其方向
• flex-wrap：主轴空间不够时是否换行
• flex-flow：flex-direction 和 flex-flow 一起设置
• justify-content：主轴的对齐方式
• align-items：交叉轴的对齐方式
• align-content：align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

这里对 align-content 做出一点说明。所谓的多根轴线，是指在元素较多，形成换行后，每一行元素所在的轴，而不是指主轴和交叉轴：

如图，每一根红线都是一个轴。也就是说，align-content 定义了多行元素的整体对齐方式。作为对比，align-items 的对象是当行元素：

换句话说，多行元素用 align-content，单行元素用 align-items。

flex 项目属性​

去除掉不常用的 order，有五个属性：

• flex-grow：当有剩余空间时，项目放大比例
• flex-shrink：空间不足时，缩小比例
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）
• flex：上述三个属性的快捷设置
• align-self：对单个项目脱离 align-items 的对齐方式

关键是理解剩余空间。首先空间都是针对主轴来说的。

grid​

grid 适合设置多行多列的，目前我遇到的情况是，设置好几个列，还有列之间的间隔，然后确定实际的一个元素占几列，就可以完成绝大部分任务了。

flex 和 grid 的 tailwindcss 写法​

flex​

<div class="flex 主轴对齐 交叉轴对齐 元素间距">
    ...
</div>

grid​

<div class="max-w-7xl mx-auto(居中) grid grid-cols-n gap-n">
    <div class="col-span-x">
    ...
    </div>
    <div class="col-span-n-x">
    ...
    </div>
</div>

前言​

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