CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式


CSS框模型概述

可以用下面的模型图概述

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdgAAAHOCAYAAAA7VhgfAAAKo2lDQ1BJQ0MgUHJvZmlsZQAASImVlwdQU9kax8+96Y0WiHRCb9I7SK+h9yYqIYEQSgiBgGJXFhVcUUREQBF0BUTBtQCyFkQU2yKggH2DLCrKuliwobIXeIS37817b9438835zXfP/Z/vnpwz8w8A5GtMPj8NlgIgnZctCPV2o0fHxNJxIkAAMoACzIE9k5XFdw0O9gdIzI9/jw+DAJoZ7xjNaP378/8a0uzELBYAUDDCCewsVjrCp5E8weILsgFAsZG6Zm42f4a3IiwrQBpEuGqGOXN8YoYT5rhrdk54qDvC9wDAk5lMAQcA0u9InZ7D4iA6ZDTCpjw2l4ewJcJOrGQmsg4ZeQYWp6dnzPBBhPUS/kmH8zfNBLEmk8kR89y3zAbeg5vFT2Ou+j+3439Heppwfg0NJMnJAp/QmfWQPatPzfATMy8hMGieuey5nmY4WegTMc+sLPfYeWYzPfzmWZga4TrPTMHCu9xsRvg8CzJCxfq8tEB/sX4iQ8yJWZ5h85zE9WLMc15yeNQ853AjA+c5KzXMb2GOu7guEIaKe04SeIm/MT1roTcWc2Gt7ORwn4UeosX9sBM9PMV1XoR4Pj/bTazJTwte6D/NW1zPygkTv5uNHLB5TmH6Bi/oBIv3B3BBAGACVnbiyplzBdwz+KsEXE5yNt0VuSWJdAaPZbyYbm5qZg3AzJ2b+0nf0WbvEkS7sVDL7ADArhApchZqTE0Azj4DgPphoab5FjkOOwE438sSCnLmajNHHWAAEUgCWaAAVIEm0ANGyL22Bg7ABXgCXxAEwkEMWA5YIBmkAwHIBWvARlAAisBOsAdUgGpwCNSD4+AkaAXnwCVwFdwEvWAAPAQiMApegQnwAUxBEISDKBAVUoDUIG3IEDKHbCEnyBPyh0KhGCge4kA8SAitgTZDRVAJVAHVQA3Qz9BZ6BJ0HeqD7kPD0Bj0FvoCo2AyLAurwDqwCWwLu8J+cDi8DObAmXAenA/vgMvhWvgY3AJfgm/CA7AIfgVPogCKhKKh1FFGKFuUOyoIFYtKQglQ61CFqDJULaoJ1Y7qRt1BiVDjqM9oLJqKpqON0A5oH3QEmoXORK9Db0dXoOvRLegu9B30MHoC/R1DwShjDDH2GAYmGsPB5GIKMGWYI5gzmCuYAcwo5gMWi6VhdbE2WB9sDDYFuxq7Hbsf24ztwPZhR7CTOBxOAWeIc8QF4Zi4bFwBbh/uGO4irh83ivuEJ+HV8OZ4L3wsnoffhC/DH8VfwPfjn+OnCFIEbYI9IYjAJqwiFBMOE9oJtwmjhCmiNFGX6EgMJ6YQNxLLiU3EK8RHxHckEkmDZEcKIXFJG0jlpBOka6Rh0meyDNmA7E6OIwvJO8h15A7yffI7CoWiQ3GhxFKyKTsoDZTLlCeUTxJUCWMJhgRbYr1EpUSLRL/Ea0mCpLakq+RyyTzJMslTkrclx6UIUjpS7lJMqXVSlVJnpYakJqWp0mbSQdLp0tulj0pfl34hg5PRkfGUYcvkyxySuSwzQkVRNanuVBZ1M/Uw9Qp1VBYrqyvLkE2RLZI9LtsjOyEnI2cpFym3Uq5S7ryciIai6dAYtDRaMe0kbZD2ZZHKItdFiYu2LWpa1L/oo7ySvIt8onyhfLP8gPwXBbqCp0Kqwi6FVoXHimhFA8UQxVzFA4pXFMeVZJUclFhKhUonlR4ow8oGyqHKq5UPKd9SnlRRVfFW4avsU7msMq5KU3VRTVEtVb2gOqZGVXNS46qVql1Ue0mXo7vS0+jl9C76hLqyuo+6UL1GvUd9SkNXI0Jjk0azxmNNoqatZpJmqWan5oSWmlaA1hqtRq0H2gRtW+1k7b3a3dofdXR1onS26LTqvNCV12Xo5uk26j7So+g562Xq1erd1cfq2+qn6u/X7zWADawMkg0qDW4bwobWhlzD/YZ9izGL7RbzFtcuHjIiG7ka5Rg1Gg0b04z9jTcZtxq/NtEyiTXZZdJt8t3UyjTN9LDpQzMZM1+zTWbtZm/NDcxZ5pXmdy0oFl4W6y3aLN5YGlomWh6wvGdFtQqw2mLVafXN2sZaYN1kPWajZRNvU2UzZCtrG2y73faaHcbOzW693Tm7z/bW9tn2J+3/dDBySHU46vBiie6SxCWHl4w4ajgyHWscRU50p3ing04iZ3VnpnOt81MXTRe2yxGX5676rimux1xfu5m6CdzOuH10t3df697hgfLw9ij06PGU8YzwrPB84qXhxfFq9JrwtvJe7d3hg/Hx89nlM8RQYbAYDYwJXxvftb5dfmS/ML8Kv6f+Bv4C//YAOMA3YHfAo0DtQF5gaxAIYgTtDnocrBucGfxLCDYkOKQy5FmoWeia0O4watiKsKNhH8LdwovDH0boRQgjOiMlI+MiGyI/RnlElUSJok2i10bfjFGM4ca0xeJiI2OPxE4u9Vy6Z+lonFVcQdzgMt1lK5ddX664PG35+RWSK5grTsVj4qPij8Z/ZQYxa5mTCYyEqoQJljtrL+sV24Vdyh5LdEwsSXye5JhUkvSC48jZzRlLdk4uSx7nunMruG9SfFKqUz6mBqXWpU6nRaU1p+PT49PP8mR4qbyuDNWMlRl9fEN+AV+UaZ+5J3NC4Cc4kgVlLctqy5ZFzM0toZ7wB+FwjlNOZc6n3MjcUyulV/JW3lplsGrbqud5Xnk/rUavZq3uXKO+ZuOa4bWua2vWQesS1nWu11yfv350g/eG+o3Ejakbf91kuqlk0/vNUZvb81XyN+SP/OD9Q2OBRIGgYGiLw5bqreit3K092yy27dv2vZBdeKPItKis6Ot21vYbP5r9WP7j9I6kHT3F1sUHdmJ38nYO7nLeVV8iXZJXMrI7YHdLKb20sPT9nhV7rpdZllXvJe4V7hWV+5e37dPat3Pf14rkioFKt8rmKuWqbVUf97P39x9wOdBUrVJdVP3lIPfgvRrvmpZandqyQ9hDOYeeHY483P2T7U8NRxSPFB35VserE9WH1nc12DQ0HFU+WtwINwobx47FHes97nG8rcmoqaaZ1lx0ApwQnnj5c/zPgyf9Tnaesj3VdFr7dNUZ6pnCFqhlVctEa3KrqC2mre+s79nOdof2M78Y/1J3Tv1c5Xm588UXiBfyL0xfzLs42cHvGL/EuTTSuaLz4eXoy3e7Qrp6rvhduXbV6+rlbtfui9ccr527bn/97A3bG603rW+23LK6deZXq1/P9Fj3tNy2ud3Wa9fb3rek70K/c/+lOx53rt5l3L05EDjQNxgxeG8obkh0j33vxf20+28e5DyYerjhEeZR4WOpx2VPlJ/U/qb/W7PIWnR+2GP41tOwpw9HWCOvfs/6/eto/jPKs7Lnas8bXpi/ODfmNdb7cunL0Vf8V1PjBX9I/1H1Wu/16T9d/rw1ET0x+kbwZvrt9ncK7+reW77vnAyefPIh/cPUx8JPCp/qP9t+7v4S9eX5VO5X3Nfyb/rf2r/7fX80nT49zWcKmLNWAIUknJQEwNs6ACgxiHfoBYAoMeeJZwOa8/GzBP4Tz/nm2UCcS50LABEbAPBHPMoBJLURJiPjjCUKdwGwhYU4/xFZSRbmc1pkxFliPk1Pv1MBANcOwDfB9PTU/unpb4eRZu8D0JE558VnAov8QzlInqHruqrgX+MvGUgBK8I+LO0AAAGdaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjQ3MjwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj40NjI8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KWyaOKAAANtdJREFUeAHt3Q3MHdV54PHjFZEasDeYYCKjJPhFitnY2QZsINlEwgYjFTB2mwLlowoB6gZB2rSAIU1Q8pagKg0YyKYNiK0bIFnxEaBpAIdEisFGShs+bKhaE2G0YEiFtxgWhI2pBJL3PvP6uT5nPHfunXnPPTPPvf+R7Pk6X/M7972Pz8yc1zP2dBbHggACCCCAAAJRBf5L1NIoDAEEEEAAAQQyAQIsHwQEEEAAAQSGIECAHQIqRSKAAAIIIECA5TOAAAIIIIDAEAQIsENApUgEEEAAAQQIsHwGEEAAAQQQGIIAAXYIqBSJAAIIIIAAAZbPAAIIIIAAAkMQIMAOAZUiEUAAAQQQIMDyGUAAAQQQQGAIAgTYIaBSJAIIIIAAAgRYPgMIIIAAAggMQYAAOwRUikQAAQQQQOAACBBAIBTY/Oyv3XMvbnOzDjrInb70hPBkA3sPbXjM7Xz7bXfUxDy3aMHHG2gBVSKAQB0BRrB11Mgz0gISXG+9+1736K+eaMV1SjukPdIuFgQQsCNAgLXTV7QUAQQQQMCQALeIDXUWTUWgLQIzZsxwe/bsCZpTdEwT+Odku9eSL7NXOo4jYEGAAGuhl2gjAi0R0EApgVC3i5pWdk7S9wuk/fIX1ckxBNomQIBtW4/QnlYJbN32knvw0Y3ulf941R3+ocPciZ86rvBFo+07XnMbnnjSPfWvW7L2H/vfF7qlxx/n5s45tHs9mkYOrDhxSVaupF/9Rxd008kLTU/92xa3c9fUS00rTlraSV28aHl+nVLuzAMP7Ga4a93D2ba0ZdOWZ7PnyitPWuKWdParLr2CnhzXJb+tgVjO++eK9uWYBl7Np/tyjgUBawIzOh/g8D6PtSugvQhEFpCgJC8VyVvE8vZufjnv9NPcF88+s3tYguKav7+9u+9vSPDUN5Hl7eTLv3V9dvqoI+e5517Ylm3f+NUrs6B98eQ3u8eyE3v/0nZcfM5Z7tzlp2ZHtU45N3/eEW77azs6/wjY4aTcG76yuhtkl37+oiy9X59fjl9P2Xav4Orn8dP425LG3/e38+f88vqdy6dlH4G2CTCCbVuP0J7WCEhwlRHkxXuDqYxkJfDe+dBPnYxQZcqMjCI1uErgkhGkLJpWzi1euKA7Qs1Odv6SsiX4Hn7YnM65OU6CugRcCZhSjgRlKVvqevCRDZotW2udkvaGv1idBdhdu3e7ye/enI1SpW4NxJpRgq+UK1N9/BGunq+ylgApS9V/m+cDa5U6SYuARQECrMVeM9ZmHUW1tdkbfvj9wqYd/qE57ooLz++ek6Alt2PlVqusJcBq8JMg6gc1P62k8Ue8UuDqiy4IbjXL7WVZzltxWnfEK7eXpf5NW7Zko9MsQecvTSvBXEavskjQ/MOVy7O2yXm/LXJeys0fk+N1FgmsGmQHya9p8/n0uJSh21WD9iD1kwaBpgQIsE3Jj1m9vYJYmxnmHjpnv+bJyFUCrM5J1bUczy/5tP75/C+M0NvFMsLML9IOGYHqos9cZXQrf/KLluUfLyrXPz/dbQmQgwRHP8hq+kHzTreN5EcgtQABNrU49ZkWkJePZJk186Bgrcezg3v/0mOa1j+X39bnrDt37cqf2m9fy5NRc1Fg3y/DkA/0C5B+UB1yUygegVYJ8IsmWtUdNKZNAjJSlbeIdZHnnPJ8UxYdER77iamRqxyX87r4aTWNnitaL/7EguzwA49Mla9ppH5ph79oefJik9wmllu/8kcC7uGd28qxbgX7dfba9oOrbOsfHZ32yifHNW1+uywP5xCwJMAI1lJv0dbkAlf89ZrgxSV5OUmezerLTPIy0oOPbsheUDr38q90j0vAlbTy9q6+RVzWeHkzecPjT2bB9LzVUs5S98qrO7Jj+Xx+nV/8xjVBWqnzxq/ODJ7v5vPX2ddRaNFayxskqGpaWfdL7wdvPx/bCFgRIMBa6SnamVxAgt4rO3YEzzlllChv4/pv4sq0mFvvuS974cl/Juq/gdyv8fKy0jV/eom79Uf3Zc9b5W1lWZZ25t0e3nnL2C9Xjkuddz449QxW0+obyPnnu5I+xqLBVcvK7+txf90riErwLFo0PcG1SIdj1gSYB2utxwy2V94itviSk1LLtJjtnUAr02n8Xxyh5/21zHWVZTpBTm4Lyy1mCbp+IPfr8bdj1OmXxzYCCMQRYAQbx5FSRlhAgmq/wKqXP53AqmXo1Bvd77eOUWe/OjiPAALVBXjJqboZORBAAAEEEOgrQIDtS0QCBBBAAAEEqgsQYKubkQMBBBBAAIG+AgTYvkQkQAABBBBAoLoAAba6GTkQQAABBBDoK0CA7UtEAgQQQAABBKoLEGCrm5EDAQQQQACBvgIE2L5EJEAAAQQQQKC6AAG2uhk5EEAAAQQQ6CtAgO1LRAIEEEAAAQSqCxBgq5uRAwEEEEAAgb4CBNi+RCRAAAEEEECgugABtroZORBAAAEEEOgrQIDtS0QCBBBAAAEEqgsQYKubkQMBBBBAAIG+AgTYvkQkQAABBBBAoLoAAba6GTkQQAABBBDoK0CA7UtEAgQQQAABBKoLEGCrm5EDAQQQQACBvgIH9E0ROcE111zTLXFycrK7LRv+OdnnPD7yOdCFz8e+nx0x4eeDnw/92ZD1OP185D/7vkObtmfs6SwpGyQfAis4KV1Gua6ln7/Ibfjh90f5Erk2BBBIJGAphiQPsIn6gGpaJECAbVFn0BQEEEgmwDPYZNRUhAACCCAwTgIE2HHqba4VAQQQQCCZAAE2GTUVIRBf4KENjzm5BX/DbT+IXzglIoDAtASSB9j8m27Taj2ZERhzgaf+bUsmsOHxJ8dcgssfFwFLMST5NJ1x+RBwnQikEFh90RfcURPz3OKFC1JUF9QxY8YMl5+EUHRMMhUdLzqmaf2KpA5JW7Tk6y9KwzEEmhIgwDYlT70IRBCYeeCB7tzlp0YoabAiegXFfrk1SPYKiPlyNZ0fWPVYUV35/EVpOIZAagECbGpx6mu1wPYdr7kNTzzpZh10UDYqvPOhn7pX/uNVd/iHDnPnnX6amzvnUHfXuofdU/+6xc2aeZA79hML3elLTwiuScuQNLJI3hM/dZxbtODj3XSbn/21e+7FbUE9O99+2/3ln1ySpZEyHnxkw1SaTj0ySpVAKnXLokHVL0fboWlWnLjEPfjoxtK2ZoUN+FdREBs0APpV+Hny22VB1C8jvy35itqXT8c+AikFmAebUntM67I0D1YC1uXfut4ddeS8TmDd4STo6SJBd/68I9ymLc/qoWy9+o8u6AbZrdteclf89Zosn9621fTX/Oklbsnxx2V5JAjeeve9neA7x+3ctbtbj/xCjo2dAD/5N7cEdciOtOm5F7Zlx/UXd2g5UtcNf7E6OyfessgxrTs70Pnr4nPO6gZnPTbIOh+8eu3nj5eV7afNb/v5NHj6x2S7KBj75eTTs49AagFGsKnFqc+EgASyFSctdVdceL7zg6Zs/69rJ7NA+5d/e4uTl4sefHRDN8BKAF590flu/sRENtqVi5U8X/z6Ne7OTlDVAKsIEsQlEK48aUlnRDzT/d/XXndrvj/1RvDSzqj34rPPysqRwD/53Zs120DrXe/sdnfdeF1nlHxgp8w7um3V0e9AhdRIlA9ysi9LUUAsKl7T5cvR45JHyyzKzzEE2iKQ/C3itlw47UCgn8DFZ5+ZJZGgKX9kkduuur3ypKVyqDuqzHY6f0kQlZGvTKGREaaOInX0qelkLaPia758aZZHbiE/98ILWV45LreL5Za0LHJORp9VlvM6t5QlvzynPfH4Y7OsEtCnu2jg0yCn+1quBEI9J8f8wKhpytZ+3rJ0nEOg7QKMYNveQ7SvMQEJTPlFnruWLTJalVu/GlTL0so5CdZ+Pa90nr3q8WzD+2tpJ0iu+fvbvSPlmzIi1sXf1mN11xow84HUL0/PaVr/nGzng3L+vO77wdbf1vOsEWizQPIRrKU5TG3uONrWTgF5KUqCq9z2lVvJ8qz0oVv/tnJjt7+2/0hz0945r5ULG3KGXkG01/FBg6s0W8rQcnRb10O+LIpvqYClGJI8wLa0z2gWAlEE9Bc+/OHK5d1byVUC49K9L0HJrVx9G1gatmv37uwZbpRGRiqkSqDUKv08sq1/NIhqOtYIjIIAt4hHoRe5htYI6Ju7t95zb/aC0iuv7nB3PrRu4PbJM1N51iq3meWPvEA199A52YtS/hvNAxcYKaEEwHxwHDQoaj5da5MGyS95Bl3y5Q+aj3QIDEuAEeywZCl3LAUkOMrUG3mhSab7yDPT805fXslC3vKVKT06VUie6y7+xILKLzlVqnSAxBpk6wYyP7+UUfRHm6F1SB4NxIOk1/ysEWiDAPNg29ALI94GS/NgY3WFBEW5rZt/iWk65ev8WAngd6759nSKIi8CCCQQ4BZxAmSqGD8BncpT58r1tzPl56s+8MjGrLjFCxfWKZY8CCCQWIAAmxic6hAoE5BR75rv3579Fin5lY360pM8i5UXn2R+rPzKRhYEEGi/AAG2/X1EC8dIQObErjhxafZykzzH9X85hbxAJc949ZdPjBELl4qASYHkAVbmME1OTprEotEIpBCQW8PyR37h//YdU/NhYz7LTXEN1IHAsAQsxZDkAXZY6JSLwKgJyEiV0eqo9SrXM04CTNMZp97mWhFAAAEEkgmM5AhW5suxtEtgxv++rV0NojUIIDAUAZ23PJTCjRU6kvNgJcC+++5bxrqC5iKAAAK2Bd73vv/a/cUgtq8kTuu5RRzHkVIQQAABBBAIBAiwAQc7CCCAAAIIxBEgwMZxpBQEEEAAAQQCgeQB1tL/5RdIsYMAAggg0LiApRiSPMA23js0AAEEEEAAgQQCBNgEyFSBAAIIIDB+AgTY8etzrhgBBBBAIIEA82ATIFMFAgggMA4CzIMNe5kRbOjBHgIIIIAAAlEECLBRGCkEAQQQQACBUIAAG3qwhwACCCCAQBSB5AHW0hymKMIUggACCCAQTcBSDEkeYKMpUxACCCCAAAItFiDAtrhzaBoCCCCAgF0BAqzdvqPlCCCAAAItFmAebIs7h6aNlsDd636RXdCS449xc+d8sPTi1m38J7dz1243f95H3aKF80vTchKBtggwDzbsCUawoQd7CAxNYO19Dzr5s/3V1/vWsfGJp7O0W7e9nKWVYHvpN29wn/uTr7qt237TNz8JEECgeQECbPN9QAsQ6Cuw/bXX3dYXX3Y7397tNm95rm96EiCAQPMCBzTfBFqAAAL9BObP+4j7+qUXdka/r7lzlp/cLznnEUCgBQLJR7CW5jC1oH9oAgJdgSXHHd3a4CrP3sqWovNFx6QMOe7/KTqm58vq5NxoCliKIYxgR/MzyFUNIKAvEslLR/Jc87Enn85uwcpocfnSz+73IpKm0WegvdLJ81Ipe/OzU7dyFy04yi1f8pmeLcrSdm77yu1fLbMocf4lqc1btnba/XL2IpSkX7fxl0EZ+Reptu943a3b8MvsWmcddKD72BEfyQK2ljvIyFgC27vvvlXUvNJjkqcsb/6c1iHHddFjuu+v8/n9c2wj0JQAAbYpeeptXEBeJNr87Fb32KZ/yZ5vaoPk2N0/XZ/dkpVRoywSBG+6/R43FZg+7Ha9859ZmnUb/9ndPLm6G4wliF16zZos0Pnl3fPwet0N1vLikjxb1UXrlnryi7wgJYu8WSzBU4KrHFu0YH52HZpeytj41DPu5q+vdrNmTpWz8cln3LU336ZJsrUc86+9X4D1g5gf+LTQ/LFeAdFPl9/ulUfr6LWWfFJW3fy9yuU4AtMRIMBOR4+8IyEgAW7VmSuy0ZwEyLX3PuAk+Hznjnvcoo/Pz4KUjkBPWHx0N2jJyE8CnIwKV521MrO46fa7p0aREx91q85YkU2xkRHvd37wI7fTC6SSWPJL3RJMV521IhvlSv0S3KXMQRcJqNp+GdVeteZ72ZvKj216JitTRtRyLbLIPxikrRKgJe21t4RBt1edRcHLD2b5837g1DI1va79PP62pC/Knz+m5fjl58vRc6wRaEIg+TPYycnJJq6TOhHoKSC3g3X0JoHnz88/Owt62Ru7v97azSdB9vmX/j0LjBIct7/2/7JzestYApkEO1k0uMp29oLSJRfIZrDI6FGWs09d1r2FLPVf9oU/cHMPK58n6xc0vxPMtf0yZ1b2ZZH2yLK5cw1yLRLI5UUpqUMWSSuBfdiLBL18cCyrUwKnBk9dS3o97h8rK4dzoylgKYYwgh3NzyBXVUFg7qGHBKnlturHjvhwFizlrV1ZZES79r4HSuewSvDVJf/LITSo6XlZ661hueWbX+Ye+sHSuvz0M9//W/6uy+/rNcg15RcZkcut7+ksOmrUdb4sCYhVAmyvcvLlso9A2wUIsG3vIdrXiIA8Y/UXucUqo8BzTuuMNve+AJV/rjnzoPd3s8joUZ9/dg/mNmREKWXu3D010sydjr4rc2nzi4xuYy0aSAcZYQ4aRP3A7G/HajPlIDBMgeS3iId5MZSNQB2BdY9N/VpCzZu9nbv3eemihUdlzyolEMqizy9l+/m9v2VJtmWRW8H6cpK8FOUv+qauf0xeTpIl/7xVbjnrrWY/fd1teUtaFvkNUn475B8BvV6+GrSuQQOlX16VPBKsNWDrtq79MtlGoI0CyUewMofJ0j30NnYabYorIIHn0mvXuOUnfCZ7rqoBT14IkqCZjUb3jjZvuuNHbsmxR2dv8MobxPlFnqfKi0/yR6bpyBSd51/6TXaLeb+0p52cHZdg+vmvfLNbv0wXirnI7Wl5CUrbJf+gkFvQcktb/+FQp76iQKnBsFd5fh7Z1qVfPk3HGgFLMSR5gOXjgUDbBCSQygtLEoB0kdvAq844PduVW73yMtDae6feGJYALCNVDaaaR9b6spGMDCVw6khUApwEXN2XtNnLT52XjvTZrtYv7ZGgKG8Tx1qkXXMPOzQbscqz311vv5NN75G5sFpvWV0SAP3gKGkHDYqaT9dazyD5/SCs+Xqt8+X3SsdxBFIJJP/fdFL862PGjBkD//Cngqae9glcdf33soCnU1zk1qwEHnkZqNfzU7l9LEv+Jaaiq6uSdpC6i+qY7jF9jixvLf/w29/oW5wGMV3nM/gBUQOon9Y/n88r+xrIdVvT9MpXVIfmYZ1eQPppz549Q604RQyJdQGMYGNJUo55ARlR9lsGCaxaRpW0g9St5dZZZ8+VO8+MdYStZejt8EUL/pseKl1rQNN1PnHRcf+Yv53Pq/tFaYqOaXpZ9zvvp2UbgVQCyQMsz19TdS31IDAlIM+Qb/rB3Xt/+cS/uBMWfzI7Ic9i5fmz3O6Wt6NZELAgYCmGJA+wFjqQNiIwSgJyu1te4JKAKs9fdf6tXKO8yey/GT1K1821INC0QPJnsCkumGewKZSpw6KA/CpG/Q/fy541W7w22ty8QIpnsM1f5eAtIMAObkVKBBBAAIESAQJsiJP8F03IG2AsCCCAAAII1BGwFEOSB9g6oORBAAEEEEDAmgAB1lqP0V4EEEAAARMCBFgT3UQjEUAAAQSsCfCSk7Ueo70IIIBASwV4ySnsGEawoQd7CCCAAAIIRBEgwEZhpBAEEEAAAQRCAQJs6MEeAggggAACUQSSB1hLc5iiCFMIAggggEA0AUsxJHmAjaZMQQgggAACCLRYgADb4s6haQgggAACdgUIsHb7jpYjgAACCLRYgHmwLe4cmoYAAghYEmAebNhbjGBDD/YQQAABBBCIIsB/uB6FMV4hBxwwy8n/Z+sve/bs8Xc5j0/weeDzYffn49133wr6kp3REuAWcQP9KbdRev1gSYB9772dDbSKKhFAIKVA2fdAynbErItbxKFm8lvEluYwhVRx9uQDKIuu86XmR6/58+wjgMBoCOTvPIzGVQ3/KizFkOQBdvj87a0hH1Tz++1tOS1DAAEEEKgqwDPYqmLTSK+3hSWw6vY0iiMrAggggECLBRjBtrhzaBoCCCCAgF0BXnJqoO/KRrC85NRAh1AlAg0IlH0PNNCcKFXKNfFseR8lI9h9FmwhgAACCCAQTYAAG42SghBAAAEEENgnQIDdZ8EWAggggAAC0QSSB1hLc5iiKVcoiHmwFbBIioBhAZ5V1us8SzEkeYCtR0ouBBBAAAEEbAkQYG31F61FAAEEEDAiQIA10lE0EwEEEEDAlgDzYBvor7L5b8yDbaBDqBKBBgTKvgcaaE6UKpkHGzIygg092EMAAQQQQCCKAAE2CiOFIIAAAgggEAoQYEMP9hBAAAEEEIgikDzAWprDFEW4YiHMg60IRnIEjAowD7Zex1mKIckDbD1SciGAAAIIIGBLgABrq79oLQIIIICAEQECrJGOopkIIIAAArYEmAfbQH+VzX9jHmwDHUKVCDQgUPY90EBzolTJPNiQkRFs6MEeAggggAACUQQIsFEYKQQBBBBAAIFQgAAberCHAAIIIIBAFIHkAdbSHKYowhULYR5sRTCSI2BUgHmw9TrOUgxJHmDrkZILAQQQQAABWwIEWFv9RWsRQAABBIwIEGCNdBTNRAABBBCwJcA82Ab6q2z+G/NgG+gQqkSgAYGy74EGmhOlSubBhoyMYEMP9hBAAAEEEIgiQICNwkghCCCAAAIIhAIE2NCDPQQQQAABBKIIJA+wluYwRRGuWAjzYCuCkRwBowLMg63XcZZiSPIAW4+UXAgggAACCNgSIMDa6i9aiwACCCBgRIAAa6SjaCYCCCCAgC0B5sE20F9l89+YB9tAh1AlAg0IlH0PNNCcKFUyDzZkZAQberCHAAIIIIBAFAECbBRGCkEAAQQQQCAUIMCGHuwhgAACCCAQRSB5gLU0hymKcMVCmAdbEYzkCBgVYB5svY6zFEOSB9h6pORCAAEEEEDAlgAB1lZ/0VoEEEAAASMCBFgjHUUzEUAAAQRsCTAPtoH+Kpv/xjzYBjqEKhFoQKDse6CB5kSpknmwISMj2NCDPQQQQAABBKIIEGCjMFIIAggggAACoQABNvRgDwEEEEAAgSgCyQOspTlMUYQrFsI82IpgJEfAqADzYOt1nKUYkjzA1iMlFwIIIIAAArYECLC2+ovWIoAAAggYESDAGukomokAAgggYEuAebAN9FfZ/DfmwTbQIVSJQAMCZd8DDTQnSpXMgw0ZGcGGHuwhgAACCCAQRYAAG4WRQhBAAAEEEAgFCLChB3sIIIAAAghEEUgeYC3NYYoiXLEQ5sFWBCM5AkYFmAdbr+MsxZDkAbYeKbkQQAABBBCwJUCAtdVftBYBBBBAwIgAAdZIR9FMBBBAAAFbAsyDbaC/yua/MQ+2gQ6hSgQaECj7HmigOVGqZB5syMgINvRgDwEEEEAAgSgCBNgojBSCAAIIIIBAKECADT3YQwABBBBAIIpA8gBraQ5TFOGKhTAPtiIYyREwKsA82HodZymGJA+w9UjJhQACCCCAgC0BAqyt/qK1CCCAAAJGBAiwRjqKZiKAAAII2BJgHmwD/VU2/415sA10CFUi0IBA2fdAA82JUiXzYENGRrChB3sIIIAAAghEESDARmGkEAQQQAABBEIBAmzowR4CCCCAAAJRBJIHWEtzmKIIVyyEebAVwUiOgFEB5sHW6zhLMSR5gK1HSi4EEEAAAQRsCRBgbfUXrUUAAQQQMCJAgDXSUTQTAQQQQMCWAPNgG+ivsvlvzINtoEOoEoEGBMq+BxpoTpQqmQcbMjKCDT3YQwABBBBAIIoAATYKI4UggAACCCAQChBgQw/2EEAAAQQQiCKQPMBamsMURbhiIcyDrQhGcgSMCjAPtl7HWYohyQNsPVJyIYAAAgggYEuAAGurv2gtAggggIARAQKskY6imQgggAACtgSYB9tAf5XNf2MebAMdQpUINCBQ9j3QQHOiVMk82JCREWzowR4CCCCAAAJRBAiwURgpBAEEEEAAgVCAABt6sIcAAggggEAUgeQB1tIcpijCFQthHmxFMJIjYFSAebD1Os5SDEkeYOuRkgsBBBBAAAFbAgRYW/1FaxFAAAEEjAgQYI10FM1EAAEEELAlwDzYBvqrbP4b82Ab6BCqRKABgbLvgQaaE6VK5sGGjIxgQw/2EEAAAQQQiCJAgI3CSCEIIIAAAgiEAgTY0IM9BBBAAAEEoggkD7CW5jBFEa5YCPNgK4KRHAGjAsyDrddxlmJI8gBbj5RcCCCAAAII2BIgwNrqL1qLAAIIIGBEgABrpKNoJgIIIICALQHmwTbQX2Xz35gH20CHUCUCDQiUfQ800JwoVTIPNmRkBBt6sIcAAggggEAUAQJsFEYKQQABBBBAIBQgwIYe7CGAAAIIIBBFIHmAtTSHKYpwxUKYB1sRjOQIGBVgHmy9jrMUQ5IH2Hqk5EIAAQQQQMCWAAHWVn/RWgQQQAABIwIEWCMdRTMRQAABBGwJMA+2gf4qm//GPNgGOoQqEWhAoOx7oIHmRKmSebAhIyPY0IM9BBBAAAEEoggQYKMwUggCCCCAAAKhAAE29GAPAQQQQACBKALJA6ylOUxRhCsWwjzYimAkR8CoAPNg63WcpRiSPMDWIyUXAggggAACtgQOsNVcWotAMwLrNv6T27lrt5s/76Nu0cL5zTSCWhFAwJQAI1hT3UVjmxLY+MTTbu19D7qt215uqgnUiwACxgSSB9jJyUljRGmby3OZtN7UhkBTArxvUU/eUgxJHmDrkZILAQRiClx1/ffcyRf+mbt73S9iFktZCCDgCRBgPQw2EUAAAQQQiCUwNi85vfjiNnfvvT92V1112UB2kn5iYl5p2rVrb8/SLFu2tDQdJ9stIC8vyUtMz7/0G7fzbXmR6SNu+dLPurlzPti34YPk1VHi8iWfyerZ/OxzbtZBB7rlSz6bvTC18cln3GNPPp3VvWjBUZ3jn3GzZh4Y1D1IPfoi1pLjj3FShzw3lsUvc/OWrdlz5O2vvZ6dk3SySH1SLwsCCMQTSP67iGUO07DvocuzjXfffStQWr9+gzvllJX7HQ8SeTvz5/92Jxhf7latusA7Gm5KeSeddOLAQVtzl/0O0rJzmp91PIGt237jvrLm5r3Bbb7b9c5/uq0vvpwFwG+vvjQLtlKb3FLd/OxWt+rMFe6c5SdnDRg0r9yKlWXRgvlZGdnO3r+WHHe0kwDrLxLcL/vCH3QPDVqPtrFXPV+/9MLslrC8rJVfJM91V34pf5j9IQqM4u8dT/G7iFPEkFjdzi3iHpI///kDpcG1R7bssHzIJKCztF/g2ltuy4LrZRecnQWYm79xhTvntGXZsbX3PlB6AVXzSvD+8d98K/szf+KjWdkSXKXuX9z2P7PgLQfXbfhlNiVIK69az/Mv/bu7bvWXgjKlnu07XncyupVzWr8Ec9lfddZKrY41AghEEhi7ACujzsMOO8Jdd91NXcKrr57Mjn36U0vcpk1To4m1a29zcgtYFkkreWRUe8klX3aSXpd/uP8fs3NSrtxWlrUsV39tsptf07Jul4DcLt3+6utZsPFvj2qwkRGr3JotWurkPfvUZdmtWLkde8LiT2bFSqDTunVkLCckSMpSp57lS/5Hd66uli1lybXKbW+Zxzvz/b8lh9zcQw/J9uW2OAsCCMQVGJtnsMr2V3/1Tff0089kgVKex0rwfOH/bHOvvvpStr3m+pvcXXff0Qm0T7sPfODgLOCuWfMd9/DDP3FHHjnPnXvu+Vkg1fImJua5Xz2+MQu+8oz3yisvz0avv3/G7zmezapSO9c6p1VuCett3HxLJdAV/WKJOnlnHRg+V5W6NNDl69X9OvXM9OrJP8vVclkjgMDwBZIH2GE/f+1Htnjx0e7NN9/sJnvkkUezgHjf+37cPXaXu6O7vX79o27Rok86ySeLPHOVPLocs2jquARfWTSoLl58TN+XpLIMub/27Nnj3ntvZ+4ou8MUmHvYB93yE4pf8JFzZct08paVmz+Xqp58vewPT6DoXZHh1TY6JTcdQ6pIJg+wVRqXIq0EzImJee6WW76bjVY1UGrdy5ad6GQEK7eO5ZwfXDUNa5sC8jxSXviRW6eLFh7VfaFJ39j1b9nmr3A6efNlle2nqqesDZxDAIF6AmMfYP/4jy90p57yu06ev77QeYa6evWfB28Fy8hVjp166u+6gw/+QBZk+1HLKFae1a5adWFQVr98nE8rIM8j5YWmu3+6PnuTWJ5dyrLxqc4LQZ2gK0uvIDudvFnBA/41rHrkmas8Y77n4fXdlvS61m4CNhBAoJLA2ARYCXo6dcffnj374OwZqoxQDznk4O5t3Z/9bN8bpBKEdf6sBM5DDpmdIftp/O277vqB27z5mc6t5anbx5V6hMRJBeSFJnlmKYFGAq0u8nat/4KQHvfX08nrl9Nvexj1nHDcMZ05uf889bZ0ZxQv03QIsP16gvMIVBMYm3mw1Vj2pZbA++lPn9ANsH/3d7e7u+66o/usdV/KwbfK5rqWnRu8BlLWEZD5prvefsd97IgP7/eLHvqVN528/cr2z8euR95SlqXONfvtYru6APNgq5tJDkvzYMdmBFuvK132ctOvfvVY50WoqRebHu+8MTwxMa9uceRrscB0pqpMJ28Vktj1FL0hXaU9pEUAgd4CBNjeNt0z8hxW3yLuHmQDAQQQQACBEoGx+0UTJRacQgABBBBAIJpA8mew0VpeUlDb55eVPWcdxecyJV3FKQTGVqDse8AqilyTzOVnmRJgBMsnAQEEEEAAgSEIEGCHgEqRCCCAAAIIEGD3fgbk1kbVpU6eqnWQfvQEBvncDJJm9GS4IgRGSyB5gJU5TE0u8sVV9Efa1Ot42bl8Hr02OV5nkefHLHYFtN/znwt/X65O0+mV+uf1XNExP71us7YpwLPKev3WdAyp0uqxmqYjX1j625yqIGlazZsvJ78v6SVt0XEti/XoCfj9rZ+VQa8yn94vq6gMPl9FKhxDoF0CYxNge31hyfGiJf+FJ2n8tP62f87Px5dgkexoHuv1+RrkavOfJc1TdJzPl+qwRqD9AmMTYMu6wv/SknRFX2xyXNPlv0zz+5KWZXwFen1+ikTkM6WfKz3vf578bT3PGgEEbAiMzTzY/BfVoF+C+uXn5y/Kq+ny3e7n03NFx/Qc82BVwta6V5/6x/3toquT87LoZ6lfekk7SBpJx9I+gVHsO7kmni3v+6yN9QhWv8j2cYRb8mEpWvrlK8rDMQT6CejnSj93/r5u9yuD8wgg0B6BsQ6w0g36ZeZ3SdmXWVF6yVuWxy+bbQR6CeQ/W/6+bPMZ6yXHcQTaKZB8mk4bGeSLS//0a5+fTr/wdN0vL+cR8AX8ACrH9XNUtNZjfn62EUCg3QLJA2xTc5jkCyr/haZdI8f1jx7z13Ku6AuuV3mat1c+PV+0Zh5skUr7jxV9vqr2f1H6onJVoyi9nmPdfgGeVdbro6ZiSJ3WjtUtYv2y8oOlv62A8sVVtPjH/XxFx/nyKxIc7WP6+dKr9D8jesz/rOSPafp8Gr9cP41uazmsEUCgXQJjFWCFXr+UdF3UHflzuq/rfJ6i40XH8vnYHz2Bsn7vdS5/PL8vSvlj+f3Rk+SKELAvkPwWsX0yrgABBBBAAIH+AmMzD7Y/RboUZbePmQebrh+oCYEmBcq+B5ps13Tqlmvi2fI+QUaw+yzYQgABBBBAIJoAATYaJQUhgAACCCCwT4AAu8+CLQQQQAABBKIJJA+wluYwRVOuUBDzYCtgkRQBwwI8q6zXeZZiSPIAW4+UXAgggAACCNgSIMDa6i9aiwACCCBgRIAAa6SjaCYCCCCAgC0B5sE20F9l89+YB9tAh1AlAg0IlH0PNNCcKFUyDzZkZAQberCHAAIIIIBAFAECbBRGCkEAAQQQQCAUIMCGHuwhgAACCCAQRSB5gLU0hymKcMVCmAdbEYzkCBgVYB5svY6zFEOSB9h6pORCAAEEEEDAlgAB1lZ/0VoEEEAAASMCBFgjHUUzEUAAAQRsCTAPtoH+Kpv/xjzYBjqEKhFoQKDse6CB5kSpknmwISMj2NCDPQQQQAABBKIIEGCjMFIIAggggAACoQABNvRgDwEEEEAAgSgCyQOspTlMUYQrFsI82IpgJEfAqADzYOt1nKUYkjzA1iMlFwIIIIAAArYECLC2+ovWIoAAAggYESDAGukomokAAgggYEuAebAN9FfZ/DfmwTbQIVSJQAMCZd8DDTQnSpXMgw0ZGcGGHuwhgAACCCAQRYAAG4WRQhBAAAEEEAgFCLChB3sIIIAAAghEEUgeYC3NYYoiXLEQ5sFWBCM5AkYFmAdbr+MsxZDkAbYeKbkQQAABBBCwJUCAtdVftBYBBBBAwIgAAdZIR9FMBBBAAAFbAsyDbaC/yua/MQ+2gQ6hSgQaECj7HmigOVGqZB5syMgINvRgDwEEEEAAgSgCBNgojBSCAAIIIIBAKECADT3YQwABBBBAIIpA8gBraQ5TFOGKhTAPtiIYyREwKsA82HodZymGJA+w9UjJhQACCCCAgC0BAqyt/qK1CCCAAAJGBAiwRjqKZiKAAAII2BJgHmwD/VU2/415sA10CFUi0IBA2fdAA82JUiXzYENGRrChB3sIIIAAAghEESDARmGkEAQQQAABBEIBAmzowR4CCCCAAAJRBJIHWEtzmKIIVyyEebAVwUiOgFEB5sHW6zhLMSR5gK1HSi4EEEAAAQRsCRBgbfUXrUUAAQQQMCJAgDXSUTQTAQQQQMCWAPNgG+ivsvlvzINtoEOoEoEGBMq+BxpoTpQqmQcbMjKCDT3YQwABBBBAIIoAATYKI4UggAACCCAQChBgQw/2EEAAAQQQiCKQPMBamsMURbhiIcyDrQhGcgSMCjAPtl7HWYohyQNsPVJyIYAAAgggYEuAAGurv2gtAggggIARAQKskY6imQgggAACtgSYB9tAf5XNf2MebAMdQpUINCBQ9j3QQHOiVMk82JCREWzowR4CCCCAAAJRBAiwURgpBAEEEEAAgVCAABt6sIcAAggggEAUgeQB1tIcpijCFQthHmxFMJIjYFSAebD1Os5SDEkeYOuRkgsBBBBAAAFbAgRYW/1FaxFAAAEEjAgQYI10FM1EAAEEELAlwDzYBvqrbP4b82Ab6BCqRKABgbLvgQaaE6VK5sGGjIxgQw/2EEAAAQQQiCJAgI3CSCEIIIAAAgiEAgTY0IM9BBBAAAEEoggkD7CW5jBFEa5YCPNgK4KRHAGjAsyDrddxlmJI8gBbj5RcCCCAAAII2BIgwNrqL1qLAAIIIGBEgABrpKNoJgIIIICALQHmwTbQX2Xz35gH20CHUCUCDQiUfQ800JwoVTIPNmRkBBt6sIcAAggggEAUAQJsFEYKQQABBBBAIBQgwIYe7CGAAAIIIBBFIHmAtTSHKYpwxUKYB1sRjOQIGBVgHmy9jrMUQ5IH2Hqk5EIAAQQQQMCWAAHWVn/RWgQQQAABIwIEWCMdRTMRQAABBGwJMA+2gf4qm//GPNgGOoQqEWhAoOx7oIHmRKmSebAhIyPY0IM9BBBAAAEEoggQYKMwUggCCCCAAAKhAAE29GAPAQQQQACBKALJA6ylOUxRhCsWwjzYimAkR8CoAPNg63WcpRiSPMDWIyUXAggggAACtgQIsLb6i9YigAACCBgRIMAa6SiaiQACCCBgS4B5sA30V9n8N+bBNtAhVIlAAwJl3wMNNCdKlcyDDRkZwYYe7CGAAAIIIBBFgAAbhZFCEEAAAQQQCAUIsKEHewgggAACCEQRSB5gLc1hiiJcsRDmwVYEIzkCRgWYB1uv4yzFkOQBth4puRBAAAEEELAlQIC11V+0FgEEEEDAiAAB1khH0UwEEEAAAVsCzINtoL/K5r8xD7aBDqFKBBoQKPseaKA5UapkHmzIyAg29GAPAQQQQACBKAIHRCmFQgYSkH/d6aLb7777lh5ijQACCCAwQgKMYBN2Zj6Y5vcTNoWqEEAAAQSGLJA8wFqawzQMew2qus7XwTzYvAj7CIymAPNg6/WrpRjCLeJ6fTytXL2CqxYqLzr5Sz7o5n8wOT/D53L47Ak8+Hy0+/MRdBY7IyVAgG1Zd0rwfe+9nUGr8gGZ8/j4HxA+H+F7DNZ+Pvy+ZHu0BJLfIh4tPq4GAQQQQACBYgHmwRa7cBQBBBBAoKIA82BDMEawoQd7CCCAAAIIRBEgwEZhHE4hOld2OKVTKgIIpBbgZzq1eLP1EWCb9e9ZOz+IPWk4gYBpAX62TXdfpcYnf4tY5jBNTk5WauS4JfZ/AP3tcXPgehEYVQH5uc6//T2q1xr7uizFkOQBNjb2KJYnP3gaWPkhHMUe5prGVYCf6/HqeW4Rt7S/Cawt7RiahcA0BfjZniagoewE2BZ3Fj+ILe4cmoZADQF+pmugGc7CPFjDnUfT7Qq8+OI2NzExb78LuO66m9xZZ31uv3Pr129wkmfVqgv2y8MBBNoiILfA87+qtC1ta6IdjGCbUKfOsRZYu/Z29zu/s7LQ4OqrJ90LL2zb79ymTU+7++77h/2OcwABBNorQIBtb9/QshEVkFHoz3/+QOnVyYhVX4gpTchJBBBorQABtrVdQ8OsClxyyZedjFJlkRGp7MsiQVO2N216pntMtk85ZWUWTM895wtZOhmtXv21qalsck7SyCIj2/nzfzv7I2WxIIBAuwWSB1hL/5dfu7uO1rVV4JBDZrv1v3g0a548U5Vg+8Ybb2a3eOXcm2++mQVbSbDm+pvc7INnZ3Mil518YpbnyCMn3O+f8XvZ9pVXXu6OPHJeti1/Pf74Y27ZsqXu+utv7B5jA4FxErAUQ5gHO06fTK41icCqVRdmo8xla090Z57xuazO++//R3f//T9xDz/8kyzAakPuu//H7mc/m7pdLLeOZYQ7e/bBbvHiY7IkEkx1kUAr5yYmJrIXnvQ4awQQaKdA8hFsOxloFQLxBCYm5rnFi45x1113oztm0dFORqZf69zyPfjgD3QC59FBRZJObgnLoreCgwTsIICAWQECrNmuo+FtFpBbvDKtRqbcnNHZfuONNzpTbC7cr8mrr7zMrVnznew57Jcu/bPu+UWdwDx79mz36U8t6d5O7p5kAwEETAgwD9ZEN9HIURaQ57ObNz+TPVv1r1MCtLzY5N8m9s+zjUDbBJgHG/YIATb0YA8BBBBAoKYAATaE4xZx6MEeAggggAACUQQIsFEYKQQBBBBAAIFQIHmAtTSHKaRiDwEEEECgaQFLMSR5gG26c6gfAQQQQACBFAIE2BTK1IFAR6DO7xaukwdsBBBohwC/yakd/UArRkhAgqL8v59FwbHomP4foUXnhCV/3E+v2yPEx6UgMDICTNMZma7kQtogIMHQD64aAPW4tLHqdj6Pf51+Wf5xthFoQkA+j/x/sPvkCbD7LNhCYFoC+WAn+/0WDcCSbpD0ks7Po/nyx+Q4CwKpBQiwoTi3iEMP9hCIJuAHPT/4+tv5yjRPPk1+P5+PfQQQaJ8AAbZ9fUKLRkhAAqMu+W0Npno+v/bT58+xjwAC7RdI/haxpTlM7e8+WmhBQAKpBlN/u6ztms5fl6XnHALjImAphjCCHZdPJddpRqDXyFWDtJkLoaEIjLlA8hHsmHtz+WMukA+e+X3h0VGrbvtr2WZBAAEbAgRYG/1EKw0ISGDMB0wddcpx3ZZL8bdlP39ejsmSL2/q6L6/e+Xbl4ItBBBoSoBpOk3JU+/IChQFRQ2ovc5poPTPax6BKjqueUYWkgszJyCfSebB7us2Auw+C7YQQAABBKYhQIAN8bhFHHqwhwACCCCAQBQBAmwURgpBAAEEEEAgFEgeYC3NYQqp2EMAAQQQaFrAUgxJHmCb7hzqRwABBBBAIIUAATaFMnUggAACCIydAAF27LqcC0YAAQQQSCHANJ0UytSBAAIIjIEA03TCTmYEG3qwhwACCCCAQBQBAmwURgpBAAEEEEAgFCDAhh7sIYAAAgggEEUgeYC1NIcpijCFIIAAAghEE7AUQ5IH2GjKFIQAAggggECLBUb2P1yXt9lYEEAAAQQQaEpgJAMs/11SUx8n6kUAAQQQUIGRnAerF8caAQQQQACBpgR4BtuUPPUigAACCIy0AAF2pLuXi0MAAQQQaEqAANuUPPUigAACCIy0QPIAa2kO00j3PBeHAAIIGBSwFEOSB1iD/UmTEUAAAQQQqCxAgK1MRgYEEEAAAQT6CxBg+xuRAgEEEEAAgcoCzIOtTEYGBBBAAAEE+gswgu1vRAoEEEAAAQQqCxBgK5ORAQEEEEAAgf4CBNj+RqRAAAEEEECgskDyAGtpDlNlTTIggAACCAxVwFIMSR5ghypP4QgggAACCLREgADbko6gGQgggAACoyVAgB2t/uRqEEAAAQRaIsA82JZ0BM1AAAEEEBgtAUawo9WfXA0CCCCAQEsECLAt6QiagQACCCAwWgIE2NHqT64GAQQQQKAlAskDrKU5TC3pI5qBAAIIILBXwFIMSR5g+ZQggAACCCAwDgIE2HHoZa4RAQQQQCC5wAHJa+xUqEP8ycnJoHo9rgc5j49+FmTN5+Man8Px88HPh/+BGLefD//a27rNPNi29gztQgABBBAwLcAtYtPdR+MRQAABBNoqQIBta8/QLgQQQAAB0wIEWNPdR+MRQAABBNoqQIBta8/QLgQQQAAB0wIEWNPdR+MRQAABBNoqQIBta8/QLgQQQAAB0wIEWNPdR+MRQAABBNoqQIBta8/QLgQQQAAB0wIEWNPdR+MRQAABBNoqQIBta8/QLgQQQAAB0wL/HzG35nQwBreVAAAAAElFTkSuQmCC" alt="" />

元素框的最内部分是实际的内容 直接包围内容的是内边距 内边距呈现了元素的背景 内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此 不会遮挡其后的任何元素。

提示:背景应用于由内容和内边距 边框组成的区域。

内边距 和 外边距都是可以选的 默认值是0 但是许多元素将由用户代理样式表设置外边距和内边距  可以通过将元素的margin 和 padding 设置为零来覆盖这些浏览器的样式 这可以分别进行 也可以使用通用选择器对所有的元素进行设置。

*{

    padding:0;
margin:0;
}

在CSS中 width 和 height 指的是内容区域的宽度和高度。增加内边距 边框 和 外边距 不会影响内容区域的尺寸。但是会增加元素框的总尺寸。

假设框的每个边上有10个像素的外边距和5个像素的内边距 如果希望这个元素框达到00个像素 就需要将内容的宽度设置为70像素。如下图所示。

#box {
width: 70px;
margin: 10px;
padding: 5px;
}

提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。

CSS内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性就是padding属性

CSS padding属性定义元素边框与元素内容之间的空白区域。


CSS padding 属性

CSS padding 属性定义元素的内边距  padding属性接受长度值或者 百分比 但不允许出现负值

例如 你希望所有h1元素的各边都有10像素的内边距 只需要这样

h1 {padding: 10px;}

你还可以按照 上 右 下 左的顺序分别设置各边的内边距 各边均可以使用不同的单位或百分比值:

h1 {padding: 10px 0.25em 2ex 20%;}

单边内边距属性:

也可以通过使用下面四个单独的属性 分别设置上 右  下 左 内边距:

padding-top //上内边距

padding-right //右边的内边距

padding-bottom//下边的内边距

padding-left// 左边的内边距

内边距的百分比数值

百分比数值是相对于其父元素的width计算的 这一点与外边距一样 所以 如果父元素的width改变 他们也会跟着改变。

CSS内边距实例:

1:所有内边距属性在一个声明中

<html>
<head>
<meta charset="UTF-8">
<title>链接</title>
<style type="text/css">
table td.text1 {
padding: 1.5em;
}
table td.test2 {
padding: 0.5em 2.5em;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="text1">这个表格单元的每个边拥有相等的内边距</td>
</tr>
</table> <table border="1">
<tr>
<td class="test2">这个单元格的上和下边距是0.5em 左右边距是2.5em</td>
</tr>
</table>
</body>
</html>

如果想要保持一个盒子的占有宽度不变,那么加width就要减padding 加padding就要减width

padding的区域有背景颜色 也就是说background-color 将填充所有board以内的区域

HTML 学习笔记 CSS样式(框模型)的更多相关文章

  1. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  2. HTML 学习笔记 CSS样式(定位)

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  3. HTML 学习笔记 CSS样式(相对定位 绝对定位)

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

  4. HTML 学习笔记 CSS样式(边框)

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

  5. HTML 学习笔记 CSS样式(链接)

    我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...

  6. HTML 学习笔记 CSS样式(字体)

    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...

  7. HTML 学习笔记 CSS样式(文本)

    CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...

  8. HTML 学习笔记 CSS样式(简介和语法)

    CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...

  9. HTML 学习笔记 CSS样式(外边框 外边框合并)

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

随机推荐

  1. 动态改变actionbar上menu的图标

    工作中遇到了一个需求是,在滚动的时候让actionbar上的图标进行变色.实现后在这里总结下思路. 一.先在主题中定义好Actionbar的style <style name="App ...

  2. 之一:CABasicAnimation - 基本动画

    嗷呜嗷呜嗷呜 // 将视图作为属性方便后面执行多个不同动画 _myView = [[UIView alloc] init]; _myView.layer.position = CGPointMake( ...

  3. Android中的Touch事件

    Android中的Touch事件处理 主要内容 Activity或View类的onTouchEvent()回调函数会接收到touch事件. 一个完整的手势是从ACTION_DOWN开始,到ACTION ...

  4. 操作系统开发系列—12.a.从Loader到内核 ●

    Loader要做两项工作,我们先来做第一项,把内核加载到内存: 1.加载内核到内存. 2.跳入保护模式. 首先编译无内核时: nasm boot.asm -o boot.bin nasm loader ...

  5. Android 视频播放器,在线播放

    1. Bilibili https://github.com/Bilibili/ijkplayer 1.测试的时候总是崩溃,不知道是我不会用还是怎么回事. 2016-04-15 2.AndroidVi ...

  6. ASP.NET处理301重定向方法 带示例 (demo)

    System.Web.HttpContext.Current.Response.Status = "301 Moved Permanently"; System.Web.HttpC ...

  7. Sql Server之旅——第八站 复合索引和include索引到底有多大区别?

    周末终于搬进出租房了,装了宽带....才发现没网的日子...那是一个怎样的与世隔绝呀...再也受不了那样的日子了....好了,既然网 安上去了,还得继续我的这个系列. 索引和锁,这两个主题对我们开发工 ...

  8. Log4j 输出的日志中时间比系统时间少了8小时的解决方法,log4j日志文件重复输出

    1. 第一个问题:时间少了8小时 Log4j 输出的日志中,时间比系统时间少了8小时,但是 eclipse 控制台输出的日志的时间却是对的. log4j配置如下: #all logger output ...

  9. linux的“自动化”

    h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...

  10. spring服务定位器类

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 功能:通过持有的Spring应用场景ApplicationContext,可在任何地方获取bean. 1. 服务定位器类:S ...