JAVA WEB开发基础:HTML 、CSS、 JavaScript。
注意:html、css、JavaScript是浏览器使用语言。
问:从浏览器上输入https://www.baidu.com/,然后浏览器呈现百度页面,中间到底经历了什么?
简单来说,可以理解为浏览器发送一个请求包,然后服务器(一台运行Java程序电脑)接收请求,分析请求,响应请求字符串、二进制数据,也就是Html/css/javascript/图片、视频、其他二进制数据。之后浏览器接收响应数据,根据响应的数据渲染页面和发送请求。
HTML:超文本标记语言
HTML5:HTML一门超文本标记语言,最新的第5代版本的语言的标准。2014发布。
![fdf8aee0dca09c1a306765cad1f98909.png](https://i-blog.csdnimg.cn/blog_migrate/f49b47c2a39def10cdd69a49d499bab7.jpeg)
![8a6ffb0120c8a96fd750e9d4b1f60be4.png](https://i-blog.csdnimg.cn/blog_migrate/a7f6b5febe96b1390ca890f95ee2e673.jpeg)
![f45de8a2cd5f95b5573b644af259e078.png](https://i-blog.csdnimg.cn/blog_migrate/e00c75aaf49164fa2b5d8cde9e3583f7.jpeg)
常用的HTML标签:
![cd51675883316220c92da618aba467ed.png](https://i-blog.csdnimg.cn/blog_migrate/3311070de105ea40cedf7043d7429f9e.jpeg)
![42b3555e7eb4f98d60301f2728aa34d1.png](https://i-blog.csdnimg.cn/blog_migrate/dec1a112386496bacfed3bde405888d9.jpeg)
![f6a6280e21b0c4e719b50850c2123f50.png](https://i-blog.csdnimg.cn/blog_migrate/df9b553286e5d5ee53c10b19b319f100.jpeg)
![d6f92b9f20234a83ad456996121e45e4.png](https://i-blog.csdnimg.cn/blog_migrate/bb2aca7044b6aa9727a26b65e26aab9a.jpeg)
![2a295d4b2f7a0900086242bd060166ab.png](https://i-blog.csdnimg.cn/blog_migrate/3119a75a552645e8b7e1c7fb33222803.jpeg)
![bc2cc43d6224cdc4b9b73e1a7f314221.png](https://i-blog.csdnimg.cn/blog_migrate/790d06f8114c1c16e16866fb15f24996.png)
![3a45bec1fc979d707ba1e3f011448060.png](https://i-blog.csdnimg.cn/blog_migrate/ac80c4dc7d12676b7afbb83879517e74.jpeg)
![fc8cff475b34a646d791eabd6f820c67.png](https://i-blog.csdnimg.cn/blog_migrate/f4ef5f78da28f6d03e1e29b94b560484.jpeg)
![e5493230f2f7567056be11303a53d571.png](https://i-blog.csdnimg.cn/blog_migrate/b9c5d96988d6dd153c59dc9ba780f93b.jpeg)
![da83165e01e5a4d8dbd7887fa00bd405.png](https://i-blog.csdnimg.cn/blog_migrate/ed40ea0b210526c0429526c1c946aadb.jpeg)
![ea7a16aa4effbe127d95fa56c42bc065.png](https://i-blog.csdnimg.cn/blog_migrate/22d1dada0ec182d1c4b675627326741d.jpeg)
![899913edad507cae3fb1a6e208c11254.png](https://i-blog.csdnimg.cn/blog_migrate/81e87860db39f4e552182335620a86ac.jpeg)
表单标签:
![21fa7a9643e503200be3e1f385086e25.png](https://i-blog.csdnimg.cn/blog_migrate/362bdc5ad9294b1afda9eb928e49eb1b.jpeg)
![64e41613d9dd3646e3b08a74519d02a2.png](https://i-blog.csdnimg.cn/blog_migrate/a3cdd8968b4c7b3a8905207f89a0da69.jpeg)
![b348f088df21f63e512771e588870512.png](https://i-blog.csdnimg.cn/blog_migrate/afc391ac7b085756ea6f7a21892e1db7.jpeg)
![f9c29d97fe607db7276f8acf969fb7b1.png](https://i-blog.csdnimg.cn/blog_migrate/c3c7053297fbdc759a861b80439bd402.jpeg)
![3dc9e801180d0c22c814a921bbea044c.png](https://i-blog.csdnimg.cn/blog_migrate/fec9155f2bbc98e5c247e52ddf642ef3.jpeg)
![4c111cf5f6deab4c0a4378b5e13dfff7.png](https://i-blog.csdnimg.cn/blog_migrate/003c612a1733030268338454705bda75.jpeg)
![5019aca3db9ec7f59044b4c5a154cfa9.png](https://i-blog.csdnimg.cn/blog_migrate/b2045fdf8f57c8d9234f41b23da06bac.jpeg)
![b9c51fbaabdf8640e1286468abbab0a4.png](https://i-blog.csdnimg.cn/blog_migrate/9d4dfffa4503a536f374921108d97853.jpeg)
![d8bafb172b1fc97742fd41585e1a4190.png](https://i-blog.csdnimg.cn/blog_migrate/a3e413551d6f149e16f546b370431513.jpeg)
![b7d6ff7b8276c3c8a3a22a1a25d2ccda.png](https://i-blog.csdnimg.cn/blog_migrate/4169c87e4bb0b73b3224cfdda7ba7488.jpeg)
![7db06663e03b29c7070ed825fb4b1b24.png](https://i-blog.csdnimg.cn/blog_migrate/bc179ffa79b51360edd2da85120c42c7.jpeg)
![a7d0a82b2cc7ebea11381e57f4aa8131.png](https://i-blog.csdnimg.cn/blog_migrate/95ea598cf6fb7c464859f6cd128a114a.jpeg)
![ed03cb5a004f92c20a984ed0da47b86f.png](https://i-blog.csdnimg.cn/blog_migrate/22cceddf65c9d11e83078849ceb7cdeb.jpeg)
![3ee739aa6b48d51266df8cfccf2ab94b.png](https://i-blog.csdnimg.cn/blog_migrate/dbf252d80e3bc1a15a2286e7f3cd8c38.jpeg)
![3751b3cb30c44781a9bc3326082d37c4.png](https://i-blog.csdnimg.cn/blog_migrate/da0a8b92a0c058ecaaad3241c88d3f99.jpeg)
![74d17bd605dc4cb1e95831f1020fdbce.png](https://i-blog.csdnimg.cn/blog_migrate/584402087dc08740ea00746522304859.jpeg)
![934f0d5dca8a591ed5d1e42a1ed77c19.png](https://i-blog.csdnimg.cn/blog_migrate/d2a045b37bf6e29b5c71a5e66614ec19.jpeg)
![26660e9527c94e0f7704ca2a4ef65900.png](https://i-blog.csdnimg.cn/blog_migrate/0501dfd18a0a5c3e9d0b0b52e0f1667c.jpeg)
![62b3748df8de64b1ddeb2282dadda63e.png](https://i-blog.csdnimg.cn/blog_migrate/4c0eb2e1c6cdb1c76b59451b8040f432.png)
![fe069c89fc3bbbf914d5cd9abed27c63.png](https://i-blog.csdnimg.cn/blog_migrate/4c488302a4c77efe90fb73b87a4980cc.jpeg)
![3cd3a2805f3fe625dc95a2e5a375e8af.png](https://i-blog.csdnimg.cn/blog_migrate/da0dbb576653f7290dce37e93f40ce38.jpeg)
![55c0632a8840ed8fe79cd369714254e3.png](https://i-blog.csdnimg.cn/blog_migrate/2c286a9ad1af9eca425e0ee8d0da91f4.jpeg)
![a674ee1239d2d42a26beacb6d4564832.png](https://i-blog.csdnimg.cn/blog_migrate/6bb6b69a0cb1985f638a23f6320aef52.png)
背景属性
![8b41a07a7adb3adbaa70be804879f72a.png](https://i-blog.csdnimg.cn/blog_migrate/b1dad7b272c67000aa5fa76db1929115.jpeg)
![c3f0630e3b0584fe734bca960b749dfa.png](https://i-blog.csdnimg.cn/blog_migrate/de321c609553a9175873703591ef6e4b.jpeg)
![d24f7d184de4c7b074022d4bc9fb6405.png](https://i-blog.csdnimg.cn/blog_migrate/1c0956f5c71cfc5a30bb0d9d4bd8911c.png)
文字属性
![07eba95c99264865ab09bb284bd8ec8f.png](https://i-blog.csdnimg.cn/blog_migrate/c2743aedf2dec5360240abb42b7f64db.jpeg)
![aff68e0a557bd0e058dffcab146ac9d9.png](https://i-blog.csdnimg.cn/blog_migrate/9383404410c7d1ca0bc3b229287dcb3b.jpeg)
![28de635060f05f9f985d0df0544a6ff2.png](https://i-blog.csdnimg.cn/blog_migrate/3013fe38adac460cabf0affe74205d8c.jpeg)
盒子模型
![b801cc197edd087f5e2deb26a4a68d6b.png](https://i-blog.csdnimg.cn/blog_migrate/7b0c9fadcad056263feba8998ec9ccad.jpeg)
![e0c768b126ad61d8593b7f92a812cae7.png](https://i-blog.csdnimg.cn/blog_migrate/893edfb53250e7d86c3cbdbdd3c260f8.jpeg)
![80d5465fccd0a1959596538c2e1879f8.png](https://i-blog.csdnimg.cn/blog_migrate/5746231ee63b14c1f365e5ba21317d4d.jpeg)
浮动
![64022608ef2e542cda5767e4b694c6e4.png](https://i-blog.csdnimg.cn/blog_migrate/6350f89e1236ffa6d0d89802e2e795b8.jpeg)
![b2f96fc587be8b3a0f66f7afe80b1483.png](https://i-blog.csdnimg.cn/blog_migrate/3f682bbb64c2120dd3dde611c12121d6.jpeg)
![ded736d38ce11dac7fc3c2a690fb8580.png](https://i-blog.csdnimg.cn/blog_migrate/195d755eb10af6730c4616bf1cb1a3c7.jpeg)
弹性布局——目前最流行的方式
(2014年开始到现在,目前的网站基本都是这种方式)
在元素上设置了display:flex;的属性即为弹性容器。
![4ee0d841756058c519f63f4720e6fb21.png](https://i-blog.csdnimg.cn/blog_migrate/bd376c2adb5a00a63e5c9ad314cbe518.jpeg)
注意:弹性子元素为3个child的div元素,span不属于直接子元素,那么不是弹性布局。
弹性布局主轴:确定子元素的排布是水平排布还是竖直排布。侧轴为主轴的垂直方向。
设置主轴的方向:flex-direction,
row(默认值):子元素是从左到右进行排布。
Row-reverse: 子元素是从右到左排布
Column:子元素从上到下排布
Column-reverse:子元素从下到上排布。
注意:默认弹性子元素只会排成1行或者是1列。不会换行。
![f631c765e19fdd8b3ffdb4635e274c15.png](https://i-blog.csdnimg.cn/blog_migrate/4eda177c69e9b07f0e51906907e05acb.jpeg)
flex-wrap: wrap;——换行
![482e624f44bb6b13b4b5070013c54e3f.png](https://i-blog.csdnimg.cn/blog_migrate/9849ae8c2efa41c1f51d41c501d062bf.png)
align-content——设置侧轴的多行排布
![e9565bbc926dd7e730a338fea3b0d406.png](https://i-blog.csdnimg.cn/blog_migrate/827f4ab839d960e47b2c069847921089.jpeg)
剩余空间占据flex
要求做一个网站,无论页面怎么缩小,广告都要占据一定位置,剩余空间留给其他内容显示。
![708eb9f1ccd13a211c14858b20dc944f.png](https://i-blog.csdnimg.cn/blog_migrate/a674b1a0f8be15b464b3601ba1446d6f.jpeg)
弹性子元素的排序
![bde0746b598f65a614158b00e4066479.png](https://i-blog.csdnimg.cn/blog_migrate/4d3b6a3640ae42209941822788d33623.jpeg)
![e2fbe479bd84c5530becaacaae087fcd.png](https://i-blog.csdnimg.cn/blog_migrate/17a42f1e0644ef23c4d560aff52db408.jpeg)
弹性子元素侧轴单独设置——align-self
![be8cf030bcd393c8a444e3484141e57e.png](https://i-blog.csdnimg.cn/blog_migrate/79024cf3965aa29916468aab7d403f26.jpeg)
![34419de5f4707a69cc4d4079646cf04b.png](https://i-blog.csdnimg.cn/blog_migrate/8fffcb49240388cd5e2fbf03d5b54302.jpeg)
定位
![6732fcb7742a913b1981b5e473da4e11.png](https://i-blog.csdnimg.cn/blog_migrate/8e765a4e70b7ae3d1b830aa196cf14ac.jpeg)
![bf8a05504e1dd5d4407f7e88833fea94.png](https://i-blog.csdnimg.cn/blog_migrate/66c2ffd6c9eff692fe27a45e4d8b0943.jpeg)
![b1d7edc15a7dfa529b484530e983d9af.png](https://i-blog.csdnimg.cn/blog_migrate/917aff307a6e2abc956f041b74f24e94.jpeg)
![a346a47f7f9daa203dfc207bdc598ff8.png](https://i-blog.csdnimg.cn/blog_migrate/484968a3c1d71d64d795eef59eac479b.jpeg)
![1adcc1fca75c7369f330a8ff806b42a4.png](https://i-blog.csdnimg.cn/blog_migrate/9711b69b5b442701b48f1462bcc3a462.jpeg)
PPT版详细解释
![35a68d4da44245694204bda1a2b704ad.png](https://i-blog.csdnimg.cn/blog_migrate/ea481fe306465d5542835bbcd33d04ed.jpeg)
![04575582f344879f43f35fff1cce8dd0.png](https://i-blog.csdnimg.cn/blog_migrate/11064e4bcf011358a903435a3d789506.jpeg)
![892a092df8677d13275b944300bec891.png](https://i-blog.csdnimg.cn/blog_migrate/bd0efb5d164f7a5508308c570d6cee1b.jpeg)
![88cdf3dd636cd29c578a5933180b2d20.png](https://i-blog.csdnimg.cn/blog_migrate/98a600f95c175c4f76e181268016b187.jpeg)
![f4375f94f44ca5c12acc5061aa1893c2.png](https://i-blog.csdnimg.cn/blog_migrate/c3247fe5fc106431af3e9fbff2e0f19f.jpeg)
rel=“stylesheet” 该属性是必备的 表明链接的方式
type=“text/css” 指定文件类型
![e1fa1fcc87a05ef44bf74977ae925a92.png](https://i-blog.csdnimg.cn/blog_migrate/739d74b562964424d298ed5dc1341746.jpeg)
![c2c937fffa71ce51640987821f714056.png](https://i-blog.csdnimg.cn/blog_migrate/3eb622b55c817cbcb45ff9e32729208f.jpeg)
![315b9fb4d5db47db2419546da0ea28e3.png](https://i-blog.csdnimg.cn/blog_migrate/db4ceaaafd11693a8c13942ec1ae21ad.jpeg)
![a47690adcff3a675d44c5abf3d974463.png](https://i-blog.csdnimg.cn/blog_migrate/ee50ca775176e7d5a6826fed69ee8ce5.jpeg)
![950a236d5a0a95cc564ec8c55c8847e7.png](https://i-blog.csdnimg.cn/blog_migrate/9734f30f1a664cdc437c5cf5525e5433.jpeg)
![027fbe1197d5a20f3011c3cbc92f69f2.png](https://i-blog.csdnimg.cn/blog_migrate/17dd366478a9e8752b926826bbfae3d0.jpeg)
![1afbfe1ece04e4036dd6e2b9920c38ee.png](https://i-blog.csdnimg.cn/blog_migrate/c42fa97442d690af361ba4454fef40a7.jpeg)
![eedef0fc856b4d8527735502e39f0967.png](https://i-blog.csdnimg.cn/blog_migrate/a3948daf89bce879875d2798652ffed6.jpeg)
![fa63c97f7bd43ca5332bf6258f511e75.png](https://i-blog.csdnimg.cn/blog_migrate/46951427eac2ead383c5e985ee7d594c.jpeg)
![12f39646379012f178f57761142e7d7e.png](https://i-blog.csdnimg.cn/blog_migrate/038f24e90bd5bb665271d8b4d9c1221d.jpeg)
![2abb0b62a457a308c0615e0d641fc0fd.png](https://i-blog.csdnimg.cn/blog_migrate/22926f2d36a5757981232bef4504e41e.jpeg)
![843bf053f0956f7c2564ea6282b79527.png](https://i-blog.csdnimg.cn/blog_migrate/5debb28b3831d4aba820b8c4184e52ac.jpeg)
![7b91210ed1b9cbcc49989fc100a249d9.png](https://i-blog.csdnimg.cn/blog_migrate/0b9e8bac4c4f3a1b8039357db1541c09.jpeg)
![179f2fd0404e2dd71f4d6a224ad2cbe2.png](https://i-blog.csdnimg.cn/blog_migrate/d1b1026db1e1a403d1c0a00f08dc3815.jpeg)
![f1d8011bded8c3732bf29a916c351841.png](https://i-blog.csdnimg.cn/blog_migrate/410ac9ff75bee10b7fa0b57872ac7bb9.jpeg)
![31616d6cec4937cffcc14ec172e1b8f5.png](https://i-blog.csdnimg.cn/blog_migrate/db2563bd871729d0418d0ceb746969d7.jpeg)
![488d90b056fc81350ac719b1f1736a66.png](https://i-blog.csdnimg.cn/blog_migrate/8f5cdabe01a8b76c9d97c2a645e0c771.jpeg)
![51bf3e676431f4f48e9116776537e5b7.png](https://i-blog.csdnimg.cn/blog_migrate/fab6b2084a10e1a8d2a6ab31b8f298b5.jpeg)
![71c062b93ddae88d1f8f1a1b1299d55b.png](https://i-blog.csdnimg.cn/blog_migrate/ff12afe8520d01c413d4c454967558f6.png)
![c681e4b01d8b585f90586bd6555af74d.png](https://i-blog.csdnimg.cn/blog_migrate/dab3d13f914b6bbde2d0b19fe22d5d57.jpeg)
![c1e440b1e834ca227ec0e20f43e7ebca.png](https://i-blog.csdnimg.cn/blog_migrate/4992cdd3bdb1b1831e6e5ac2c6445f74.jpeg)
![d8bfa6a390fa80894b5f65f30396cfad.png](https://i-blog.csdnimg.cn/blog_migrate/965d278319a8745ccc85c455eb63bce8.jpeg)
![445348f73bbb8fe1f43d3b5d56d2e665.png](https://i-blog.csdnimg.cn/blog_migrate/1017867dd81a48c84b8b00a32d83f219.png)
![f7da82262944c3629810af93de39096d.png](https://i-blog.csdnimg.cn/blog_migrate/357e3e68d6df0acd7b0d7fb31a4deaad.jpeg)
![6a7aa25a57d3dadd36e01d3c4a60f6a8.png](https://i-blog.csdnimg.cn/blog_migrate/220c7009ccbbe4f80afa81f2c1847125.jpeg)
![727b6b510c4d0005eab0f099dfa17dfc.png](https://i-blog.csdnimg.cn/blog_migrate/3bc12b33eac5a907d2c668cfedbafd88.jpeg)
![149fa45cdc2cb3bcf10ff6526faf20a7.png](https://i-blog.csdnimg.cn/blog_migrate/4a2a29688cbde047573478ef073a8644.jpeg)
![1be94d254ba6c06ecb9ef9878c736b3f.png](https://i-blog.csdnimg.cn/blog_migrate/67ffac04b54737fd014415191b3f3b60.jpeg)
![1a53b0ff82ba76a7136f9db368867d84.png](https://i-blog.csdnimg.cn/blog_migrate/b3d34a2f4326fc9112bb1efa36b4c9a6.jpeg)
![bd8b54c898a5d7ba1202165faa213f0c.png](https://i-blog.csdnimg.cn/blog_migrate/91f65fb6055a6cd8ec470e2b30319802.jpeg)
![986cf978695ce92bdf97ba60282cdd0b.png](https://i-blog.csdnimg.cn/blog_migrate/d9abed92921cd22c744f192959055ff1.jpeg)
![64b94a1414f144f4e0ca122e3fde857b.png](https://i-blog.csdnimg.cn/blog_migrate/5dc3e225d9d395707e0002f610ad3ef7.jpeg)
![d5a6076dfc038f72fe467e901e1356e8.png](https://i-blog.csdnimg.cn/blog_migrate/19386478c296a8c147439f706d536f34.jpeg)
![66f954b617d8afe1f638ce333f92ccb4.png](https://i-blog.csdnimg.cn/blog_migrate/f9f47353ee65cb89b14ec9ae01db48f0.jpeg)
css列表属性
![6d431ad69887f8eb88f870031940bb82.png](https://i-blog.csdnimg.cn/blog_migrate/6a57ace8bc76a7d8c9781f34a66a2006.jpeg)
![f156a29ead35f8e4a2ef2584eecb4929.png](https://i-blog.csdnimg.cn/blog_migrate/6cf10282cbcc7fcd408d88dbb0d9249f.jpeg)
![ffc0df0b32245e5c3744445a7a1316f0.png](https://i-blog.csdnimg.cn/blog_migrate/e3771f0ff46972862f93aa4509716c20.jpeg)
![586e1df44cb6a166f70fb61924958c39.png](https://i-blog.csdnimg.cn/blog_migrate/fd902608d1731a8ba2cb9e6bb911c91b.jpeg)
![6c9885e92c1a6d73e96379a0e5031224.png](https://i-blog.csdnimg.cn/blog_migrate/96f2aa49d7605ecbf816873d97c00c55.jpeg)
![e3c7cd7c140038c165616797d860bc1c.png](https://i-blog.csdnimg.cn/blog_migrate/b1d2e4730558324bbd8cacda8b2df6a7.jpeg)
![c918c6531df2cd4970776e982816508e.png](https://i-blog.csdnimg.cn/blog_migrate/41481994710d7fe0e208ada90a3bd117.jpeg)
![07eb0c4dc9be060a56921ed352298dd3.png](https://i-blog.csdnimg.cn/blog_migrate/1ff72ef80e9028029c71aec738aa68a3.png)
![1d629daeb603a0f3f6c6f54d003afdc2.png](https://i-blog.csdnimg.cn/blog_migrate/f1688977cf8a71c66114ad48369491d1.jpeg)
说明:两个值 :第一个值表示水平位置的值,第二个值:表示垂直的位置。
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。
向右方向,向下方向都是负值。
![0d133c8f7ad68a3c5113e1a3897bbe1a.png](https://i-blog.csdnimg.cn/blog_migrate/282f2137f1f3f641323db337b8008cd2.jpeg)
![45d52b317db7a7ec1d8dfd889d7a65cf.png](https://i-blog.csdnimg.cn/blog_migrate/45734817bea1c7434c130485d3d5af72.jpeg)
![9a41bad94051bd8c3e7eeaf0ad3297cf.png](https://i-blog.csdnimg.cn/blog_migrate/1a6ea4126e0800a11b2bd2a0448b16a6.jpeg)
![4fea6a2e85ecd462d2822131737ec563.png](https://i-blog.csdnimg.cn/blog_migrate/070470066fbc7d3e02b119038b11f85b.jpeg)
![5b802a47d06f068992c82f2689fce10f.png](https://i-blog.csdnimg.cn/blog_migrate/33d460e8cdfe8b507c022dd9f9ab2df6.jpeg)
![c6f3cd3e705d4e31fbf01e800fd932d1.png](https://i-blog.csdnimg.cn/blog_migrate/3e967dd39e791bf1631cf441fc5bf4d8.jpeg)
![e029b7dee66d0d4d817b304d87cef89e.png](https://i-blog.csdnimg.cn/blog_migrate/ba73a6d3284c4d50c7fbaac109b7b108.jpeg)
![299cf9f81bd23a6df17a27134c051590.png](https://i-blog.csdnimg.cn/blog_migrate/a40d3fb23220d300dc80a40b68d84e1a.jpeg)
![f87f6becb64102dbc0ce2072c0212301.png](https://i-blog.csdnimg.cn/blog_migrate/0222d5e96df8a48e017e67a166e47d49.jpeg)
注意:样式(border-style)是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有边框样式,将根本没有边框。
记住这一点非常重要。事实上,忘记声明边框样式是一个常犯的错误。由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果希望边框出现,就必须声明一个边框样式。
![578bfbeebb3b9a3a461a9441fdc7a78f.png](https://i-blog.csdnimg.cn/blog_migrate/0240943b362fb72762b6beeb23ec3544.jpeg)
![23da43b9db6a59340421f54564560c7a.png](https://i-blog.csdnimg.cn/blog_migrate/47fc2f575055e418b79a322fef0d777a.jpeg)
类似于表格的cellpadding属性;
默认情况下,背景会以padding的左上角为基点在盒子中进行平铺。
![5d98e822afed91978dd986e71a3b66d5.png](https://i-blog.csdnimg.cn/blog_migrate/070386419e4743fe2e31d495d6b19572.jpeg)
![bbc5e9af94049dbe6e600b720f00a421.png](https://i-blog.csdnimg.cn/blog_migrate/7d79f55b735d0b65f605c2b8e96bf7ac.jpeg)
![dad45a50b40a7a0e08454ea646f6dbbf.png](https://i-blog.csdnimg.cn/blog_migrate/28c0b81b872a791c2108896c296c264b.jpeg)
![9e598752f9ed308bd43d155f11964fb5.png](https://i-blog.csdnimg.cn/blog_migrate/85ee1546c598da5755f58abda4a2d6d1.jpeg)
margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。
![c82c192a13c2134854b65e73430e03a4.png](https://i-blog.csdnimg.cn/blog_migrate/5da2bd9932f4f22569a06f1d06e1f0b7.jpeg)
![6de09d6d44d21aaed5036a7bd012ce0c.png](https://i-blog.csdnimg.cn/blog_migrate/62ae4ddee97965a73b345070b50f82ad.jpeg)
![e5a31ad158b66570c16fb6b5fec7b141.png](https://i-blog.csdnimg.cn/blog_migrate/0ad46d92d569d60ff0a1737db7a723ed.jpeg)
![4e1a772be371a89782804dcfdd474439.png](https://i-blog.csdnimg.cn/blog_migrate/459cf30c0b815f9798e6f9613c0fe3fd.jpeg)
![c74e875f8235b741b6e2784865a09961.png](https://i-blog.csdnimg.cn/blog_migrate/5b83b8a54fb7149772bc9223998dfe96.jpeg)