• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
idiot_MAN
帮助1

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设置
属性 含义 说明
border-width 边框宽度  
border-style 边框样式  
border-color 边框颜色  
border-collapse 合并紧缩  
border 复合设置 1px solid green
  • padding设置
属性 含义 说明
padding-left    
padding-right    
padding-top    
padding-bottom    
padding 复合设置 上右下左 10px 20px 30px 40px
  • margin设置
属性 含义 说明
margin-left    
margin-right    
margin-top    
margin-bottom    
margin 复合设置 上右下左 10px 20px 30px 40px
注意:
    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(边框) = 元素实际高度

说明
content-box 默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减 去(border padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。 **注:**border-box 不包含 margin。
inherit 指定 box-sizing 属性的值,应该从父元素继承

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

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhahcac
系列文章
更多 icon
同类精品
更多 icon
继续加载