first commit

历届学生/zheng-yuqing/每天上课/2022-04-21/笔记.txt

@@ -0,0 +1,107 @@
+css 层叠样式表
+
+    美化html（网站）的
+
+
+写法，三种写法：
+
+   内联写法  优先级最高
+   <p style="color: red;">你好</p>
+
+   内部写法
+
+   外链写法
+
+改变优先级：!important
+
+css选择器 {
+    css属性名: css值;
+}
+
+
+css选择器: 
+
+  标签选择器
+
+  class（.） 选择器
+
+  id（#） 选择器  基本不用
+
+  ，表示多选
+  空格 表格嵌套（父子）关系
+  > 选择父元素内部最近的子元素
+  + 选择同级
+
+  通配符选择器 （*）  选中网页上所有标签（body）
+
+    用途：清除浏览器标签自带的样式
+
+  伪类选择器：
+
+    :hover  
+
+
+
+盒子模型：内边距（padding） 外边距（margin） 内容（content） 边框（border）
+
+  什么叫盒子模型？
+
+  宽度计算规则：
+
+    标准盒子模型：
+
+      元素的真实宽高 =  你的写的宽度 + 左右内边距和左右边框 x 你的写的高度 + 上下内边距和上下边框
+
+    怪异盒子模型（IE）
+      box-sizing: border-box;
+
+
+            /* margin: 20px;  四个方向的距离  上 右 下 左 */
+            /* margin: 20px 30px;  上下  左右 */
+            /* margin: 10px 20px 30px;  上  左右  下 */
+            /* margin: 5px 10px 15px 20px;  上 右 下 左 */
+
+            /* margin-top: 30px;
+            margin-right: 30px;
+            margin-bottom: 30px;
+            margin-left: 30px; */
+
+            padding-left: 30px;
+            padding-top: 20px;
+
+            /* border: 13px solid #161616; */
+
+            /* border-left: 13px solid blue; 
+            border-right: 13px solid #161616; 
+            border-top: 13px solid green; 
+            border-bottom: 13px solid yellow;  */
+
+            /* border-left-width: 13px;
+            border-left-style: solid;
+            border-left-color: aquamarine; */
+
+
+
+css 属性记录：
+
+  text-decoration  设置文字的线条，一般用在a上
+
+  line-height 设置行高，一般用于 块标签内部单行文字的垂直居中
+  text-align  设置x轴对齐方式 ，一般用于 块标签内部文字的对齐方式
+  margin: 0 auto: 一个块标签在另外一个块标签中居中
+
+  vertical-align 设置y轴对齐方式，一般设置在高度较高的元素上
+  cursor  设置光标的外观
+  outline: none;  输入框（input button textarea）
+  display  主要作用是：实现块标签和行标签的转换，次要作用：实现元素显示(block)隐藏(none)
+
+    inline 行
+
+    block 块
+
+    inline-block  行内块标签
+
+    none 把元素隐藏起来
+
+    元素被设置 inline-block 后，标签之间会有一个默认的边距，这个边距需要在父元素上设置font-size 0 
+    来消除