From 01206d3ebfb67e83a8e7e516e5d8deaf20edd2da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=91=E9=9B=A8=E8=89=AF?= <14091846+xiaobayei@user.noreply.gitee.com> Date: Sun, 20 Oct 2024 13:38:02 +0000 Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 郑雨良 <> --- ...73\351\200\211\346\213\251\345\231\250.md" | 246 +++++++++++++ .../20241016\345\261\202\345\217\240.md" | 299 ++++++++++++++++ .../20241017\346\265\256\345\212\250.md" | 337 ++++++++++++++++++ 3 files changed, 882 insertions(+) create mode 100644 "\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241014\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" create mode 100644 "\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241016\345\261\202\345\217\240.md" create mode 100644 "\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241017\346\265\256\345\212\250.md" diff --git "a/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241014\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241014\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 00000000..925b431c --- /dev/null +++ "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241014\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,246 @@ +# 笔记 + +### a标签有以下四种伪类 +- `:link` “链接”：超链接点击之前 +- `:visited` “访问过的”：链接被访问过之后 +- `:hover` “悬停”：鼠标放到标签上的时候 +- `:active` “激活”： 鼠标点击标签，但是不松手时。 +css ++ 去掉小圆点: +`list-style: none;` ++ 让内容水平居中： +`text-align: center;` ++ 去边框: +`outline:none` + + +### 伪类： ++ `fast-child`：父类的第一个子类 ++ `last-child`：父类的最后一个子类 ++ `nth-child(n)`:第几个，2n就是偶数个2n-1就是奇数个 + +# 作业 +**21-32题目** +```html + + + + Document + + + +
+ + + + + 5 + +
+ + +
+ 1 + + 2 + + + 3 + + 4 + 5 + + + 6 + +
+ +
+ + 1 + 2 + + + 3 + + + 4 + +
+ + +
+ 1 + 1 + 3 + 4 + 5 + 5 +
+ +
+ + + + + + +
+ +
+ + + + + + + + + + + +
+ +
+ + + + + + + + + + + +
+ +
+ + + + + + + + + + +
+ +
+ + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + + + + +
+ +``` diff --git "a/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241016\345\261\202\345\217\240.md" "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241016\345\261\202\345\217\240.md" new file mode 100644 index 00000000..533c67d8 --- /dev/null +++ "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241016\345\261\202\345\217\240.md" @@ -0,0 +1,299 @@ +# 笔记 + +## 层叠和继承性 +### 层叠性 +主要内容 +- CSS的继承性 +- CSS的层叠性 + - 计算权重 + - 权重问题大总结 + - CSS样式表的冲突的总结 +- 权重问题深入 + - 同一个标签，携带了多个类名 + - !important标记 + +1. 继承性 + +- 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。 +- 关于盒子、定位、布局的属性，都不能继承。 + +2. 层叠性(就是处理冲突的问题) +- id 选择器 +- 类选择器、属性选择器、伪类选择器 +- 标签选择器、伪元素选择器 + +**选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器** + +- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。 +- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。 + +### CSS样式表的冲突的总结 + +- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） +- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器 +- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器 + +> 总结：就近原则。ID选择器优先级最大。 + + +### !important标记：优先级最高 + + +**（1）!important提升的是一个属性，而不是一个选择器** +**（2）!important无法提升继承的权重，该是0还是0** +**(3)!important不影响就近原则** + +## 盒子模型 + +### 盒子中的区域 +- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。 +- padding：内边距。 +- border：边框。 +- margin：外边距。 + +**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。 + ++ 举例2：利用 border 属性画一个三角形（更推荐的技巧） + +上面的例子1中，画出来的是直角三角形，可如果我想画等边三角形，要怎么做呢？ + +完整代码如下：（用 css 画等边三角形） + +```css +.div1{ + width: 0; + height: 0; + border-top: 30px solid red; + /* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */ + border-left: 20px solid transparent; + border-right: 20px solid transparent; +} + +``` ++ 我们在上方代码的基础之上，再加一个 `border-radus: 20px;` 就能画出一个扇形。 + +# 作业 +1. 题1，文字“中华人民共和国”是何种颜色？ 蓝色 +```html + + + +
+
+
+

中华人民共和国

+
+
+
+ +``` +2. 题2，文字“中华人民共和国”是何种颜色？ 红色 +```html + + + + +
+

+ + 中华人民共和国 + +

+
+ +``` +3. 题3，文字“中华人民共和国”是何种颜色？ 点是蓝色,文字是绿色 +```html + + + +
+ +
+ + +``` +4. 文字“中华人民共和国”是何种颜色？ 绿色 +```html + + + +
+
+
+

中华人民共和国

+
+
+
+ + +``` +5. 文字“中华人民共和国”是何种颜色？（面试题） 蓝色 +```html + +
+

+ 中华人民共和国 +

+
+ + + +``` +6. 蓝色 +```html + + +
+

+ 中华人民共和国 +

+
+``` +7. 黄色 +```html +
+
+
+ 中华人民共和国 +
+
+
+ + +``` + +## 盒子模型作业 + +1. 说出下面盒子的真实占用的宽高，并画出盒子模型图 +width:242px; +height-top:212px; +height-bottom:232px; +```css + + div{ + width: 200px; + height: 200px; + padding: 10px 20px 30px; + padding-right: 40px; + border: 1px solid #000; + } +``` + +2. 说出下面盒子的真实占用的宽高，并画出盒子模型图 +盒子总宽度:302px; +总高度:272px; + +```css + div { + width: 200px; + height: 200px; + padding-left: 10px;//被覆盖 + padding-right: 20px;//被覆盖 + padding: 40px 50px 60px; + padding-bottom: 30px; + border: 1px solid #000;} + +``` +3. 有如下盒子模型图，请写出代码，尝试用最简单的方式 +```css + div{ +width: 123px; +height:123px; +padding: 20px 40px; +border: 1px solid black; + } +``` +4. 有如下盒子模型图，请写出代码，尝试用最简单的方式 +```css + div{ +width: 123px; +height:123px; +padding: 20px 40px 20px 20px; +border: 1px solid black; + } +``` diff --git "a/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241017\346\265\256\345\212\250.md" "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241017\346\265\256\345\212\250.md" new file mode 100644 index 00000000..e1b48e2c --- /dev/null +++ "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241017\346\265\256\345\212\250.md" @@ -0,0 +1,337 @@ +# 浮动笔记 + + +### 标准文档流的特性 + +**（1）空白折叠现象：** +无论多少个空格、换行、tab，都会折叠为一个空格。 + +**（2）高矮不齐，底边对齐：** + +**（3）自动换行，一行写不满，换行写。** + + +### 行内元素和块级元素 +**行内元素和块级元素的区别：**（非常重要） + +行内元素： + +- 与其他行内元素并排； +- 不能设置宽、高。默认的宽度，就是文字的宽度。 + +块级元素： + +- 霸占一行，不能与其他任何元素并列； +- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。 + +**行内元素和块级元素的分类：** +- 文本级标签：p、span、a、b、i、u、em。 +- 容器级标签：div、h系列、li、dt、dd。 + +### 行内元素和块级元素的相互转换 + +我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。 + +#### 块级元素可以转换为行内元素： + +一旦，给一个块级元素（比如div）设置： + +``` +display: inline; +``` + +那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说： + +- 此时这个div不能设置宽度、高度； +- 此时这个div可以和别人并排了。 + +#### 行内元素转换为块级元素： + +同样的道理，一旦给一个行内元素（比如span）设置： + +``` +display: block; +``` + +那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说： + +- 此时这个span能够设置宽度、高度 +- 此时这个span必须霸占一行了，别人无法和他并排 +- 如果不设置宽度，将撑满父亲 + +css中一共有三种手段，使一个元素脱离标准文档流： + +- （1）浮动 +- （2）绝对定位 +- （3）固定定位 + +### 性质1：浮动的元素脱标 +**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**所有标签，浮动之后，已经不区分行内、块级了。 + +### 性质2：浮动的元素互相贴靠 +我们给三个div均设置了`float: left;`属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠 + +### 性质3：浮动的元素有“字围”效果 + +**div挡住了p，但不会挡住p中的文字**，形成“字围”效果。 + +总结：**标准流中的文字不会被浮动的盒子遮挡住**。（文字就像水一样） + +关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：**永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。** + +### 性质4：收缩 + +收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。 + +# 作业1 +1. 效果图：![20241017210843](sjmmt3y4s.hn-bkt.clouddn.com/20241017210843.png)![alt text](图床、/盒子模型1题.png) +```css + +``` +```html + + +
+ +
+ +
+ +
+ +
+ +
+
+
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+
+
+ + +
+
+ + +``` + +2. 第二题 +效果图：![20241017212431](sjmmt3y4s.hn-bkt.clouddn.com/20241017212431.png)![alt text](图片/浮动2.png) +```css + +``` + +```html + +
+ +
+ | + 通知公告 + 更多>> +
+ +
+ +
+
哈哈哈哈哈哈哈哈哈哈 2014年9月28日
+
哈哈哈哈哈哈哈哈哈哈 2014年9月28日
+
哈哈哈哈哈哈哈哈哈哈 2014年9月28日
+ +
+ + +
+ +``` \ No newline at end of file -- Gitee