CSS学习(11)常规流
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中多个盒子的排列规则
三种方式:
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)常规流的更多相关文章
- 11个实用的CSS学习工具
1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...
- HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)
BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上 ...
- CSS:CSS学习总结
CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...
- HTML与CSS学习记录
title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- CSS学习笔记——视觉格式化模型 visual formatting model
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...
- css学习归纳总结(二) 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
随机推荐
- Echart的使用legend遇到的问题小记
Echart的图标真的很漂亮,使用也相对简单.但是官网的配置项的例子我不是很能快速的使用,得思考一会.哈哈,可能我比较笨吧. 在作柱状图的时候,我是通过Ajax动态获取的数据,但是图例legend就是 ...
- Python基础教程-02
<Python基础教程> 第3章 使用字符串 字符串方法find返回的并非布尔值.如果find像这样返回0,就意味着它在索引0处找到 了指定的子串 join可合并一个字符串列表,不能合并数 ...
- mybatis-plus - insert
一. insert 首先看一下 insert.java 的代码: /** * <p> * 根据 ID 删除 * </p> * * @author hubin * @since ...
- 腾讯云COS对象存储
一.腾讯云COS 腾讯云对象存储 COS 是一种存储海量数据的分布式存储服务.COS 提供了多种对象的存储类型:标准存储.低频存储.归档存储. 二.为什么要使用TA 便宜: 个人用户有6个月的免费使用 ...
- 题解【AcWing177】噩梦
题面 考虑双向广搜. 我们需要记录男孩和女孩的当前位置,并且每次都进行扩展. 记录一个数组 \(st[i][j]\) . 如果 \(st[i][j]=0\) ,说明 \((i,j)\) 还没有被男孩和 ...
- 怎么解析后台返回数据中\r\n换行
给div添加css样式, white-space: pre-wrap; 即可 文章来源:刘俊涛的博客 欢迎关注公众号.留言.评论,一起学习. _________________________ ...
- Laravel中如何做数据库迁移
总的来说,做一次独立数据库迁移只需要三步,分别是创建迁移文件.修改迁移文件.运行迁移 1.创建数据库迁移文件php artisan make:migration create_articles_tab ...
- js面向对象的程序设计 --- 中篇(创建对象) 之 工厂模式和 构造函数模式
创建对象 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复代码. ·工厂模式 工厂模式是一种广为人知的设计模式,这种模式 ...
- Java学习笔记(十一)面向对象---多态
多态的体现 父类的引用指向了自己的子类对象. 父类的引用也可以接受自己的子类对象. 代码体现 abstract class Animal { public abstract void eat(); } ...
- DVWA全级别之Insecure CAPTCHA(不安全的验证码)
Insecure CAPTCHA Insecure CAPTCHA,意思是不安全的验证码,CAPTCHA是Completely Automated Public Turing Test to Tell ...