#box{width:100px;高度：100px；边框：1px实心；填充：20px；边距：10px；}CSS布局定位通过概念图划分页面，然后设置盒子模型页面上的区域图片导航列表段落都可以是盒子页面上的所有元素都可以看成是一个盒子，占据一定的页面空间盒子model由content组成contentheightheightwidthWidth，padding，innermargin，border，border，outermargin，除了content，都是CSS样式属性。以下部分按方向划分：一个盒子的实际宽高：content+padding+border+margin例子#box{width:100px;高度：100px；边框：1px实心；填充：20px；边距：10px；}ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent内容内容溢出属性当内容溢出框框时，溢出属性值隐藏：超出部分不可见scroll：显示滚动条auto：if滚动条auto：if滚动条auto：if滚动条auto：if滚动条auto：if滚动条auto：if滚动条滚动条AUTO：如果有滚动条AUTO：如果有滚动条AUTO：如果有滚动条Auto：如果有多余的部分，则显示滚动条。border属性用于设置框的边框。使用hr标签有很多限制。border属性可用于替换hr标签样式。border-width:px,thin,medium,thickborder-style:dashed（横线），dotted（点），solid（实线），double（双实线）border-color:colorborder:widthstylecolor示例：使用子属性：div{border-width:2px;边框样式：实心；边框颜色：红色；}统一使用border:div{bordersolidred;}水平分界线可以多次使用，指的是使用类attribute.line{height:1px;宽度：500px；border-top:1pxsolid#e5e5e5;}pa添加边距属性被清除为浏览器的默认设置*{margin:0;padding:0:}value:px,%(外框宽高)padding:5px;边距：5px；右上左下填充顶部：10%；保证金顶部：10%；toppadding-leftmargin-leftleftpadding-rightmargin-rightrightpadding-bottommargin-bottombottommarginmargin:1px;以margin为例，padding、border三个属性分别分为四种方向设置方法：margin:1px;（意思是四个方向都是1px）margin:1px2px1px3px;（按右上左下顺时针）margin:1px2px;(topandbottom1px,leftandright2px)margin:1px2px3px(省略left，等于2pxwithright)注：marginmerging：垂直方向合并（比如两个框的垂直外margin按照到更高的高度，水平方向不Mergehorizo??ntalcentering对于图片文字水平居中：text-align:center;divhorizo??ntalarea:margin:0auto;（第一个上下值auto为左右值，会根据宽度自动解析）css定位机制概述概述：通过对齐框定位定位分类：文档流浮动定位图层定位文档流是默认的，从上到下，从左到右，还有一些元素是浮动的在单行中，层像层一样堆叠在一起，如果需要设置position属性，文档流定位元素分类：block,inline,inline-block元素类型转换:display属性相互转换:display:none元素不会被显示display:block被显示为块元素display:inline被显示为行内元素display:inline-block被显示为inline-block元素blockblock元素特性height
