JAVA WEB开发基础:HTML 、CSS、 JavaScript。
注意:html、css、JavaScript是浏览器使用语言。
问:从浏览器上输入https://www.baidu.com/,然后浏览器呈现百度页面,中间到底经历了什么?
简单来说,可以理解为浏览器发送一个请求包,然后服务器(一台运行Java程序电脑)接收请求,分析请求,响应请求字符串、二进制数据,也就是Html/css/javascript/图片、视频、其他二进制数据。之后浏览器接收响应数据,根据响应的数据渲染页面和发送请求。
HTML:超文本标记语言
HTML5:HTML一门超文本标记语言,最新的第5代版本的语言的标准。2014发布。
![4419ba10da0509722a29d16991362dda.png](https://i-blog.csdnimg.cn/blog_migrate/ac635d6423c5644defa07d2d73720c7d.jpeg)
![4131c500c385819a404f0cbf1e124873.png](https://i-blog.csdnimg.cn/blog_migrate/357d5a2156517f879d39c951d0873f32.jpeg)
![3c3c89639e05c8af744e1dfc4407c7eb.png](https://i-blog.csdnimg.cn/blog_migrate/b327d476857c35ac6c67d3523dd8a9c8.jpeg)
常用的HTML标签:
![e0224e931fb3e770ad98a488a81f4798.png](https://i-blog.csdnimg.cn/blog_migrate/8eb1b77ac1bfd0b0d59199a0c8be294f.png)
![ac6100729b3bf51640de42d00a74adb9.png](https://i-blog.csdnimg.cn/blog_migrate/613765e3a20fe8da0946ee608d587c30.jpeg)
![1e60cc855adb09278be543063faa064f.png](https://i-blog.csdnimg.cn/blog_migrate/4e7ccb12b3a08387e9470099b0508416.png)
![eeb3e357e962f7ed842866a8384b201e.png](https://i-blog.csdnimg.cn/blog_migrate/809ee27b4a0639faf31771fb8b04c4e9.png)
![c02b02ae47f9cc4ddbf04e141249b62c.png](https://i-blog.csdnimg.cn/blog_migrate/a5b6eb85c99ee9b8c6b9617b6bc24b96.jpeg)
![d066805b9d431896eac42f354985f1cc.png](https://i-blog.csdnimg.cn/blog_migrate/184860974602036bf536373a1ffe83c1.png)
![0bbdf6be1365dd5850a37bfaa85d2ea7.png](https://i-blog.csdnimg.cn/blog_migrate/fafdf9cb66908d8e25476b5a00a591d6.jpeg)
![905c891d368c496c9bcf9d19c1590db8.png](https://i-blog.csdnimg.cn/blog_migrate/f1205130d586a2db8f4d6db81c7281b6.jpeg)
![3cdc63421c0f6d0ef5636cccb5dd1f96.png](https://i-blog.csdnimg.cn/blog_migrate/58300f8849ccb95315d202de2281c0e4.jpeg)
![43f1c29315318a93288131bc9d977cb9.png](https://i-blog.csdnimg.cn/blog_migrate/f98d499b2a468dab45ce04d391ed2566.png)
![d8ac226c501c0f4e5cf2af3f1ca5e5ed.png](https://i-blog.csdnimg.cn/blog_migrate/b8f25fb8a543b7ae417f0f23b4dad699.png)
![88dbd5348f871b1add4fb0242dcc4626.png](https://i-blog.csdnimg.cn/blog_migrate/1b2ace34e07b795ca1dc18a3a7fe6e1f.png)
表单标签:
![9300fda353cee93e1ff318d149c0dcfc.png](https://i-blog.csdnimg.cn/blog_migrate/07dbad8a43000c1466f15ff5fb9c15ac.jpeg)
![b50e7f3655fc00193bfbefe1e598defb.png](https://i-blog.csdnimg.cn/blog_migrate/5b74e766bb37ed0132bf7cf495b0249e.jpeg)
![b589317dd46c2fe9591cb6ba08ac0c9b.png](https://i-blog.csdnimg.cn/blog_migrate/25a6cf1bc8b32e60e269ec641de86fec.jpeg)
![759291d41c2a85bfbc574b36018b5d04.png](https://i-blog.csdnimg.cn/blog_migrate/9aec9a931600c936d509977e780c1553.jpeg)
![2230b52ac2bf9d8d10fae78643e0572f.png](https://i-blog.csdnimg.cn/blog_migrate/edf5385fb8bdceec872c44efeabaabc9.jpeg)
![d8929878456f912e8a24aa02a54555d7.png](https://i-blog.csdnimg.cn/blog_migrate/8ecc21ae4a017053ddc9639200e112d3.jpeg)
![6df5a95de4b0e712b63df179258bb1f0.png](https://i-blog.csdnimg.cn/blog_migrate/a9dbfe544074d1d79df64892aa83c892.jpeg)
![d71e7f18502ca79cd58341f304347813.png](https://i-blog.csdnimg.cn/blog_migrate/887d6c94c63ae335ab2853639484657d.jpeg)
![32c264888b2eaeba7ad93f65540de6d8.png](https://i-blog.csdnimg.cn/blog_migrate/dac8f2a52d9dfa75dc5de91aba73d034.jpeg)
![bf3c6d6ba982a8e4659abae8fbe07f0d.png](https://i-blog.csdnimg.cn/blog_migrate/d363e2d59cba8e67577d699d47f1f6b9.jpeg)
![842bfb10b5f9a3940b40dd6996b60ca5.png](https://i-blog.csdnimg.cn/blog_migrate/e30de9d399e4a43188ce24d2ab0553b2.jpeg)
![a3bc596c7524afb35257df092965e07f.png](https://i-blog.csdnimg.cn/blog_migrate/7cc050a5cc0d269487ea598f86830037.jpeg)
![f3aa0d71a7d420007b1c4c73041f2394.png](https://i-blog.csdnimg.cn/blog_migrate/73d29f4839fe210b0bb74d2996560858.jpeg)
![37a92e26afaca88fdcb7737f18b621e4.png](https://i-blog.csdnimg.cn/blog_migrate/74a872a272902fc71a2e8400ae86905c.jpeg)
![8bfd210e4f25e4f90c57e4ec7c36c772.png](https://i-blog.csdnimg.cn/blog_migrate/fd7ec48e167769a49c276bcd4eda681a.jpeg)
![2f2f2f54ea0195d9363fea56fba70308.png](https://i-blog.csdnimg.cn/blog_migrate/926697e873f627bc8e27e0b1082c1931.jpeg)
![d0062caa719599db6d0b107fc96df079.png](https://i-blog.csdnimg.cn/blog_migrate/1daadfc3accda8338b9c84eb0ad8bfd6.jpeg)
![029a6e97c07121b9351362be1354ce4d.png](https://i-blog.csdnimg.cn/blog_migrate/a7c8871ff0936813b2bf2d56633edc77.jpeg)
![69da5b59dc2ca5404a626034613ac49c.png](https://i-blog.csdnimg.cn/blog_migrate/878d9e98ad342ab9b739743bfb326b97.png)
![49f76705a643e1f9d3477e2c4cfaa490.png](https://i-blog.csdnimg.cn/blog_migrate/d07d7d978cadb9df68c48caec292f22b.jpeg)
![2ccbc5c859435bd866e3569bdf85e03f.png](https://i-blog.csdnimg.cn/blog_migrate/c88b73987d7dc1287af1c877627e9a6d.jpeg)
![217526e357bc6177b10c0dc6f786f98c.png](https://i-blog.csdnimg.cn/blog_migrate/c2645b7175b9643b9f77cd15a46d3f07.jpeg)
![058bbb2615b57cfcfe39e276b663d98e.png](https://i-blog.csdnimg.cn/blog_migrate/c877d3370a950576be036db8b5bb5b36.png)
背景属性
![d13a1fe1f993eaa47ea605fe1a5c904b.png](https://i-blog.csdnimg.cn/blog_migrate/22d765af4ccd86144789e7f7ddff7013.jpeg)
![259c4b886fb15486321b46fcc3d0f7f1.png](https://i-blog.csdnimg.cn/blog_migrate/8ef0be9f8c5eb11b060af61894effbd7.jpeg)
![2fe2c8c4bd257e7ed5d20ec72b59b327.png](https://i-blog.csdnimg.cn/blog_migrate/499435fd839a78b0bcb3c9224ca05657.png)
文字属性
![71871c29a86bf0ea2f39e03575738d05.png](https://i-blog.csdnimg.cn/blog_migrate/8a18f331bcb875e9f320ccbd1d9844ce.jpeg)
![9b838b2d95bef9c77fa8388bbf88e3a8.png](https://i-blog.csdnimg.cn/blog_migrate/a5a7f11b0c8ef35da8eb59bbed471702.jpeg)
![0b009fe1218f832a2b4b683ed0a94bf2.png](https://i-blog.csdnimg.cn/blog_migrate/c63bc4cae53ff6d044441ae78a5c3520.jpeg)
盒子模型
![f353b3d54bccdf3a886ff965d01ad450.png](https://i-blog.csdnimg.cn/blog_migrate/a85077a24b61984b674ae79d644198b6.jpeg)
![017ad5a7541b2bcbfc51ccdeb8bf33a8.png](https://i-blog.csdnimg.cn/blog_migrate/7cfbea8ff35a43b02393c0f8fd01b713.png)
![f1bea41cd825a38adc7d867f207260f2.png](https://i-blog.csdnimg.cn/blog_migrate/0c3dce93c5e8904dfdcd7255f3eab673.png)
浮动
![98a735a9a82b77ca8f9e8ebdee511e5b.png](https://i-blog.csdnimg.cn/blog_migrate/50f3cf37f84c3e505441d64edb8366e1.jpeg)
![68ef4a5c1f6f890d75b5e8962373ff50.png](https://i-blog.csdnimg.cn/blog_migrate/a2edefcdda980a7aed5266ec3aaf7bca.jpeg)
![70028838654738848c94784da1f8852a.png](https://i-blog.csdnimg.cn/blog_migrate/c37c971cc96205fbde0c9d01e6953405.jpeg)
弹性布局——目前最流行的方式
(2014年开始到现在,目前的网站基本都是这种方式)
在元素上设置了display:flex;的属性即为弹性容器。
![68a672156223b5cd248e11ff581d4b00.png](https://i-blog.csdnimg.cn/blog_migrate/ca93c732eb23c53d29968a9d1df45dbc.jpeg)
注意:弹性子元素为3个child的div元素,span不属于直接子元素,那么不是弹性布局。
弹性布局主轴:确定子元素的排布是水平排布还是竖直排布。侧轴为主轴的垂直方向。
设置主轴的方向:flex-direction,
row(默认值):子元素是从左到右进行排布。
Row-reverse: 子元素是从右到左排布
Column:子元素从上到下排布
Column-reverse:子元素从下到上排布。
注意:默认弹性子元素只会排成1行或者是1列。不会换行。
![71881e7ddbb0c9b31f41f2e2da599953.png](https://i-blog.csdnimg.cn/blog_migrate/f66a0e9a7d36c52ff34bec8809d5c2e3.jpeg)
flex-wrap: wrap;——换行
![fcf60ca5d0c3df7b4eb25d5d3b048084.png](https://i-blog.csdnimg.cn/blog_migrate/3925561181f016b15b05c31e9ec860e1.png)
align-content——设置侧轴的多行排布
![619efa9c71f1d5d878fc00a01715ca3e.png](https://i-blog.csdnimg.cn/blog_migrate/ccc9e7e33218c8c77659e3abf88b05c4.jpeg)
剩余空间占据flex
要求做一个网站,无论页面怎么缩小,广告都要占据一定位置,剩余空间留给其他内容显示。
![f8a48e949d2596705fbdc08d9a60be44.png](https://i-blog.csdnimg.cn/blog_migrate/05b174d8c6eb43c16a1e5434d938a1ec.png)
弹性子元素的排序
![ec276416c4942e044a2d07a8eb8cc8db.png](https://i-blog.csdnimg.cn/blog_migrate/27159b3048266481ef77f907637eb5e2.jpeg)
![09b261a1ddb3bca43cfe121cbc345072.png](https://i-blog.csdnimg.cn/blog_migrate/786c72c34f251a2c1c05a4478ea9457e.jpeg)
弹性子元素侧轴单独设置——align-self
![e8d47de0185b9e138931878b376b804c.png](https://i-blog.csdnimg.cn/blog_migrate/e11f16f0a2587ba47072a80ea99f6290.png)
![f1969055a770346cf54fbfb4b6682293.png](https://i-blog.csdnimg.cn/blog_migrate/d235d21c7fd3c981c8e6618082f7e898.jpeg)
定位
![2494b91bd45ffab48fd2671f9f61751b.png](https://i-blog.csdnimg.cn/blog_migrate/06945b04c9212780867366058b92ecd8.jpeg)
![21f8281dd6d123d0fbaf879df3d2d36f.png](https://i-blog.csdnimg.cn/blog_migrate/a18c2562ded7711b3c750b16a000754b.jpeg)
![0107812076dc34a3d5ed179ec58d0c80.png](https://i-blog.csdnimg.cn/blog_migrate/7c6f0c50053221702d7b33fc3f72ce02.jpeg)
![af174a613aab792f2b0a8cf41e993ae2.png](https://i-blog.csdnimg.cn/blog_migrate/bc8e5c812db3e7c60dc410a25fef03fd.jpeg)
![21f62732b29d9b85c9198687f054b36e.png](https://i-blog.csdnimg.cn/blog_migrate/6e757952f2cd4602bca843755f7dd321.jpeg)
PPT版详细解释
![4363c35053997733c4339765ae88c64f.png](https://i-blog.csdnimg.cn/blog_migrate/0a035d7ca76a8c92ed8f853ac52b974e.jpeg)
![ae68013aedd529b4ac57e214d5493325.png](https://i-blog.csdnimg.cn/blog_migrate/840e482909614c0633fab0bc866002d7.jpeg)
![5cc5f873ca989a4886daa1d5b74eb227.png](https://i-blog.csdnimg.cn/blog_migrate/47002fe467c7e9c473831ffaf32458b6.jpeg)
![38c4bbeb88180090b0345fbe10b02a55.png](https://i-blog.csdnimg.cn/blog_migrate/557f5c4629645cb93f3ed32eaf729760.jpeg)
![4746f3376b3a71ffa80314f6c96e09d0.png](https://i-blog.csdnimg.cn/blog_migrate/1e015e59decfffc6db48f0b6b29510a9.jpeg)
rel=“stylesheet” 该属性是必备的 表明链接的方式
type=“text/css” 指定文件类型
![5d7d7e8e25207b860d69d2d8ab1b3e6a.png](https://i-blog.csdnimg.cn/blog_migrate/58f1066396a42679e5c557a018815eca.jpeg)
![64107d5dd87e9a893b38dec513dc2a2e.png](https://i-blog.csdnimg.cn/blog_migrate/a96af58878f511e706abe35b8ce9e282.jpeg)
![37a2486ff3f6fe2569168d16fe74ba95.png](https://i-blog.csdnimg.cn/blog_migrate/042752977713572700dd1c7ea3c09e37.jpeg)
![e6e65e3bd48fe65407d1e76e58168e8e.png](https://i-blog.csdnimg.cn/blog_migrate/e9ecccdfb08f14d9a6157ddb918bb356.jpeg)
![a378971077d7855023107a77f9b9925f.png](https://i-blog.csdnimg.cn/blog_migrate/5b172bb0287ff66f3d71cf80d509e1a2.jpeg)
![9a35b6ea503eda184701272b38d7beb4.png](https://i-blog.csdnimg.cn/blog_migrate/fd93533016ca4b57c216869ddd452981.jpeg)
![712336ff4279bcd8ea4a227b82534bbb.png](https://i-blog.csdnimg.cn/blog_migrate/fc1d97005e04a936505c46bb3b234809.jpeg)
![a5561aab2a318d3ed8b65136b53010ea.png](https://i-blog.csdnimg.cn/blog_migrate/80c5de46674e3f15b255b78e834bd9eb.jpeg)
![ea149acdbd3ebc4a8dfd4c1ac6e1b4f2.png](https://i-blog.csdnimg.cn/blog_migrate/cdbcc3a04f1ef7849b3e9f6c8d49c1a9.jpeg)
![86066ec622f7c59f2a02e202ad8879b7.png](https://i-blog.csdnimg.cn/blog_migrate/fab1c3f1cafe16683db39f12be3918f9.jpeg)
![8d4128554d0ead10803aed8b9e6ffc20.png](https://i-blog.csdnimg.cn/blog_migrate/1780e3bcc56758a03c480c688d6ced54.jpeg)
![ed174c39a7431a7be4bddc9ff6c7e1af.png](https://i-blog.csdnimg.cn/blog_migrate/ef5d72afc67773246e50b48ae6bea88e.jpeg)
![cc00b7e09ffe2754350a7ec92b330791.png](https://i-blog.csdnimg.cn/blog_migrate/4975c9c81f19f5407366ac10e3d61054.png)
![b1cb5acd8bdee9a30eec70aae905fdb0.png](https://i-blog.csdnimg.cn/blog_migrate/bc6105bd0e6de3eee2debcf3594c19c6.jpeg)
![feb8127c387a1a5aa6509cfd92ae378a.png](https://i-blog.csdnimg.cn/blog_migrate/be8bbef720ecf77ee991be033bffd2f8.jpeg)
![4ea8869f806d41e7f87c8e7eddc9e108.png](https://i-blog.csdnimg.cn/blog_migrate/be5911cb0fc763f61bad4d16d4f45561.jpeg)
![33a84abf1b6474c97240221c4e997633.png](https://i-blog.csdnimg.cn/blog_migrate/352f6b19c13dd1c82190b09e261d254f.png)
![ee8c0eec0b8426ca96466f82e40f95c3.png](https://i-blog.csdnimg.cn/blog_migrate/177373395c865ae223c7f4b3be702162.jpeg)
![17a98cb7889149fb1fc3993feb91bad6.png](https://i-blog.csdnimg.cn/blog_migrate/c9321a8d7191c3425758c63a0e277414.png)
![8e49c3825dfd928e7b9d32f7e9a13b8d.png](https://i-blog.csdnimg.cn/blog_migrate/c3283f149f031271368cc099b979bddd.png)
![5aadf17c85bc1d851126f72480ed1796.png](https://i-blog.csdnimg.cn/blog_migrate/819686368cae4f49ff49cb8b410c1825.jpeg)
![17ca7ca8b07e6f1c2ff538337f6cdb6b.png](https://i-blog.csdnimg.cn/blog_migrate/0f8dd59733abaf5c4cdc9277c5e99b39.jpeg)
![5691414c4f3c09bb2a4e10edceba32c7.png](https://i-blog.csdnimg.cn/blog_migrate/7a0f86ac1e7508b4ff798f19882cd035.png)
![a8491e551fd6208928bd64df572f7d40.png](https://i-blog.csdnimg.cn/blog_migrate/718a4b920100c2f6e8228d859434b15d.jpeg)
![651665700e843e61d0beab56527c6779.png](https://i-blog.csdnimg.cn/blog_migrate/3afdcc2000982438582e423d6b308f9b.jpeg)
![a9b0aa8f5170e527bd11bf77352713a4.png](https://i-blog.csdnimg.cn/blog_migrate/e3d8e9719e1ad187fa5d0581201f0763.png)
![61a6600604570760286fe93726c4c281.png](https://i-blog.csdnimg.cn/blog_migrate/8631192459c957b59428499e3ee9a125.jpeg)
![a82f378cb3844947e27fe8e51b7336ba.png](https://i-blog.csdnimg.cn/blog_migrate/719db4f5ee4cd47b118292c498c6142e.jpeg)
![618603e9dcd9a221b777411965317d99.png](https://i-blog.csdnimg.cn/blog_migrate/79aba1cd67b7cc6b59d57297dd5300c2.png)
![fe03513d754358b89a9697abc1bd1723.png](https://i-blog.csdnimg.cn/blog_migrate/351acd73f2820f2ac2c9e83da0c1dc04.jpeg)
![3d7620b040ca7586e0cbfbc123ef6fce.png](https://i-blog.csdnimg.cn/blog_migrate/f70bfc2ff52ed97aab7c2ac06907192d.png)
![5eda96924586ad9625d4717f2d314f03.png](https://i-blog.csdnimg.cn/blog_migrate/9e1b10ae124261c0aac9eb9c99331fae.png)
![ca0b0687948276e864c513063e63434d.png](https://i-blog.csdnimg.cn/blog_migrate/03f3bb4887bdc64eb7abce4062624a44.png)
![abb6bd03f36a92bc6829f5587530e802.png](https://i-blog.csdnimg.cn/blog_migrate/21610f36ded913facad9f793efe5a113.png)
css列表属性
![c98b71289335110453bf5d18231a04d8.png](https://i-blog.csdnimg.cn/blog_migrate/2b66e5a3acd123766d3f3cf2711a69e9.png)
![a7f370f9cfb46cc03effde9add529609.png](https://i-blog.csdnimg.cn/blog_migrate/dbd68945de5e03199b4e48f9261cf56c.png)
![2027a09bdd2ee99b36e2b4b3dc584628.png](https://i-blog.csdnimg.cn/blog_migrate/f3c1032ee7a02fdbd933a466871761cd.jpeg)
![33a811199edf28176c257997a160b4e3.png](https://i-blog.csdnimg.cn/blog_migrate/38254f8f0216e2c8315f7df4129743d8.jpeg)
![814c8d98060a2f89c1b5c4b5606718e3.png](https://i-blog.csdnimg.cn/blog_migrate/afac660a3e4a85ad12fadede30619dca.png)
![5b69d7a68568a46f2633cfc8f26451ea.png](https://i-blog.csdnimg.cn/blog_migrate/5494f1c2a9724d34f93b2ccb99acd7d1.jpeg)
![a5293789874657b252f6b3ce7bc4934f.png](https://i-blog.csdnimg.cn/blog_migrate/e4ce1b1cc35067067ca4d1560160f5bb.jpeg)
![5098088951f72dc54ef8329e24ea433b.png](https://i-blog.csdnimg.cn/blog_migrate/d5616b5f8bbdb7836747559e0956aeee.png)
![bac9cb5f75db985330659817ec942b59.png](https://i-blog.csdnimg.cn/blog_migrate/b2386daa6606b1719d5c5ebff0f60771.jpeg)
说明:两个值 :第一个值表示水平位置的值,第二个值:表示垂直的位置。
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
向右方向,向下方向都是负值。
![4fdba47c23c0f6d49d4323d991ba7cf9.png](https://i-blog.csdnimg.cn/blog_migrate/41f26965ee6640918ba5ca8c953c97bc.jpeg)
![6916ec92da8bb84e066bdee380cee4ab.png](https://i-blog.csdnimg.cn/blog_migrate/58620ba1f85517a6211283a4285dc490.png)
![33700c7f399fd921dba4f035793befa3.png](https://i-blog.csdnimg.cn/blog_migrate/c8b2f60b48c61816376c5fd9a02447f6.jpeg)
![03ce6cd9406ef1a151678b1cf0a3160d.png](https://i-blog.csdnimg.cn/blog_migrate/dccd8a50a1e2f164a7defccad0eebff2.jpeg)
![f1d6e6753e44904af0f96648ba139d56.png](https://i-blog.csdnimg.cn/blog_migrate/ea6218a82b2be3d3b703fa18a870130b.jpeg)
![63b54d3a7cbe724711beb0325dd9c1c1.png](https://i-blog.csdnimg.cn/blog_migrate/f477d33eb912ed7f91ea146ccb7d6e0a.jpeg)
![3cbfd37aece4e61d20b9f989b30c7d87.png](https://i-blog.csdnimg.cn/blog_migrate/2479eabdca1326fcd870a861334c5855.jpeg)
![0f3171604359093c55818b9eafb3f4b0.png](https://i-blog.csdnimg.cn/blog_migrate/b3c813db2a78c940fdee729741d4c8ad.jpeg)
![7f5caae55ac810c1ea8d3337c6b094ff.png](https://i-blog.csdnimg.cn/blog_migrate/90081552dd873ec0e7cac35f70c225ff.jpeg)
注意:样式(border-style)是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有边框样式,将根本没有边框。
记住这一点非常重要。事实上,忘记声明边框样式是一个常犯的错误。由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果希望边框出现,就必须声明一个边框样式。
![98d08f6eaf539d311e86f58285357066.png](https://i-blog.csdnimg.cn/blog_migrate/78e1f3adf875ab26cc09d3c80824475b.jpeg)
![d8bd45a8dcb3ae959eddc09949561879.png](https://i-blog.csdnimg.cn/blog_migrate/13e7ca85715beba935e6d69c25b17f27.jpeg)
类似于表格的cellpadding属性;
默认情况下,背景会以padding的左上角为基点在盒子中进行平铺。
![00b95cfd9ed94352d18ccfb0333b0dcc.png](https://i-blog.csdnimg.cn/blog_migrate/3d410ef0308a5b273d8ddc822cdd6b7f.jpeg)
![1f60ac0429827584532b255d4143c728.png](https://i-blog.csdnimg.cn/blog_migrate/84ec4e838aaf69b140339e44b4245f57.jpeg)
![3c980e92b55579a2a6f0a543254a4ba6.png](https://i-blog.csdnimg.cn/blog_migrate/d72e0271f7a1b4818a77ddf94754f6b9.jpeg)
![c9de09865650bf3603243c526b5487b0.png](https://i-blog.csdnimg.cn/blog_migrate/a351384c2971bed3ceb0a02c30aa4130.jpeg)
margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。
![cb07b73d36d7b48ddbfed8fc0a318d11.png](https://i-blog.csdnimg.cn/blog_migrate/feb88cd99a2dc29c4e0de506a29e8baa.jpeg)
![2ae1b4ef064fe083dac7b48209c5e20b.png](https://i-blog.csdnimg.cn/blog_migrate/86636a40fe07aafcf57982eaf5e37a7c.jpeg)
![ef2d28a39c0768624698cc7d8413eb60.png](https://i-blog.csdnimg.cn/blog_migrate/a0e6524cc7ac978d7df86e9e88e73caa.jpeg)
![c0a3064f288f8cd4d9367ea8947d9809.png](https://i-blog.csdnimg.cn/blog_migrate/b48213683c6c9fe9ed26e2a0dbc7d860.jpeg)
![17c09ea92a5dd3c940fbcae318fbdc43.png](https://i-blog.csdnimg.cn/blog_migrate/c68e9b2071fa775049cdc6475484b825.jpeg)