CSS盒子模型注意细节

什么是盒子模型:

一个标签就是一个盒子,可以通过6大属性(margin,border,padding,width,height,background-color)来设置这个盒子。
同时,标签分男标签和女标签。对于男盒子来说,6大属性都有作用。对于女盒子来说,width,height不起作用,padding 和 margin在水平方向上有作用,在垂直方向上没有作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{margin: 0;
        padding: 0;}    
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px; background-color: red;"></div>
    <span style="width: 100px;height:100px;background-color:green;">span</span>
</body>
</html>

在这里插入图片描述

<body>
    <div style="width: 100px;height: 100px; background-color: red;"></div>
    <span style="margin:20px 20px;padding:20px 20px;background-color:green;">span</span>
</body>

在这里插入图片描述

下面由外到内依次介绍盒子模型的六大属性:

一.margin属性

margin是什么:它指元素之间盒子与盒子之间的距离。

1.1 css外边距属性margin:

分别是:margin-top;margin-right;margin-bottom;margin-left
可以简写为:margin:margin-top margin-right margin-bottom margin-left;依次按顺时针排列。
margin属性值的表示方式:

  • margin中一个值:比如,margin:20px;表示上右下左距离都是20px。
  • margin中两个值:比如,margin:20px 30px;表示上下是20px,左右是30px。
  • margin中三个值:比如,margin:20px 40px 30px;表示上是20px,左右是40px,下是30px。
  • margin中四个值:依次按顺时针上右下左排列,比如,margin:20px 40px 30px 50px;表示上是20px,右是40px,下是30px,左50px。

应用实例:有些标签默认右margin值的,*{margin:0;}清楚所有标签的默认值
margin对于块级元素,四个方向都有效,对于行级标签,水平方向有效,垂直方向无效。

margin外边距的重叠性:
重叠的前提条件:块级标签,垂直方向上

情况一:兄弟盒子之间重叠:
当两个相邻的盒子的垂直方向上的下边距(margin-top)和上边距(margin-bottom)挨着时候,则两个外边距会重叠在一起,这时候中间的margin大小是取大优先。

解决兄弟重叠:
方法1:给男的变成不男不女的(display:inline-block;)
方法2:浮动(浮动元素是不会塌陷的)

情况二:父子盒子之间的重叠(嵌套盒子)
两个盒子嵌套关系(父子),其中他们的父元素上边距(margin-top)和子元素上边距(margin-top)会重叠一起。

解决父子重叠:
方法1:给父元素设置边框(border-top),如果不想用到边框,可以使用transparent属性边框透明化。
方法2:给父元素设置padding-top
方法3:给男的变成不男不女的(给块级元素加上:display:inline-block;)

margin设置负值的作用:
当没有给子元素设置宽度时候,给子元素盒子设置margin-right:-100px;子元素宽度会增加100,此时f子元素盒子宽度是:width+margin-rigth=200px

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width: 100px;
            border: 1px solid blue;     
        }
        .father {
            background-color: aqua;
            overflow: hidden;
            margin-right: -100px;
        }
    </style>
    <div class="wrap">
        <div class="father">
            111
        </div>
    </div>

效果图展示:
在这里插入图片描述

二.border属性

border:设置盒子的边框

  • 盒子设置属性可简写为:
    border:粗细 线型 颜色 比如: border:1px solid red;
  • 盒子的四个边框:border-top border-right border-bottom border-left
  • border-width border-style border-color
  • border-top-width xxx
  • border在页面是占空间的
  • border可以实现小三角
    border:10px solid transparent;
    border-top:10px solid red;
    
三.padding属性
  • padding:是内容与border之间的距离。也就是内边距。
  • padding中四个属性值:padding:padding-top padding-right padding-bottom padding-left,它和margin属性的四个值的表达方式是一样的。
  • 应用: 有些标签有默认的padding 可以用 *{padding:0;}选中清除
  • 应用:调整内容与border之间的间隙
  • padding在页面是占空间的
四.content属性(width,height)
  • 宽度和高度是指内容的宽高。
  • 男标签可以设置宽度和高度,女标签不能设置宽度和高度
  • 当父元素设置宽高是,子元素没有设置宽度高度,则子元素占据了父元素的100%空间
  • 女标签它的宽度由内容决定,高度由font-size决定
  • width和height可以设置百分比,是是相对父元素的百分比,比如父元素width:1000px;则子元素width:25%,子元素即为:1000*25%=250。
五:background:
  • background-color:
  • background-image:
    1,默认水平和垂直方向都会平铺
    2,如果空间不足,图片也会显示,只是显示不完整
    3,url后面的路径引号可加可不加
    4,背景图片默认会填充border,padding,content
    background-repeat:
    background-position:
    background-attactment:fixed,定位图片,定死了,滑动页面不会改变。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值