first commit

历届学生/周阳/每日课程/2021-04-15/css笔记.txt

@@ -0,0 +1,81 @@
+选择器
+
+选择器类型 {
+    css属性名:  css属性值;
+}
+
+  标签选择器
+
+  通配符 *
+  重置标签的默认样式
+
+  class选择器
+  .名字
+
+
+  id选择器
+  #名字 
+
+  一般用在js上
+  id="login"
+
+
+  伪类选择器
+
+
+  定位：position
+  作用：实现各种复杂布局的
+
+    1：相对定位 relative
+       如果元素被设置了相对定位，
+
+       那么它会脱离文档流，
+       但原本位置不会被删除
+       他的定位参考对象是原本的位置(左上角)
+
+    2：绝对定位 absolute
+
+       那么它会脱离文档流，
+       原本位置被删除了
+       他的定位参考对象是原本的位置 
+         1: 如果该元素的父容器设置了定位，那么参考父容器来定位
+         2: 如果该元素的父容器没有设置定位，那么参考浏览器边框定位
+
+    3：固定定位  fixed
+        那么它会脱离文档流，
+        原本位置被删除了
+        参考浏览器边框定位
+
+
+    4：普通定位（流式定位）
+
+
+两种方案让元素横着排列：
+
+1:
+display: inline-block;
+         inline
+         block
+
+2: float 浮动        
+
+
+盒子模型：
+
+margin（外边距） padding（内边距） border（边框） content（内容）
+
+padding: 10px;
+padding: 10px 20px;
+padding: 5px 30px 20px;
+padding: 10px 20px 30px 40px;
+
+padding-left: 10px;
+padding-right: 10px;
+padding-top: 10px;
+padding-bottom: 10px;
+
+真实宽高 = content 宽高 + padding（内边距）+ border（边框）
+
+
+box-sizing: border-box;
+200x200 = content 宽高 +  padding（内边距）+ border（边框）