css基础知识（css样式 、优先级、盒模型组成）

[[{"txt": "\u57fa\u7840\u7684css\u77e5\u8bc6\u3002\u5199\u597dcss\uff0c\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u6539\u53d8\u9875\u9762\u7684\u6837\u5f0f\uff0c\u662f\u9875\u9762\u770b\u8d77\u6765\u66f4\u52a0\u7f8e\u89c2\u3002\u4f8b\u5982\u4e0b\u9762\u90a3\u4e2a\u6309\u94ae\u7684\u6837\u5f0f\uff0c\u6211\u4eec\u5b8c\u5168\u53ef\u4ee5\u901a\u8bdd\u7f16\u5199css\u6765\u6539\u53d8\u4ed6\u539f\u6709\u7684\u6837\u5f0f"}, {"img": ["https://exp-picture.cdn.bcebos.com/6bbfdd14f1c595ee9b4d979227530688902c9a21.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}], [{"txt": ["\u5de5\u5177/\u539f\u6599"]}, {"txt": "\u7f51\u9875\u7f16\u8f91\u5668"}], [{"txt": ["\u52a0\u8f7dcss\u7684\u56db\u79cd\u65b9\u5f0f"]}, {"txt": "\u5916\u90e8\u6837\u5f0f\u3002\u8fd9\u79cd\u5f62\u5f0f\u662f\u6211\u628acss\u5355\u72ec\u5199\u5230\u4e00\u4e2a\u540d\u4e3aindex.css\u7684\u6587\u4ef6\u5185\uff0c\u7136\u540e\u5728\u6e90\u4ee3\u7801\u4e2d\u4ee5\u65b9\u5f0f\u94fe\u63a5\u3002\u5b83\u7684\u597d\u5904\u662f\u4e0d\u4f46\u672c\u9875\u53ef\u4ee5\u8c03\u7528\uff0c\u5176\u5b83\u9875\u9762\u4e5f\u53ef\u4ee5\u8c03\u7528\uff0c\u662f\u6700\u5e38\u7528\u7684\u4e00\u79cd\u5f62\u5f0f\u3002"}, {"img": ["https://exp-picture.cdn.bcebos.com/91091efc77f7980ebaac63c4d4db3620b83a9121.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u5185\u90e8\u6837\u5f0f\u3002\u8fd9\u79cd\u5f62\u5f0f\u662f\u5185\u90e8\u6837\u5f0f\u8868\uff0c\u5b83\u662f\u4ee5\u548c\u7ed3\u5c3e\uff0c\u5199\u5728\u6e90\u4ee3\u7801\u7684head\u6807\u7b7e\u5185\u3002\u8fd9\u6837\u7684\u6837\u5f0f\u8868\u53ea\u80fd\u9488\u5bf9\u672c\u9875\u6709\u6548\u3002\u4e0d\u80fd\u4f5c\u7528\u4e8e\u5176\u5b83\u9875\u9762\u3002"}, {"img": ["https://exp-picture.cdn.bcebos.com/8974c38a59de4507798d18c55e413a8ca7088521.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u884c\u5185\u6837\u5f0f\u3002\u5728\u60f3\u8981\u6539\u53d8\u6837\u5f0f\u7684\u90a3\u4e2a\u6807\u7b7e\u91cc\uff0c\u5199}, {"img": ["https://exp-picture.cdn.bcebos.com/c6b994775ddd884c1bc60f926cef28066a01f621.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u5bfc\u5165\u6837\u5f0f\u3002\u94fe\u63a5\u6837\u5f0f\u662f\u4ee5@import url\u6807\u8bb0\u6240\u94fe\u63a5\u7684\u5916\u90e8\u6837\u5f0f\u8868\uff0c\u5b83\u4e00\u822c\u5e38\u7528\u5728\u53e6\u4e00\u4e2a\u6837\u5f0f\u8868\u5185\u90e8\u3002\u5982layout.css\u4e3a\u4e3b\u9875\u6240\u7528\u6837\u5f0f\uff0c\u90a3\u4e48\u6211\u4eec\u53ef\u4ee5\u628a\u5168\u5c40\u90fd\u9700\u8981\u7528\u7684\u516c\u5171\u6837\u5f0f\u653e\u5230\u4e00\u4e2aglobal.css\u7684\u6587\u4ef6\u4e2d\uff0c\u7136\u540e\u5728layout.css\u4e2d\u4ee5@import url(\"/css/global.css\")\u7684\u5f62\u5f0f\u94fe\u63a5\u5168\u5c40\u6837\u5f0f\uff0c\u8fd9\u6837\u5c31\u4f7f\u4ee3\u7801\u8fbe\u5230\u5f88\u597d\u7684\u91cd\u7528\u6027\u3002"}, {"img": ["https://exp-picture.cdn.bcebos.com/9881b1fce186242fa4ffb4aa35e434daf15ee821.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}], [{"txt": ["Css\u4f18\u5148\u7ea7"]}, {"txt": "id\u4f18\u5148\u7ea7\u9ad8\u4e8eclass\u00a0\u540e\u9762\u7684\u6837\u5f0f\u8986\u76d6\u524d\u9762\u7684\u00a0\u884c\u5185\u6837\u5f0f\u9ad8\u4e8e\u5185\u90e8\u6216\u5916\u90e8\u6837\u5f0f\u00a0"}, {"txt": "id\u4f18\u5148\u7ea7\u9ad8\u4e8eclass\u00a0id=a \u548c\u00a0a\" a\"\uff1b\u6267\u884c\u7684\u5c31\u662fid=\"a\"\u91cc\u9762\u7684\u5185\u5bb9"}, {"img": ["https://exp-picture.cdn.bcebos.com/6061b9cd0c6efbf2183e5562127bbbf4db58da21.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1", "https://exp-picture.cdn.bcebos.com/8a17b3042e6817e9776c2e4dd356d53da924ce21.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u540e\u9762\u7684\u6837\u5f0f\u8986\u76d6\u524d\u9762\u7684class a\u548cb \u7684\u80cc\u666f\u989c\u8272\u548c\u6587\u5b57\u7684\u989c\u8272\u4e0d\u540c\u3002b\u5728a\u7684\u540e\u9762\uff0c\u8986\u76d6\u4e86a\u7684\u6837\u5f0f\u3002\u6240\u4ee5\u6267\u884c\u7684\u662fb\u91cc\u9762\u7684\u6837\u5f0f\u5185\u5bb9"}, {"img": ["https://exp-picture.cdn.bcebos.com/ba274f598540102a356f1e17b142a07aa110c521.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1", "https://exp-picture.cdn.bcebos.com/35fa07efa25f0c14fef6f2370d89a146b6b13826.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u884c\u5185\u6837\u5f0f\u9ad8\u4e8e\u5185\u90e8\u6216\u5916\u90e8\u6837\u5f0f\u884c\u5185\u5199style\u7684\u6837\u5f0f\u7b49\u7ea7\u9ad8\u4e8e\u6240\u6709"}, {"img": ["https://exp-picture.cdn.bcebos.com/7efc527c34b33c417537f3f4887de137c8762e26.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}], [{"txt": ["Css\u76d2\u6a21\u578b\u7ec4\u6210"]}, {"txt": "CSS\u76d2\u5b50\u6a21\u5f0f\u90fd\u5177\u5907\u8fd9\u4e9b\u5c5e\u6027\uff1a\u5185\u5bb9(content)\u3001\u586b\u5145(padding)\u3001\u8fb9\u6846(border)\u3001\u8fb9\u754c(margin) \u3002"}, {"img": ["https://exp-picture.cdn.bcebos.com/023cff37c97622bc3148efd2a05fd54604962826.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}]]