盒子模型详解

盒子模型


1.盒模型是CSS布局的基石
他规定了网页元素如何显示以及元素之间的相互关系

CSS定义所有的元素都可以拥有项盒子模型一样的外形和平面空间
包括:
   边框(border)
   外边距(margin)
   内边距(padding)
   内容区(content)
盒模型的类型:
   1.标准模式
   2.怪异模式

盒的内容


1.overflow:属性指定如果内容移除一个元素的框
   取值:
      visible/hidden/scroll/suto
      visible:默认值,内容不会被裁剪掉,会呈现在元素框之外
      hidden:内容会被剪裁,其余的内容不可见
      scroll:内容会被剪裁,滚动条显示其余的内容
      atuo:如果内容被剪裁,则被浏览器以滚动条显示其余内容
  2.overflow-x:指定如果他溢出了元素的内容区域是否剪裁左边或右边边缘的内容
  3.overflow-y:指定如果他溢出了元素的内容区域是否剪裁上边和下边边缘的内容
  
  4.text-overflow:指定当文本溢出包含他的元素:
      clip:修剪文本
      elipsis:显示胜率符号来代表被修剪的文本
      
      注意:
         text-overflow必须和overflow:hidden;white-space:nowarp;一起使用
         
  
  

边框


元素的边框:是围绕元素的内容和内边距的一条或多条线
  属性允许你规定元素边框的样式、宽度、颜色
  border:用于把针对四个边的属性设置在一个声明中
  border-style:用于设置元素所有边框样式,或者可以为单个边框设置特有的样式、
  border-width:用于设置边框的宽度
  border-left:用于将左边框的所有属性设置到一个声明中
         top
         bottom
         right
  border-style:取值:
       soild/dashed/double/none
  注意:
     如果要设置盒子的边框,必须制定边框的线型,只有设置了线型才能是指相对应的属性(颜色和宽度)

padding的使用方法


padding:
   填充,元素碧娜狂和元素内容之间的区域,称之为内边距
  用法:
     用来调整内容在容器中位置关系,或者理解调整子元素在父元素中的位置
   注意:
      padding属性需要添加在父元素上,padding值是额外加载元素原有大小上的值;
      如果想保证元素大小不变,需要充元素的宽或高上减掉后在加上padding值
    
   属性值的四种方式:
      1.四个值:上、下、左、右{padding:10px 10px 10px 10px;}
      2.三个值:上、左右、下:
      3.两个值:上下、左右;
      4.一个值:四个方向;{padding:2px}
      
  说明:可以单独设置一个方向上的填充:
     如:padding-top;
    
    
    

margin的使用方式


margin:盒子与盒子之间的距离
 属性:
    margin-top:上边界
    margin-right:右边界
    margin-bottom:下边界
    margin-left:左边界

属性值表示的四种方式(和padding一样)

说明:
   在浏览器中横向居中:{margin:0 atuo;}
   同样可以单独设置方向边界
   

外边距的合并


1.当两个盒子纵向排列的时候,他们的距离为两个盒子之间最大的那个外边距
2.当两个和子横向排列时,他们的距离是两个和子的外边距之和

盒子的计算


计算公式:
   宽:左右的margin+左右的border+左右的padding+内容width
   高:上下margin+上下border+上下padding+内容height
   
   
例如:
    一个盒子的margin为  20px;
        border为1px;
        padding 为10px;
        content的宽:200px;高50px;
  宽:20*2+1*2+10*2+200=262px;
  高:20*2+1*2+10*2+50=112px;
  
  
  注意:设置padding和margin会撑大盒子,任何解决?
      根据外边距、内边距、边框的大小重新计算盒子中的内容宽度和高度
      

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值