理解css ｜ 青训营笔记

wexx
VIP.5 如鱼得水
87 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

字体

  1. 通用字体族: Serif 衬线体, Sans-Serif 无衬线体, Cursive 手写体, Fantasy, Monospace 等宽字体, 在设置通用字体族的时候加上通用字体族
  2. 由于英文字体里没有中文字体, 所以先声明英文字体再声明中文字体

选择器

  • id: #
  • class: .
  • 属性:[],^=,开头,$=,结尾
  • 伪类: :link : first-child last-child nth-child()

image.png

  • id> 类 > 标签选择器
  • 内联> 嵌入> 外部

image.png

段落

  • line-height letter-spaceing word-spacing

  • 缩进: text-indent

  • text-decoration: underline line-through overline

  • white-space:

    • nowrap: 不换行
    • pre:保留原格式
    • pre-wrap :一行内放不下换行
    • pre-line 合并空格

布局

overflow:(水平垂直都有效)

visible:可见 默认值

hidden:溢出部分不可见

scorll:任何时候都有滚动条

auto:溢出时才有滚动条

css表格:

display:table

给列元素设置display:table-cell,没有行元素,margin不会生效,使用border-spacing设置间隔

正的外边距会将容器的边缘往里推，而负的外边距则会将边缘往外拉

flex

水平的主轴和垂直的交叉轴

flex默认产生等高元素,flex的margin:auto会填充所有剩余空间实现某一个元素的靠右或者靠左

vertical-align声明只会影响行内元素或者table-cell元素

flex属性控制弹性子元素在主轴方向上的大小

  • order:定义项目排列顺序,数值越小月靠前,默认为0
  • align-self:项目单独的对齐方式,默认继承,值和align-items一样

flex属性是三个不同大小属性的简写：flex-grow、flex-shrink和flex-basis

  • 定义元素大小基准值,flex-basis属性可以设置为任意的width值，包括px、em、百分比,默认值0%。它的初始值是auto,另外两个元素决定缩放规则
  • 相同的flex-grow值将占用相同的剩余空间,整数值
  • flex-shrink决定溢出后收缩的比例
  • flex-direction:决定主轴方向
    • row:水平向右排列,默认值
    • row-reverse:水平向左排列
    • column:垂直向下排列

  • flex-wrap:决定一条轴线放不下如何换行

    • nowrap:不换行,默认值
    • wrap:向下换行
    • wrap-reverse:向上换行

  • justify-content:定义主轴上的对齐方式

    • flex-start:左对齐

    • flex-end:右对齐

    • center:居中

    • space-between:两端对齐,项目间隔相等

    • space-around:每个项目两侧的margin相等

      ​​

  • align-items:定义在交叉轴上的对齐方式,默认值stretch

    ​​

  • align-content:多根轴线的对齐方式,默认值

    ​​

grid-template-columns和grid-template-rows:使用fr定义每一行每一列的大小,可以用ps,em混用,使用repeat(times,content)

grid-gap:定义网格单元间的间距,两个值指定垂直和水平间距

grid-column和grid-row属性中用网格线的编号指定网格元素的位置,网格线从左上角以(1,1)开始

grid-row: 3 / 5让元素在水平方向上跨越3号网格线到5号网格线,使用span 1关键字表面占一格

命名网格线:

grid-template-columns:[left-start]2fr
	[left-end right-start]1fr
	[right-end]

不仅命名了网格线,还定义了left和right的区域

可以命名网格区域, .​ 号代表空一格

grid-template-areas:"top topright"
	"left . right"
	"left bottom bottom";

给元素设置grid-area指定区域

auto-fill表示自动填充,尽可能容纳更多

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

grid-auto-flow:row:先填充列再填充行,dense表示紧凑排列

​justify-items​属性设置单元格内容的水平位置（左中右），align-items​属性设置单元格内容的垂直位置（上中下）:start center end stretch

​place-items​属性是align-items​属性和justify-items​属性的合并简写形式。

​justify-content​属性是整个内容区域在容器里面的水平位置（左中右），align-content​属性是整个内容区域的垂直位置（上中下）。其余同上

还有用于项目自身的justify-self 属性，align-self 属性，place-self 属性

​grid-auto-columns​和grid-auto-rows​ 用于定义多余的网格的大小

position

position默认值static,不是默认值的就认为被定位

fixed:固定定位,设置的top,bottom等是相对于浏览器视口的距离

absolute:绝对定位,相对于最近的定位元素,使用relative作为absolute的父元素

text-indent:使文本移动

relative:相对于元素当前位置进行移动

z-index:对一组元素生效

sticky:元素会随着页面滚动，当到达屏幕的特定位置时，如果用户继续滚动，它就会“锁定”在这个位置

object-fill:fill 拉伸 contaier :适应 cover ;覆盖

avatar
文章
阅读
粉丝