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
    评论
CSS-in-CSS是一种前端开发技术,也被称为CSS嵌套或CSS模块化。它的主要思想是将CSS样式定义在组件级别,使得样式与组件的逻辑和结构紧密关联,提高代码的可维护性和可重用性。 在传统的CSS开发中,样式是全局共享的,容易造成样式冲突和难以维护。而CSS-in-CSS通过将样式封装在组件内部,实现了样式的局部作用域。这样一来,每个组件都可以拥有自己独立的样式规则,不会相互干扰。 CSS-in-CSS有多种实现方式,其中比较常见的有以下几种: 1. CSS Modules:CSS Modules是一种使用Webpack等构建工具实现的CSS-in-CSS方案。它通过给每个CSS类名添加唯一的哈希值,实现了样式的局部作用域。在使用时,可以通过import语法引入CSS文件,并在组件中使用对应的类名。 2. CSS-in-JS:CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的方式。它通过使用JavaScript对象来描述样式规则,并在运行时动态生成对应的CSS。常见的CSS-in-JS库有styled-components、Emotion等。 3. CSS Nesting:CSS Nesting是一种提案,旨在原生CSS中实现嵌套样式的语法。它使用类似于Sass的嵌套语法,可以更方便地描述组件内部的样式关系。目前,CSS Nesting还处于实验阶段,尚未得到所有浏览器的广泛支持。 总的来说,CSS-in-CSS是一种将CSS样式与组件紧密结合的开发方式,可以提高代码的可维护性和可重用性。不同的实现方式适用于不同的项目需求和开发环境。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值