盒子模型，VsCode 常用快捷键生成代码

vscode常用快捷键生成代码

table>tr>td    div>p  ul>li
div*3    table>tr*2>td*2
div.class
div#id
ul.nav_list>li.nav_item*3>a
div{$}*6       `<div>`1 `<div/>` ... `<div>`8 `<div/>`
div.test$      `<div class="test1"><div/>` ... `<div class="test8"><div/>`

盒子模型

padding内边距 border边框 margin外边距

• border设置

• padding设置

• margin设置

注意：
    border边框设置会影响盒子实际大小
    padding内边距设置会影响盒子实际大小
    padding内边距设置 不会影响盒子实际大小的情况？？？ 元素本身没设置width属性
    margin两个相邻块级元素垂直外边距自动合并
    块级元素居中显示 margin:0 auto
    行内元素和行内块元素水平居中，给父亲元素设置text-align:center

块级元素嵌套元素塌陷问题

    父元素内有子元素 
    如果给子元素 设置margin-top样式，父元素跟着下来，造成外边距塌陷

    如何解决？？
    1 父元素设置border
    2 父元素设置padding
    3 overflow:hidden    溢出的隐藏

补充： box-sizing：
语法：box-sizing: content-box|border-box|inherit:

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。
width(宽度) padding(内边距) border(边框) = 元素实际宽度
height(高度) padding(内边距) border(边框) = 元素实际高度

这篇好文章是转载于：学新通技术网