first commit

历届学生/吴欣阳/每天课程/2021-05-27/笔记.txt

@@ -0,0 +1,110 @@
+css 做美化的（层叠样式表）
+
+写css三种方式：
+
+1：内联写法
+
+2: 内部写法
+
+css 选择器：
+
+  标签选择器 
+  作用：一般用于清除标签的默认样式
+
+  
+  class选择器  .
+  class="名字"
+
+  id选择器（不常用）     #
+  id="名字"
+
+  区别：
+    1：id使用的时候不要出现重复，全局只有一次
+
+  *（通配符）选择器
+  作用：一般用于清除标签的默认样式
+
+  伪类选择器
+  hover
+  before after 用于绘制图标，1像素的线条
+  :first-child
+  :last-child
+  :nth-child
+
+
+  选择器 可以合写
+
+  空格 表示嵌套关系
+  + 表示同级关系
+  > 表示嵌套关系
+
+
+  css 优先级
+
+3：外链 
+
+
+盒子模型
+
+margin 外边距
+
+padding 内边距
+
+border 边框
+
+content 内容
+
+盒子模型的宽高计算规则：
+
+实际宽高（肉眼看到的） =  你设置的content  宽高 + padding 和 border
+
+box-sizing: border-box;
+
+改变盒子模型的计算规则：
+
+你设置的content  宽高 = padding 和 border + content （适当减小）
+
+
+浮动
+
+目的：让块元素排在一行
+
+float: left, right
+
+清除浮动
+clear: both;
+
+父元素高度怎么来的？
+
+1：大部分情况下是被子元素撑开
+2：你自己设置的height
+
+问题：
+
+如果父元素中的子元素设置了浮动，那么父元素将没有高度 0
+
+如何解决：
+
+1：手写高度 height  父元素
+2：清除浮动 clear: both; 父元素 下面的那个元素
+3：overflow: hidden; 父元素
+
+
+display：实现块标签和行标签的相互转换
+inline 转换为行  可以放在一行，不能设置宽高
+block  转换为块  不可以放在一行，可以设置宽高
+inline-block  转换行内块标签   可以放在一行，可以设置宽高
+
+font-size: 0
+
+
+水平居中：
+text-align 块div中内容的对齐方式
+padding-top
+margin: 0 auto;  让块div在其他div中居中
+
+垂直对齐：
+line-height 设置单行文字的垂直对齐（数值应该是当前元素的高度）
+padding-top
+
+