列表属性边框相关属性表格相关属性背景相关属性鼠标相关属性常用的长度单位元素显示模式总结修改元素显示模式盒模型1.组成部分内容区默认宽度盒子内边距padding边框border外边距margin注意事项1子元素的margin是参考父元素的content计算的2上左margin影响自身的位置 下右margin影响兄弟元素的位置3行内元素设置上下margin无效果4margin的值也可以是auto给一个块级元素左右设置auto可以实现该元素在其父元素内水平居中5margin的值可以是负值margin塌陷问题解决方法加上边框 给父元素加上padding值overflowhiddenmargin合并问题只存在于上下兄弟元素之间处理内容溢出谁是容器就在谁身上加属性 overflowhiddenoverflowautooverflowscrolloverflow-x/y不推荐使用隐藏元素样式继承元素默认样式布局小技巧元素之前空白问题行内块的幽灵空白问题作业!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title10.5作业/titlestyle.outer{width:800px;padding-left:20px;padding-right:20px;padding-bottom:20px;margin:0 auto;border:1px black solid;background-image:url(/background.png);background-position:center center;background-repeat:no-repeat;}.table{width:100%;margin:0 auto;background-color:lightgrey;border-collapse:collapse;}.price{color:red;font-weight:bold;font-size:16px;margin-top:10px;margin-bottom:10px;}th{background-color:rgba(0,0,0,0.500);border:1px;border-color:black;border-style:dashed;font-weight:bold;color:white;text-align:center;vertical-align:middle;padding:12px;}td{height:260px;border:1px;border-color:black;border-style:dashed;padding:12px;text-align:center;vertical-align:middle;background-color:lightgrey;}caption{font-size:25px;margin:20px;text-align:center;}img{width:100%;height:auto;display:block;}.buy{width:50%;font-size:12px;margin-top:10px;background-color:lightyellow;border:none;cursor:pointer;}/style/headbodydivclassoutertablecaption商品展示区/captiontheadtrth商品一/thth商品二/thth商品三/th/trtbodytrtdimgsrctomato.pngalt番茄pclassproduct番茄/ppclassprice五元/斤/pinputclassbuytypesubmitvalue点击购买/tdtdimgsrctomato.pngalt番茄pclassproduct番茄/ppclassprice五元/斤/pinputclassbuytypesubmitvalue点击购买/tdtdimgsrctomato.pngalt番茄pclassproduct番茄/ppclassprice五元/斤/pinputclassbuytypesubmitvalue点击购买/td/tr/tbody/thead/table/div/body/html