理解css ｜ 青训营笔记

用户2943705757404
84 阅读6分钟

理解css

基础

层叠、优先级

三大规则：

1样式表来源

  • 用户代理样式 浏览器默认样式
  • 用户样式表 很少有
  • 作者样式表 developer写的
  • 作者样式表中的！important
  • 用户样式表中的！important
  • 用户代理样式表中的！important

2选择器优先级

基础选择器 #id一一lD选择器。Tagname一一类型选择器或者标签选择器。 .class一一类选择器。*一一通用选择器。该选择器匹配所有元素 组合器 子组合器(>) 一一匹配的目标元素是其他元素的直接后代。如：。parent>.child. 相邻兄弟组合器(+)一一匹配的目标元素紧跟在其他元素后面。如：p+h2. 通用兄弟组合器()一一匹配所有跟随在指定元素之后的兄弟元素，如：Ii.activeIi. 复合选择器多个基础选择器可以连起来使用，如：h1.page-header. 属性选择器 通过约束属性值，div[data-title=“aaa“] 伪类选择器 选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如：first-child,:hover 伪元素选择器 匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如h2::first--letter,div::before 逻辑选择器 较新的选择器：is（）:has():where():not()

优先级

内联>id >class= attribute= pseudo-class> type =pseudo-element

3源码位置

1对于@import的样式，根据@import的顺序 2对于link和style标签的样式，根据在document中的顺序决定

选择器尽量少用id 尽量不要用！important 自己的样式加载在引用库样式的后面

继承

  • 大部分具有继承特性的属性跟文本相关：

color、font、font-family、font-size、font-weight、font-variant、font- style、line-height、letter-.spacing、text-align、text-indent、text- transform、white-space以及word-spacing 还有少部分列表、表格的属性

  • 可以使用inherit关键字显式指定一个属性值从其父元素继承

css的值和单位

文字类：比如像initial这种关键字，颜色、位置等等 数值类：比如z-index:1这种数值，或者带有单位的数值、百分比等 函数生成：比如calc(),min(),max()等

长度：

绝对长度：px,pt,cm,in.…

相对长度：em,rem,ex,rex..w,vh,vmin,vmax.… 角度：deg,grad,turn,rad 时间：s,ms 分辨率：dpi,dpcm,dppx

盒模型

  • 控制盒子类型 display:block、inline、inline-block、flex、..
  • 控制盒子大小&计算方式 width,height... box-sizing:content-box border-box
  • 控制盒中内容流 overflow:auto、scroll、hidden、.
  • 控制定位 position:static、relative、absolute、fixed、sticky
  • 是否可见 visibility:visible、hidden、..

负外边距

padding、border、.margin中，只有margin可以设置负值

设置左边或顶部的负外边距，元素就会相应地向左或向上移动， 导致元素与它前面的元素重叠：

如果设置右边或者底部的负外边距，并不会移动元素， 而是将它后面的元素拉过来；

布局

常规流布局

外部显示类型(display-outside):规定了该盒子 如何与同一格式上下文中的其他元素一起显示。 内部显示类型(display-inside):规定了该盒子 内部的布局方式。比如display:flex;其外部显示 是block,参与BFC;display:inline-flex,则外 部显示是inline,参与lFC。他们内部的盒子都参 与弹性盒子布局。

块级格式化上下文

格式化上下文的布局规范为

“在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由 "margin“属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。 在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序， 则盒子的右外边缘与包含块右边缘重合）。”-9.4.1

那么，我们平时说的BFC是什么呢？ BFC本身是block formatting context的缩写，是一种格式规范。如果说一个盒子是BFC或 者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型 是什么，但是它的内部显示类型是low-root,其实就是这个盒子内部形成了一个新的块级 格式化上下文。 如何触发一个盒子的BFC特性？以下条件满足任何一个即可 display:flow-root I inline-block; position:absolute fixed; float:不为none; overflow:不为visible

外边距塌陷

  • 两个兄弟元素之间相邻的上下外边距

  • 父子元素之间相邻的上下外边距

  • 内容为空元素自己上下外边距相邻

  • 在两个相邻的上下边距之间增加porder、.padding?或者内联元素，使之不相邻；

  • 在父子元素重叠时，除了上述方法，还可以设置父元素为BFC使得父子不在同级BFC中

内联格式化上下文

“在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距 会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字 底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。（The rectangular area that contains the boxes that form a line is called a line box.)"-9.4.2

弹性盒子

Flexible Box Layout是为了提供更加高效灵活的布局方式，在 即便是宽高未知的情况下，也能排列和分割一个盒子内部的布 局。而且在不同布局方向(横向/纵向)的调整更为灵活。

网格布局

.grid-container{
	display:grid;
	grid-template-columns:100px 1fr;
	grid-template-rows:60px 6fr 1fr;
}

Grid和Flex布局的使用策略

  • Flex
  • 一维布局
  • 基于内容
  • 浏览器兼容性更好
  • Grid
  • 二维布局
  • 基于布局
  • 2017年后浏览器的版本普遍支持

1.大面积或整体布局推荐使用Grid布局 2.小面积或组件中，或Grid Item中可以使用Flex做灵活布局

定位

为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position.属性的取值非static的时候，可以使用top,right,.bottom,left对其进行定位。

  • relative

元素相对于自己原来在文档流中 的位置进行定位，但是原来文档 流的空间还在。

  • absolute

元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素的进行定位。

  • fixed

元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置

  • sticky

元素相对它的最近滚动祖先（祖先的overflow是scroll//hidden/auto)的视口(scroll port)定位

avatar
文章
阅读
粉丝