深入理解CSS | 青训营笔记

表情吖
126 阅读4分钟

深入理解CSS | 青训营笔记

为什么要学习CSS

CSS (Cascading Style Sheets) 是一种用于为网页添加样式和布局的语言。学习 CSS 可以让你掌握如何控制网页的外观和排版，使网页更加美观、易读和易用。在网站开发、设计和维护中，CSS 是必不可少的一部分

CSS语法立意让网页内容与视觉呈现分离，一方面使得页面维护工作更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计，也对搜寻引擎更为友善，更容易搜寻到页面内容。

课程内容

  1. 基础知识
  2. 布局和定位
  3. 层叠上下文
  4. 变形、过渡、动画
  5. 响应式设计
  6. CSS生态相关

基础知识

  • Casading规则
  • 选择器
  • 继承
  • 值和单位
  • 盒模型

层叠优先级

  • 重要性：在CSS中，有一个特别的语法可以让一条规则*总*是优先于其他规则：!important。把它加在属性值的后面可以使这条声明有无比强大的力量

  • 专用性：专用性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。如上面所示的示例所示，元素选择器具有很低的专用性。类选择器具有更高的专用性，所以将战胜元素选择器。ID选择器有甚至更高的专用性, 所以将战胜类选择器. 战胜ID选择器的唯一方法使用！important。

  • 源代码次序：如果选择器具有相同的重要性与专用性，那么第三个因素将帮助决定哪一个规则获胜——后面的规则将战胜先前的规则

  • 选择器尽量少用id

  • 尽量不要用 !important

  • 自己的样式加载在引用库样式的后面

继承

CSS继承只有属性，没有方法

  • 无继承的属性
  • display
  • 文本属性
  • 盒子模型属性
  • 背景属性
  • 定位属性
  • 生成内容、轮廓样式、页面样式、声音样式属性
  • 可继承属性
    • 字体属性
    • 文本系列属性
    • 元素可见性
    • 表格布局属性
    • 列表布局属性
    • 生成内容属性
    • 光标属性
    • 页面样式属性
    • 声音样式属性
  • 所有元素可以继承的属性
    • 元素可见性 visibility
    • 光标属性 cursor
  • 内联元素可以继承的属性
    • 字体系列属性
    • 除text-indent、text-align之外的文本系列属性
  • 块级元素可以继承的属性
    • text-indent、text-align

CSS的值和单位

  • 选择器
    • 属性
    • 值
      • 文字类：比如像inital这种关键字、颜色、位置等
      • 数值类：比如z-index-1这种数值、或有单位的数值、百分比等
      • 函数生成：比如calc()、min()、max()等
    • 单位
      • 长度
        • 绝对长度：px、pt、cm、in...
        • 相对长度：em、rem、ex...
      • 时间
        • s、ms
      • 角度
        • deg、gard、tum、rad等
      • 分辨率
        • dpi、dpcm、dppx

盒模型

控制盒子类型display: block.inline、inline-block、flex.... 88945 控制盒子大小& 计算方式

width, height ...

box-sizing: content-box，border-box 控制盒中内容流 overflow: auto、scroll、hidden... 控制定位 position: static、relative 、abeolute 、fxed ，sticky 是否可见 visibility: visible、hidden .

  • 实现三角形

    • <div class="san"></div>
		<style>
			.san{
				width: 0;
				height: 0;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid red;
			}
		</style>

  • 实现固定比例矩形

    • <div class="ratio-box"></div>
		<style>
			.ratio-box{
				background-color: cadetblue;
				width: 100%;
				height: 0;
				padding: 0;
				padding-bottom: 75%;
			}
		</style>

  • 实现水平居中

    • .wrap{
			width: 100%;
			height: 80px;
			border: 1px dashed grey;
		}
		
		.h-center{
			width: 100px;
			height: 50px;
			background-color: navajowhite;
			margin: 10px auto;
		}
	</style>

  • 实现渐变边框

    • <div class="awesome-border"></div>
	
	<style>
		.awesome-border{
			width: 150px;
			height: 100px;
			border: 8px solid transparent;
			border-radius: 12px;
			background-clip: padding-box,border-box;
			background-origin: padding-box,border-box;
			background-image: 
			linear-gradient(to right,#fff,#fff),
			linear-gradient(135deg,#e941ab,#66ccff);
		}
	</style>

布局

  • 常规流
  • 弹性盒子
  • Grid
  • 定位

常规流布局

常规流又称为文档流，是页面布局规则之一，所有元素在默认情况下都是常规流布局，它的总体规则是块盒独占一行，行盒水平依次排列。在了解常规流布局前，需要引入一个概念，包含块。

  • 包含块 在绝大部分情况下，包含块指父类元素的内容盒content-box,每个盒子都有它的包含块，包含块决定了盒子之间的排列次序.
  • 块盒 块盒一般指子元素的整个盒子模型，块盒的总宽度必须刚好等于包含块的宽度。****

块盒的取值问题 块盒的宽度 块盒的宽度取值默认是auto,表示将剩余空间填充。例如包含块的宽度为1000px，而块盒的宽度未设定，则块盒的总宽度为1000px。 当没有设置宽度时，块盒宽度等于包含块宽度。 当设置宽度时，若块盒宽度不等于包含块宽度，则剩下空间由margin-right填充。 margin的默认值为0，可以设定为auto。可以在设定宽度后，将margin的左右值设定为auto实现块盒的居中。 包含块宽度（父类content-box宽度）= 块盒总宽度（块盒margin宽度+块盒border宽度+块盒padding宽度+块盒content宽度）

块盒的高度 块盒的高度适应于包含块的高度，若包含块没有设定高度，则块盒的高度随内容变化而变化，包含块高度=块盒高度（默认取值auto）

百分比取值 padding、margin的取值可以设定为百分比取值，但是它们所有百分比都相对于包含块的宽度

avatar
文章
阅读
粉丝