From aaf1ed621580e5497fc1578b78c8a334267d555f Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 20 Oct 2024 18:52:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...41\345\236\213\350\257\246\350\247\243.md" | 107 +++++ ...24\342\200\224\345\256\232\344\275\215.md" | 434 ++++++++++++++++++ ...24\342\200\224\346\265\256\345\212\250.md" | 312 +++++++++++++ 3 files changed, 853 insertions(+) create mode 100644 "\345\221\250\346\227\255/20241014\342\200\224\342\200\224CSS\347\233\222\346\250\241\345\236\213\350\257\246\350\247\243.md" create mode 100644 "\345\221\250\346\227\255/20241018\342\200\224\342\200\224\345\256\232\344\275\215.md" create mode 100644 "\345\221\250\346\227\255/24241016\342\200\224\342\200\224\346\265\256\345\212\250.md" diff --git "a/\345\221\250\346\227\255/20241014\342\200\224\342\200\224CSS\347\233\222\346\250\241\345\236\213\350\257\246\350\247\243.md" "b/\345\221\250\346\227\255/20241014\342\200\224\342\200\224CSS\347\233\222\346\250\241\345\236\213\350\257\246\350\247\243.md" new file mode 100644 index 0000000..49e7317 --- /dev/null +++ "b/\345\221\250\346\227\255/20241014\342\200\224\342\200\224CSS\347\233\222\346\250\241\345\236\213\350\257\246\350\247\243.md" @@ -0,0 +1,107 @@ +## 盒子模型 + +### 盒子中的区域 + +一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： + +- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。 +- padding：内边距。 +- border：边框。 +- margin：外边距。 + +注意：**宽度和真实占有宽度，不是一个概念！** + +### 标准盒模型和IE盒模型 + +> 我们目前所学习的知识中，以标准盒子模型为准。 + +标准盒子模型： + +![](http://img.smyhvae.com/2015-10-03-css-27.jpg) + +IE盒子模型： + +![](http://img.smyhvae.com/2015-10-03-css-30.jpg) + +上图显示： + +在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： + +- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。 +- padding：内边距。 +- border：边框。 +- margin：外边距。 + +CSS盒模型和IE盒模型的区别： + +- 在 **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 + +- **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。 + + +注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分。 + + +### ``标签也有margin + +``标签有必要强调一下。很多人以为``标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是``，即浏览器。而``是``的儿子。浏览器给``默认的margin大小是8个像素，此时``占据了整个页面的一大部分区域，而不是全部区域。 + +**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。 + +## 认识padding + +### padding区域也有颜色 + +padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域。** + +### padding有四个方向 + +方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。 + +小属性的写法： + +```css + padding-top: 30px; + padding-right: 20px; + padding-bottom: 40px; + padding-left: 100px; +``` + +综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的） + +```css +padding:30px 20px 40px 100px; +``` + +如果写了四个值，则顺序为：上、右、下、左。 + +如果只写了三个值，则顺序为：上、右和左、下。 + +如果只写了两个值，则顺序为：上和下、左和右 + +## 认识border + +border就是边框。边框有三个要素：像素（粗细）、线型、颜色。 + +颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。 + +### border-style + +比较稳定的border-style就几个：solid、dashed、dotted。 + +### border拆分 + +border是一个大综合属性。比如说： + +```css +border:1px solid red; +``` + +就是把上下左右这四个方向的边框，都设置为 1px 宽度、线型实线、red颜色。 + +border属性是能够被拆开的，有两大种拆开的方式： + +- （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的） + +- （2）按方向拆开：border-top、border-right、border-bottom、border-left。 + diff --git "a/\345\221\250\346\227\255/20241018\342\200\224\342\200\224\345\256\232\344\275\215.md" "b/\345\221\250\346\227\255/20241018\342\200\224\342\200\224\345\256\232\344\275\215.md" new file mode 100644 index 0000000..cc627b6 --- /dev/null +++ "b/\345\221\250\346\227\255/20241018\342\200\224\342\200\224\345\256\232\344\275\215.md" @@ -0,0 +1,434 @@ +# 定位 +### CSS的定位属性，绝对定位、相对定位、固定定位。 + +## 相对定位 + +**相对定位**：让元素相对于自己原来的位置，进行位置调整 +``` + position: relative; + left: 50px; + top: 50px; +``` + +相对定位的举例： +```css + div{ + position: relative; + left: 50px; + width: 100px; + height: 100px; + background-color: black; + } +``` + + +### 相对定位不脱标 +**相对定位**：不脱标，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。 + +### 相对定位的用途 +- 微调元素 +- 做绝对定位的参考，子绝父相 + +### 相对定位的定位值 + +- `left`：盒子右移, `right`：盒子左移,`top`：盒子下,`bottom`：盒子上移 + + +## 绝对定位 + +**绝对定位**：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。 + +``` + position: absolute; /*绝对定位*/ + left: 10px; /*横坐标*/ + top/bottom: 20px; /*纵坐标*/ +``` + +### 绝对定位脱标 + +**绝对定位的盒子脱离了标准文档流。** + +- 绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要`display:block`就可以设置宽、高了。 + +### 绝对定位的参考点 + ++ 用**top描述**，参考点是**页面的左上角**，而不是浏览器的左上角： + ++ 用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。 + +### 以盒子为参考点 + +一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。 + + +### 让绝对定位中的盒子在父亲里居中 +```css + div { + width: 600px; + height: 60px; + position: absolute; + left: 50%; + top: 0; + margin-left: -300px; + } +``` + +公式： left:50%; margin-left:负的宽度的一半 + +## 作业1 + +``` + + + +
d1 +
d2
+
+ +``` + +### 效果图 + +1.png + +## 作业2 + +``` + + + +
8888
+
8881188888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+
88888888888888888888888888888888888888888888888888
+ + + +``` + +### 效果图 + +2.png + +## 作业3 + +``` + + + +
你来了啊，进来吧 +
我是隐藏在暗处的杀手
+ +
+``` + +### 效果图 + +3.png + +## 作业4 + +``` + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +``` + +### 效果图 + + +## 作业5 + +``` + + + +
+
+
+

广东深圳宝安区建安一路海雅缤纷城4楼

+
+ 【海雅缤纷城】 万达影城（深圳海雅广场...
+ 单人电影票，可观看2D +
+
+ ￥35 +
￥80
+
+
+ 已售225 +
+
+ +``` + +### 效果图 + +5.png \ No newline at end of file diff --git "a/\345\221\250\346\227\255/24241016\342\200\224\342\200\224\346\265\256\345\212\250.md" "b/\345\221\250\346\227\255/24241016\342\200\224\342\200\224\346\265\256\345\212\250.md" new file mode 100644 index 0000000..bc99b31 --- /dev/null +++ "b/\345\221\250\346\227\255/24241016\342\200\224\342\200\224\346\265\256\345\212\250.md" @@ -0,0 +1,312 @@ +# 标准文档流 + +## 特性 + +1，空白折叠现象，无论有多少个空格、换行、tab，都会折叠为一个空格 + +2，高矮不齐，底边对其 + +3，自动换行，一行写不满，换行写 + + + + 标签分为两种等级：行内元素、块级元素 + +### 两者区别： + +行内元素： + +1，可以与其他行内元素并排 + +2，不能设置宽高。默认宽度就是文字宽度 + +块级元素： + +1，霸占一行，不能与其他任何元素并列 + +2，能接受宽高，如果不设置宽高，那么宽度将默认变为父亲的100% + + 两者分类： + + + +## 相互转换 + +可以通过display属性进行相互转换 + +1，块级元素转换为行内元素 + +给块级元素设置 + +``` +display:inline; +``` + +那么标签将变为行内元素 + +2,行内元素转换为块级元素 + +给行内元素设置 + +``` +display:block; +``` + +标签将变为块级元素 + +如果要并排，并且要设置宽高，办法就是移民，脱离标准流 + +css中一共有三种手段，使得元素脱标： + ++ 浮动 + ++ 绝对定位 + ++ 固定定位 + +## 浮动 + +### 浮动的性质 + +如果给两个div增加一个浮动的形式，例如float:left;，那么两个元素并排了，并且两个元素都能够设置宽度、高度了 + +1,浮动的元素脱标 + + 一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。 + +2,浮动的元素相互贴靠 + +3,浮动的元素有“字围”效果 + +4,收缩 + +一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度 + +## 浮动的清除 + +清除浮动，指的是清除浮动与浮动之间的影响。 + ++ 给浮动元素的祖先元素价高度 + +如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。 + ++ clear:both; + +不写height，也把浮动清除了，也让浮动之间，互不影响，使用clear:both属性clear:both的意思就是：不允许左侧和右侧有浮动对象。但是这样，该元素所在的标签，margin属性失效 + ++ 隔墙法 + +外墙法 在这两个div中间用一个新的div隔开，然后给这个新的div设置 + ++ 内墙法 + +不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。 + ++ overflow:hidden; + +overflow:hidden;的本意是清除溢出到盒子外面的文字。 + +一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。 + +## 盒子居中margin:0 auto; +(1) 只有标准流的盒子，才能使用margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto; + +(2) 使用margin:0 auto;的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的width，那么它的width就是霸占整行，没有意义） + +(3) margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;` + + +# 作业 + +### 作业1 + +``` +*{ + margin: 0; + padding: 0; + } + .header{ + width: 970px; + height: 103px; + margin: 0 auto; + } + .header .logo{ + float: left; + width: 277px; + height: 103px; + background-color: red; + } + .header .language{ + float: right; + width: 137px; + height: 49px; + background-color: green; + margin-bottom: 8px; + } + .header .nav{ + float: right; + width: 679px; + height: 46px; + background-color: green; + } + + .content{ + width: 970px; + height: 435px; + margin: 0 auto; + margin-top: 10px; + } + .content .banner{ + float: left; + width: 310px; + height: 435px; + background-color: gold; + margin-right: 10px; + } + .content .rightPart{ + float: left; + width: 650px; + height: 435px; + } + .content .rightPart .main{ + width: 650px; + height: 400px; + margin-bottom: 10px; + } + .content .rightPart .links{ + width: 650px; + height: 25px; + background-color: blue; + } + .content .rightPart .main .news{ + float: left; + width: 450px; + height: 400px; + } + .content .rightPart .main .hotpic{ + float: left; + width: 190px; + height: 400px; + background-color: purple; + margin-left: 10px; + } + .content .rightPart .main .news .news1{ + width: 450px; + height: 240px; + background-color: skyblue; + margin-bottom: 10px; + } + .content .rightPart .main .news .news2{ + width: 450px; + height: 110px; + background-color: skyblue; + margin-bottom: 10px; + } + .content .rightPart .main .news .news3{ + width: 450px; + height: 30px; + background-color: skyblue; + } + .footer{ + width: 970px; + height: 35px; + background-color: pink; + margin: 0 auto; + margin-top: 10px; + } + + +``` + +### 效果图 + +屏幕截图 2024-10-20 182714.png + +## 作业2 + +``` + * { + margin: 0px; + padding: 0px; + } + .all { + width: 600px; + font: 16px "宋体"; + margin-left: 10px; + margin-top: 10px; + color: #144ea5; + } + a { + float: right; + } + .top { + line-height: 30px; + font-weight: bolder; + border-top: 1px dashed rgb(180, 178, 178); + padding-top: 5px; + } + .top div { + width: 4px; + height: 18px; + background-color: blue; + margin-top: 5px; + margin-right: 9px; + float: left; + } + .top a { + font-size: 12px; + color: #7169da; + } + .hr { + height: 5px; + width: 600px; + background-image: linear-gradient(to right, rgb(0, 217, 255), red); + } + ul { + margin-top: 10px; + } + li { + list-style-type: none; + border-bottom: 1px dashed rgb(180, 178, 178); + line-height: 25px; + font-size: 15px; + } + li a { + color: black; + font-size: 14px; + } + li div { + width: 0; + height: 0; + border-left: 5px solid #0e1532; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + float: left; + margin-top: 9px; + margin-right: 9px; + } + +
+
+
+ ikun网更多>> +
+
+ +
+ +``` + +### 效果图 + +屏幕截图 2024-10-20 183022.png + -- Gitee