盒子模型--边框--内边距--外边距

xiongmao
2021-12-05 / 0 评论 / 64 阅读 / 正在检测是否收录...

盒子模型:
  内容区(content)
  内边距(padding)
  边框(border)
  外边框(margin)

border简写属性,通过该属性可以设置边框所有的相关样式,并且没有顺序要求
  border: 10px red solid ;

内容区(content).
  内容由width 和 height 两个属性来设置
  width 设置内容区宽度
  height 设置内容区的高度

边框:(border),边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
 边框的大小会影响整个盒子的大小
  要设置边框,需要至少设置三个样式:
   边框的宽度:border-width
   边框的颜色:border-color
   边框的样式:border-style
补充:
边框样式值
  none:无边框
  hidden:隐藏边框 IE不支持
 dotted:在MAC平台上IE4+与windows和UNIX平台上IE5.5+为点线。否则为实线(常用)
  dashed:在MAC平台上IE4+与windows和unix平台上IE5.5+为虚线,否则为实线(常用)
  solid:实线边框(常用)
 double:双实线边框,两条单线与其间隔的和等于指定的booder-width值
 groove:
 ridge
  inset
  outset
内边距
内边距(padding)
  -内容区和边框之间的距离是内边距
  -一共四个方向
    -padding-top
    -right
    -bottom
    -left
  -内边距的设置会影响到盒子的大小
  -背景颜色会延伸到内边距上

一个盒子的可见框的大小,由内容区 内边框和边框共同决定
盒子大小=内容区()+内边框(padding)+边框(border)

外边距
外边距(margin)
  -外边距不会影响盒子可见框的大小
  -但是外边距会影响盒子的位置
  -一共有四个方向的1外边距:
margin-top
  -上外边距,设置一个正值,元素会向下移动
margin-right
  -默认情况下设置margin-right不会产生任何效果
margin-bottom
  -下外边距,设置一个正值,其下边的元素会向下移动
margin-left
  -左外边距,设置一个正,元素会向右移动
  -margin也可以设置负值,如果是负值则元素会向右移动

  -元素在页面中是按照自左向右的顺序排列的,
  所以默认情况下如果设置左和上边距则会移动元素自身
  而设置下和右边距会移动其他元素

-margin的简写属性
margin 可以同时设置四个方向的外边距,用法和padding(内边距)一样
margin会影响到盒子实际占用空间

0

打赏

海报

正在生成.....

评论

博主关闭了所有页面的评论