From d6a7f8af8bfab1a16fac399aa6adcee14765ce55 Mon Sep 17 00:00:00 2001 From: queyongzhen <14089735+queyongzhen@user.noreply.gitee.com> Date: Sun, 20 Oct 2024 20:54:58 +0800 Subject: [PATCH] =?UTF-8?q?10.18=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...2\345\255\220\346\250\241\345\236\213).md" | 79 ++++ .../20241016(\346\265\256\345\212\250).md" | 336 ++++++++++++++++++ ...2\344\275\215\345\261\236\346\200\247).md" | 291 +++++++++++++++ .../image/1\345\261\205\344\270\255.png" | Bin 0 -> 51384 bytes ...2\345\257\274\350\210\252\346\235\241.gif" | Bin 0 -> 565830 bytes ...4\346\265\256\344\277\241\346\201\257.gif" | Bin 0 -> 43367 bytes ...6\346\240\207\346\225\210\346\236\234.png" | Bin 0 -> 23664 bytes ...5\347\224\265\345\275\261\351\231\242.png" | Bin 0 -> 558322 bytes .../image/kx.jpg" | Bin 0 -> 207881 bytes ...6\345\212\250\344\275\234\344\270\232.png" | Bin 0 -> 12486 bytes ...2\347\237\245\345\205\254\345\221\212.png" | Bin 0 -> 34795 bytes ...orizontal&p\346\240\207\347\255\276).html" | 0 ...344\270\255)\344\275\234\344\270\232.html" | 0 ...345\257\274\350\210\252\346\240\217).html" | 0 14 files changed, 706 insertions(+) create mode 100644 "\351\230\231\346\263\263\347\217\215/20241014(\347\233\222\345\255\220\346\250\241\345\236\213).md" create mode 100644 "\351\230\231\346\263\263\347\217\215/20241016(\346\265\256\345\212\250).md" create mode 100644 "\351\230\231\346\263\263\347\217\215/20241018(\345\256\232\344\275\215\345\261\236\346\200\247).md" create mode 100644 "\351\230\231\346\263\263\347\217\215/image/1\345\261\205\344\270\255.png" create mode 100644 "\351\230\231\346\263\263\347\217\215/image/2\345\233\272\345\256\232\345\257\274\350\210\252\346\235\241.gif" create mode 100644 "\351\230\231\346\263\263\347\217\215/image/3\346\202\254\346\265\256\344\277\241\346\201\257.gif" create mode 100644 "\351\230\231\346\263\263\347\217\215/image/4\345\233\276\346\240\207\346\225\210\346\236\234.png" create mode 100644 "\351\230\231\346\263\263\347\217\215/image/5\347\224\265\345\275\261\351\231\242.png" create mode 100644 "\351\230\231\346\263\263\347\217\215/image/kx.jpg" create mode 100644 "\351\230\231\346\263\263\347\217\215/image/\346\265\256\345\212\250\344\275\234\344\270\232.png" create mode 100644 "\351\230\231\346\263\263\347\217\215/image/\351\200\232\347\237\245\345\205\254\345\221\212.png" rename "\351\230\231\346\263\263\347\217\215/HTML\344\275\234\344\270\232/20240911(horizontal&p\346\240\207\347\255\276).html" => "\351\230\231\346\263\263\347\217\215/\344\275\234\344\270\232/20240911(horizontal&p\346\240\207\347\255\276).html" (100%) rename "\351\230\231\346\263\263\347\217\215/HTML\344\275\234\344\270\232/20240913(\345\233\276\347\211\207\345\261\205\344\270\255)\344\275\234\344\270\232.html" => "\351\230\231\346\263\263\347\217\215/\344\275\234\344\270\232/20240913(\345\233\276\347\211\207\345\261\205\344\270\255)\344\275\234\344\270\232.html" (100%) rename "\351\230\231\346\263\263\347\217\215/HTML\344\275\234\344\270\232/20240914(iPhone\345\257\274\350\210\252\346\240\217).html" => "\351\230\231\346\263\263\347\217\215/\344\275\234\344\270\232/20240914(iPhone\345\257\274\350\210\252\346\240\217).html" (100%) diff --git "a/\351\230\231\346\263\263\347\217\215/20241014(\347\233\222\345\255\220\346\250\241\345\236\213).md" "b/\351\230\231\346\263\263\347\217\215/20241014(\347\233\222\345\255\220\346\250\241\345\236\213).md" new file mode 100644 index 0000000..9f56379 --- /dev/null +++ "b/\351\230\231\346\263\263\347\217\215/20241014(\347\233\222\345\255\220\346\250\241\345\236\213).md" @@ -0,0 +1,79 @@ +# 盒子模型 +>盒子模型,英文即box model。无论是div、span、还是a都是盒子。 + + +## 盒子中的区域 +>一个盒子的主要属性是:width和height(内容的宽高度), padding(内边距), margin(外边距), border。 +**注意:宽度盒真实占有宽度不是一个概念** + + +## 标准盒模型盒IE盒模型 +CSS盒模型和IE盒模型的区别: +- `在 **标准盒子模型**中,**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。` + +- `**IE盒子模型**中,**width 和 height 指的是内容区域+border+padding**的宽度和高度。` + + +## `
`标签也有margin +>整个页面最大的盒子是嗯哼这是提示信息!
+``` + + +## 4.使用提供的素材,利用精灵图技术实现如下效果 + +代码: +```html +div { + width: 16px; + height: 21px; + background-image: url(./4图标.png); + background-size: 43px 40px; + float: left; + } + + li { + list-style-type: none; + } + + .payment { + background-position: 2px 2px; + } + + .saving { + background-position: -13px 2px; + } + + .delete { + background-position: 1px -18px; + } + + .affix { + background-position: -13px -18px; + } + + .smile { + background-position: -27px 2px; + } + + .edit { + background-position: -27px -18px; + } +``` + + +## 5.使用提供的素材,实现如下效果 + +代码: +```html + + +【海雅缤纷城】 万达影城 ( 深圳海雅广场...
+单人电影票,可观看2D
+ ¥ + 35 + ¥80 + 已售 + 225 +o-+3x20Xm;Q*SqgVkX7xNY=
zi4V?JwaV%T#tw7Chn(6E_6UR83D0S9`dalP)F%BuD4{mC;5h
z5%OnrYvI&EA)hQXb@-3&%2i=r(smyB+fmgnA3n|}=de+O!?b8uk?Nm7M29I8Kt5lx
z>+l-TVwEnNi%r6%$$*KP=&s{7ipTW=`cmaOR-Xge57u@5Ad8F3X=&s|beyY-nF-;#
z7VL7=eYOb%y)lJj5>}T^6m~%bg9^3VQ(oY>BrsxbMWF`a+3&|T`lwjdGbi=H25?U~
z(N5yn)q#-?#i)hdcZM-m31G$aqtd^hRK+