盒子模型 小总结

作者: super_girl秘密基地 | 来源:发表于2020-12-20 12:45 被阅读0次

    盒子模型的组成:

    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;}

    相关文章

      网友评论

        本文标题:盒子模型 小总结

        本文链接:https://www.haomeiwen.com/subject/wzfknktx.html