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

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

三种方式:

1.常规流

2.浮动

3.定位

常规流布局

常规流   也可以叫做   文档流、普通文档流、常规文档流

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

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

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

绝大情况下,一个盒子的包含块,就是其父元素的内容盒(子元素跟着父元素移动)

块盒

1.每个块盒的总宽度,必须刚好等于包含块的宽度

宽度的默认值是auto,意思是将剩余空间吸收掉(如父元素内容盒宽度100px 子元素border宽度1px padding宽度10px width设为auto,则子元素内容盒宽度为78px)

居中方案:子元素设定宽度,margin设置为auto

2.每个块盒垂直方向上的auto值

height:auto,适应内容的高度

margin:auto,表示0

3.百分比取值

padding、宽、margin可以取值百分比

以上是相对于包含块的宽度。

高度的百分比:

①父元素未设置高度,子元素设置百分比无效

②父元素设置高度,子元素按照父元素高度*百分比计算(如果内容过多,则会溢出)

4.外边距合并(height)

两个块盒相邻,外边距会重叠。(两个外边距取最大值)

父子元素,若父元素没有border和padding,父子元素的margin也会合并(只要是相邻就会合并)

浮动

1.文字环绕

2.横向排列

浮动的基本特点:

修改float属性值为:

left:左浮动,元素靠上靠左

right:右浮动,元素靠上靠右

默认值为none

1.被设置浮动的元素,会变成块盒(display属性变成block)

2.浮动元素的包含块,为父元素的内容块。

3.宽度、高度为auto时,适应内容宽度

4.margin为auto时,为0

5.浮动盒子在排列时会避开常规流块盒,而常规流块盒无视浮动盒子

6.行盒在排列时会避开浮动元素(如果文字没有在行盒中,浏览器会自动生成一个包裹文字的行盒,叫做匿名行盒)

高度坍塌

原因:常规流盒子的自动高度,在计算时,不会考虑浮动盒子

解决办法:清除浮动

css属性:clear

默认值:none

left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方

right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方

both:清除所有浮动,该元素必须出现在前面所有浮动盒子的下方

CSS学习(11)常规流的更多相关文章

  1. 11个实用的CSS学习工具

    1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...

  2. HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)

    BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上 ...

  3. CSS:CSS学习总结

    CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...

  4. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  5. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  6. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  9. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

随机推荐

  1. Echart的使用legend遇到的问题小记

    Echart的图标真的很漂亮,使用也相对简单.但是官网的配置项的例子我不是很能快速的使用,得思考一会.哈哈,可能我比较笨吧. 在作柱状图的时候,我是通过Ajax动态获取的数据,但是图例legend就是 ...

  2. Python基础教程-02

    <Python基础教程> 第3章 使用字符串 字符串方法find返回的并非布尔值.如果find像这样返回0,就意味着它在索引0处找到 了指定的子串 join可合并一个字符串列表,不能合并数 ...

  3. mybatis-plus - insert

    一. insert 首先看一下 insert.java 的代码: /** * <p> * 根据 ID 删除 * </p> * * @author hubin * @since ...

  4. 腾讯云COS对象存储

    一.腾讯云COS 腾讯云对象存储 COS 是一种存储海量数据的分布式存储服务.COS 提供了多种对象的存储类型:标准存储.低频存储.归档存储. 二.为什么要使用TA 便宜: 个人用户有6个月的免费使用 ...

  5. 题解【AcWing177】噩梦

    题面 考虑双向广搜. 我们需要记录男孩和女孩的当前位置,并且每次都进行扩展. 记录一个数组 \(st[i][j]\) . 如果 \(st[i][j]=0\) ,说明 \((i,j)\) 还没有被男孩和 ...

  6. 怎么解析后台返回数据中\r\n换行

      给div添加css样式, white-space: pre-wrap; 即可   文章来源:刘俊涛的博客 欢迎关注公众号.留言.评论,一起学习. _________________________ ...

  7. Laravel中如何做数据库迁移

    总的来说,做一次独立数据库迁移只需要三步,分别是创建迁移文件.修改迁移文件.运行迁移 1.创建数据库迁移文件php artisan make:migration create_articles_tab ...

  8. js面向对象的程序设计 --- 中篇(创建对象) 之 工厂模式和 构造函数模式

    创建对象 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复代码. ·工厂模式 工厂模式是一种广为人知的设计模式,这种模式 ...

  9. Java学习笔记(十一)面向对象---多态

    多态的体现 父类的引用指向了自己的子类对象. 父类的引用也可以接受自己的子类对象. 代码体现 abstract class Animal { public abstract void eat(); } ...

  10. DVWA全级别之Insecure CAPTCHA(不安全的验证码)

    Insecure CAPTCHA Insecure CAPTCHA,意思是不安全的验证码,CAPTCHA是Completely Automated Public Turing Test to Tell ...