盒子模型的组成:
border边框 content内容 padding内边距 margin外边距
边框:
border-width:定义边框粗细,单位px border-style:边框样式(主要记住:solid实线边框 dashed虚线边框 dotted点线边框) border-color:边框颜色
边框的复合写法:border: 1px soild red; (没有顺序之分)。还可以分开写,例如border-top设定的是上边框(在复合写法和分开写是,一定要注意边框的层叠性)
表格的细线边框:border-collapse: collapase(合并边框)
边框会影响盒子的实际大小:(解决方案)
1.测量盒子大小的时候,不量边框 2.如果测量的时候包含了边框,则需要width height 减去边框宽度(是两边哦,如果边框宽度是10px,则需要减去20px)
内边距:(边框与内容之间的距离)
padding-top padding-left padding-bottom padding-right
内边距会影响盒子的大小:
1.解决方案:让width height 减去多出来的内边距大小即可,也是减两边
2.优点:在某些导航栏中的内容文字的数量是不一样的,有两个字的也有三个字的,这时之间的距离就会不一样,要利用内边距会撑大盒子来解决
3.如果盒子本身没有指定width height属性,则此时内边距padding不会撑开盒子大小
外边距margin 与内边距的格式一样
外边距的典型应用:让块级盒子水平居中,要满足2个条件:
1.盒子必须指定了宽度width 2.盒子左右外边距都设置为auto(margin: 0 auto;)
3.注意:让行内元素与行内块元素水平居中给其父元素添加 text-align: center即可
清除内外边距:
浏览器的不同,所默认的内外边距也不同,因此在布局时,首先要清除内外边距,写代码时的第一行代码 * { padding: 0; margin: 0;}
网友评论