CSS笔记——盒子模型

一. 盒子模型简介

  1. CSS将页面中的所有元素都设置成了一个矩形的盒子
  2. 将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置
  3. 每一个盒子都由以下几个部分组成:内容区(content)、内边距(padding)、边框(border)、外边距(margin)

二. 内容区(content)

  1. 使用width来设置盒子内容区的宽度
  2. 使用height来设置盒子内容区的高度

三. 边框(border)

  1. 边框属于盒子的边缘,边框里边属于盒子的内容,出了边框都是盒子的外部
  2. 要为一个元素设置边框必须指定三个样式:border-width: 边框的宽度、border-color: 边框的颜色、border-style: 边框的样式
  • border-width: 边框的宽度
  1. 使用border-width可以分别指定四个边框的宽度
    (1) 如果指定四个值,则四个值会分别设置给上、右、下、左(顺时针方向)
    (2) 如果指定三个值,则三个值会分别设置给上、左右、下
    (3) 如果指定两个值,则两个值会分别设置给上下、左右
    (4) 如果指定一个值,则四边全都是该值
  2. 除了border-width,CSS中还提供了border-top-width、border-right-width、border-bottom-width、border-left-width,专门用来设置指定边的宽度
  • border-color: 边框颜色
  1. color也可以分别指定四个边框的样式,规则和width一致,同时它也提供border-xxx-color四个样式,来分别设置四个边
  • border-style: 边框的样式
  1. 可选值
    (1) none: 没有边框(默认值)
    (2) solid:实线
    (3) dotted: 点状边框
    (4) dashed: 虚线
    (5) double: 双线
  2. style也可以分别指定四个边框的样式,规则和width一致,同时它也提供border-xxx-style四个样式,来分别设置四个边
  • border
  1. border是边框的简写样式,通过它可以同时设置四个边框的样式、宽度、颜色,并且没有顺序要求
  2. border一指定就是同时指定四个边,不能分别指定
  3. border-top、border-right、border-bottom、border-left可以单独设置四个边的样式,规则和border一样,只不过它仅对一个边生效

四. 内边距(padding)

  1. 内边距指的是盒子的内容区与盒子边框之间的距离
  2. 一共有四个方向的内边距,可以通过padding-top、padding-right、padding-bottom、padding-left来设置四个方向的内边距
  3. 使用padding可以同时设置四个边框的样式,规则和border-width一致

五. 外边距(margin)

  1. 外边距指的是当前盒子与其他盒子之间的距离,它会影响到盒子的位置
  2. 盒子有四个方向的外边距:margin-top、margin-right、margin-bottom、margin-left
  3. 由于页面中的元素都是靠左靠上摆放的,当设置上和左外边距时,会导致盒子自身的位置发生改变,如果是设置右和下外边距会改变其他盒子的位置
    (1) margin-top:上外边距,设置一个正值,元素会向下移动
    (2) margin-right:右外边距,默认情况下设置margin-right不会产生任何效果
    (3) margin-bottom:下外边距,设置一个正值,其他元素会向下移动
    (4) margin-left:左外边距,设置一个正值,元素会向右移动
  4. 外边距也可以指定一个负值,如果外边距设置的是负值,则元素会向反方向移动
  5. 外边距可以使用简写属性margin,同时设置四个方向的外边距,规则和border-width一样
  6. 垂直外边距的重叠
    (1) 在网页中相邻的垂直方向的外边距会发生外边距的重叠
    (2) 兄弟元素:
    ① 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
    ② 如果相邻垂直外边距一正一负,则取两者的和
    ③ 如果相邻的外边距都是负值,则取两者中绝对值较大的
    (3) 父子元素:
    ① 父子元素间的相邻垂直外边距,子元素的会传递给父元素
    ② 父子外边距的重叠会影响到页面的布局,必须要进行处理
  7. box-sizing:用来设置盒子尺寸的计算方式(设置width和height的作用)
    (1) content-box:宽度和高度用来设置内容区的大小(默认值)
    (2) border-box:宽度和高度用来设置整个盒子可见框的大小(width和height指的是内容区+内边距+边框的总大小)

六. 水平方向的布局

  1. 元素在其父元素中水平方向的位置由以下几个属性共同决定:
    margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
  2. 一个元素在其父元素中,水平布局必须要满足以下的等式:
    margin-left+border-left+padding-left+width+padding-right+border-right+margin-right等于其父元素内容区的宽度
  3. 以上等式必须满足,如果相加结果使等式不成立,则称为过度约束,等式会自动进行调整
  4. 调整的情况:
    (1) 如果这七个值没有为auto的情况,则浏览器会自动调整margin-right值以使等式满足
    (2) 这七个值中有三个值可以设置为auto:width、margin-left、margin-right
    ① 如果某个值为auto,则会自动调整为auto的那个值以使等式成立
    ② 如果将一个宽度和其中一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动调整为0
    ③ 如果将三个值都设置为auto,则外边距都是0,宽度最大
    ④ 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值,所以经常利用这个特点来使一个元素在其父元素中水平居中
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值