盒模型

Posted 2020-11-01 tiantian9542

 

盒模型

• • 盒模型
    • margin外边距
    • padding内边距
    • boeder边框
    • css盒模型的计算公式
    • margin的兼容问题
    • overflow文本溢出的处理方式
    • background

盒模型

理解：html元素可以看成一个大仓库，盒子与盒子之间的间距是外边距（margin），盒子里面与货物之间泡沫叫内边距（padding），货物本身的有宽高（width/height）子本身的厚度（border）

width 宽度
height 高度
border 边框
margin 外边距
padding 内边距

margin外边距

margin:10px;设置四个方向的值
margin:10px 20px; 上下 左右
margin:10px 20px 30px; 上 左右 下
margin:10px 20px 30px 40px; 上 右 下左

margin-top:10px; 上
margin-right:10px; 右
margin-bottom:10px; 下
margin-right:10px;左

用于盒子与盒子之间或者块级元素与块级元素之间的间距

padding内边距

padding:10px;设置四个方向的值
padding:10px 20px; 上下 左右
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下左

padding-top:10px; 上
padding-right:10px; 右
padding-bottom:10px; 下
padding-right:10px;左

用在盒子内内容（边框）与边框，子元素与父元素，子元素与子元素的间距

boeder边框

border:1px solid red
border-top:10px; 上
border-right:10px; 右
border-bottom:10px; 下
border-right:10px;左

border-width:1px;边框的宽度
border-width:1px 2px 3px 4px;上 右 下 左

可以单独设置一个边

border-style:solid;边框的宽度
border-color:red;边框的宽度

利用border制作实现三角形
border先控制三角形的大小和风格
border: 40px solid;
然后在给一个边的颜色，其它颜色设置为透明
border-color: transparent transparent transparent purple;
transparent 是透明的意思

css盒模型的计算公式

allwidth=width+左右padding+左右boder

180 = 100 + 30+30 + 10+10

allheight=height+上下padding+上下border

180 = 100 + 30+30 + 10+10

margin的兼容问题

• 当两个元素是同级关系时，第一个元素设置margin-bottom值，第二个元素设置margin-top值时，这两个元素之间的间距是取最大值，而不是两个值相加之和
• 当两个元素是包含关系时，给子元素设置一个margin-top值时，会出现子元素margin-top值传递给父元素（值传递-子传父）的现象
  
  • 解决方法：
    
    • 1.把子元素的margin-top值去掉，改成给父元素设置padding-top值—-常用
    • 2.给父元素设置overflow:hidden;（溢出隐藏）

overflow文本溢出的处理方式

• overfolw:hidden 溢出隐藏，文本超出元素的宽高，就会把文本隐藏掉
• overfolw:auto;浏览器自动判断是否超出这个元素，如果超出就会出现滚动条
• overfolw:scroll;不管是否超出，都会出现滚动条

background

• background-color:red 背景颜色
• background-image:url(路径) 背景图路径

• background-repeat:no-repeat 背景平铺方式

  • renpeat 默认值
  • no-repeat 平铺
  • repeat-x 沿x轴平铺
  • repeat-y 沿Y轴平铺

• background-position:center center 图片位置

  • 值：x轴 y轴
  • left
  • right
  • center
  • 单位：px
• background-size 图片大小
  
  • 值：x轴 y轴
  • 单位：px

复合属性的写法顺序：
background: 颜色 图片路径 图片是否平铺 改变图片的位置
如果想要设置背景图片的大小只能另起一行写ackground-size