CSS基础(10)- 常规流

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用。

常规流

盒模型:规定单个盒子的规则

视觉格式化模型(布局规则):页面中的多个盒子的排列规则

大体分为3种方式:

  1. 常规流
  2. 浮动
  3. 定位

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素,默认都属于常规流布局

总体规则:块盒独占一行,行盒水平依次排列

包含块 containing block:每个盒子都有它的包含块,包含块决定了盒子的排列区域

绝大部分情况下,盒子的包含块,为其父元素的内容盒

块盒

  1. 每个块盒的总宽度,必须刚好等于包含块的宽度
  • 宽度默认为auto(把剩余的空间吸收掉)

  • margin也可以设为auto(也是把剩余的空间吸收掉),默认为0

  • width吸收能力强于margin

  • 若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right吸收

  • 在常规流中,块盒在其包含块中 居中,可以定宽,然后令margin-left、margin-right设为auto (也可以 margin: 0 auto;)

  1. 每个块盒垂直方向上的auto值
  • height: auto; 适应内容的高度

  • margin: auto; 表示 0

  1. 百分比取值
  • padding、宽、margin可以取值为百分比。以上所以百分比,相对的是包含块的宽度(与包含块的高度没有任何关系)

  • 高度的百分比:
    1). 包含块的高度取决于子元素的高度时,子元素里设置的百分比无效

.parent {
    background: lightblue;
    width: 300px;
    /* height: 200px; */
    border: 2px solid;
    padding: 30px;

}

.child {
    border: 2px solid;
    background: #f00;
    height: 50%;
}

2). 包含块的元素不取决与子元素的高度时,百分比相对于父元素的高度

.parent {
    background: lightblue;
    width: 300px;
    height: 1000px;
    border: 2px solid;
    padding: 30px;

}

.child {
    border: 2px solid;
    background: #f00;
    height: 50%;
}

/*.child的宽会等于500px*/
  1. 上下外边距的合并

两个常规流块盒,上下外边距相邻,会进行合并

两个外边距,取最大值

父子元素外边距相邻也会合并

.parent {
    background: rgb(84, 38, 84);
    height: 300px;
    margin-top: 50px;
    /*解决方法1:加一个border
    
    border:1px solid #fff*/
}

.child {
    background: rgb(214, 104, 30);
    height: 100px;
    width: 300px;
    margin-top: 50px;/*解决办法2:不在子元素里写margin-top,去父元素里写padding-top*/
}

参考资料

  1. 【渡一教育】袁进老师的html+css基础课程
  2. 【渡一教育】袁进老师相关课程源代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值