【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局
1. 盒模型
1.1 内容区 content
默认情况下,width
和height
只包括内容区域的宽和高,不包括border、padding、margin
使用box-sizing
可以使其包含content、padding、border
//width和height属性包括content、padding和border,但是不包括margin(外边距)
box-sizing: border-box;
1.2 内边距 padding
1.3 边框 border
1.4 外边距 margin
外边距塌陷: 块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者
- 相邻兄弟元素margin合并
- 父级和第一个/最后一个子元素
- 空块级元素的margin合并
1.5 注意点
- 边框border的长和高都不能使用百分比长度
- 如果内容区过大,将会溢出,此时可使用overflow来处理
- overflow的值:
/* 默认值。内容不会被修剪,会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪,并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪,浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */
overflow: auto;
1.6 框的类型
用display来定义:
值 | 说明 |
block | 块框( block box)是定义为堆放在其他框上的框(例如:其内容会独占一行),而且可以设置它的宽高,之前所有对于框模型的应用适用于块框 ( block box) |
inline | 行内框( inline box)与块框是相反的,它随着文档的文字(例如:它将会和周围的文字和其他行内元素出现在同一行,而且它的内容会像一段中的文字一样随着文字部分的流动而打乱),对行内盒设置宽高无效,设置padding, margin 和 border都会更新周围文字的位置,但是对于周围的的块框( block box)不会有影响。 |
inline-block | 行内块状框(inline-block box) 像是上述两种的集合:它不会重新另起一行但会像行内框( inline box)一样随着周围文字而流动,而且他能够设置宽高,并且像块框一样保持了其块特性的完整性,它不会在段落行中断开。 |
table | 像处理table布局那样处理非table元素,而不是滥用HTML的<table>;标签来达到同样的目的。 |
flex | 处理一些困扰CSS已久的一些传统布局问题,例如布置一系列弹性等宽容器或者垂直居中内容。 |
grid | 给出一种简单实现CSS网格系统的方式,而在传统上它依赖于一些棘手难以处理的CSS网格框架 |
2. 浮动 float
2.1 浮动的背景和工作原理
浮动的最初是用来让文字环绕图片, 所以我们能推出:
浮动会脱离正常的文档流,并吸附到其父容器左边,正常布局中位于浮动元素下的内容会围绕着浮动元素
2.2 浮动的包裹性
包裹性:元素尺寸刚好容纳内容, 表现得就像diaplay:inline-block
一样
具有包裹性的其他属性:
display:inline-block
position:absolute/fixed/sticky
overflow:hidden/scroll
2.3 浮动的破坏性
会使父元素高度塌陷——为了实现文字环绕效果
具有破坏性的其他属性:
display:none
position:absolute/fixed/sticky
文档流:HTML当中的元素按照从左到右,从上到下的顺序进行排列
文字流:文字的排列
浮动造成的高度塌陷会导致元素脱离文档流,但不会脱离文字流
可以看到浮动后元素高度塌陷了(脱离了文档流),但是文字仍然保持环绕效果(未脱离文字流)
而如果使用position的绝对定位会连文字流也脱离文档流。
浮动的优点在于便于布局,但是缺点在于父元素的高度塌陷,并没有将浮动的子元素包裹进去,造成布局上的错误。
2.4 清除浮动 (clearfix hack)
解决高度塌陷(破坏性)带来的问题!!!
2.4.1 投机取巧法
在父元素底部加上
<div style="clear:both;"></div>
虽说兼容性好,但是浪费一个标签,违反了语义化,不推荐
*使用 br标签和其自身的 html属性,br 有 clear=all | left | right | none;
的属性。
<div class="parent">
<div class="child"></div>
<br clear='all'>
</div>
缺点同上。
2.4.2 overflow + zoom法
补充知识: BFC(Block Formatting Context)
BFC:块级格式化上下文【在css3中叫Flow Root】是一个独立布局环境,相邻盒子margin垂直方向会重叠。
什么样的元素会为其内容生成一个BFC呢?
- 浮动元素,即float:left/right
- 绝对定位元素,即position:absolute/fixed
- 块容器,即display:table-cell/table-caption/inline-block
- 设置了除visible外的overflow值的块盒子,即overflow:hidden/scroll/auto
BFC特性:
- 创建了BFC的元素中,子浮动元素也会参与高度计算
- 与浮动元素相邻的、创建了BFC的元素,都不能与浮动元素相互覆盖
- 创建了BFC的元素不会与它们的子元素margin重叠
创建了BFC的元素会把里面的东西视为自己的,包括浮动元素,创建一个私有领域把他们包裹起来。
BFC的特性:
1. 让原本会叠加的上下外边距叠加无效。将想要边距失效的两个盒子分别放入一个父盒子,然后为父盒子创建BFC。
2. 创建BFC的元素将不会围绕浮动元素,图中文字用p标签包裹并创建BFC,右上角浮动元素,可以看见文字并没有环绕浮动
因为子浮动元素也会参与高度计算, 所以借此可以得到以下方法:
.fix {
overflow:hidden; zoom:1;
}
方法不错,但是可能内容会被裁减掉,可以偶尔用用
2.4.3 after + zoom法
看一下2.4.1,虽然不错,但是违反语义化; 所以就想到了通过CSS来添加子元素,不修改HTML代码 —— :after
选择符
.clearfix:after {
content: " "; //content可以任意发挥
display: block;
line-height: 0; //height: 0也行
clear: both;
}
.clearfix {
zoom: 1;
}
实际上是通过 content 在元素的后面生成了内容为空的块级元素。由于IE6-7不支持:after
,使用zoom:1
触发hasLayout
。
这个方法最佳, 推荐这个方法。
【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局的更多相关文章
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 百度前端技术学院task1.10
任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...
- 百度前端技术学院(IFE)2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
- 百度前端技术学院-task1.3源代码
因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...
- 百度前端技术学院-基础-day1
2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...
- 通过Github Pages在线查看百度前端技术学院完成的任务成果
前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...
- css盒模型与bfc与布局与垂直水平居中与css设计模式等
一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...
- 百度前端技术学院-基础-day5.6
今天学习了关于盒模型.浮动等页面布局的方法. 受到同学的启发,顺便学习了flex的布局. 还了解了一些编码的基本规则. 对我接下来的学习帮助很大. 交作业: HTML : https://github ...
- 百度前端技术学院Html&CSS学习资源
Web相关名词通俗解释 https://www.zhihu.com/question/22689579 MDN HTML入门 https://developer.mozilla.org/zh-CN/d ...
随机推荐
- P1880 [NOI1995]石子合并 区间dp
P1880 [NOI1995]石子合并 #include <bits/stdc++.h> using namespace std; ; const int inf = 0x3f3f3f3f ...
- Centos7中磁盘管理及扩展
前提要求: 虚拟机:centos7 虚拟机软件:VMware Workstation 12 在安装Centos系统时,磁盘选择为LVM逻辑卷.当选择为LVM后才能创建逻辑卷等(必须) 数据格式选择的是 ...
- 二、$CSS部分
1.css sprite是什么,有什么优缺点 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地提高页 ...
- [PHP]用PHP自己写一个基于zoomeye的api(偷懒必备quq)
0x01 起因 因为手速慢,漏洞刷不过别人,一个个手补确实慢,所以想自己写一个api,一键抓取zoomeye的20页,然后就可以打批量了 ovo(真是太妙了!) 0x02 动工 1.抓包做 ...
- SQL——SELECT、UPDATE、DELETE和INSERT INTO
SQL是一种ANSI的标准计算机语言.ANSI:美国国家标准化组织.除SQL标准外,大部分SQL数据库都拥有私有的扩展.SQL对大小写不敏感.某些数据库系统要求在SQL命令末端使用分号,这样可以执行一 ...
- Git-Jenkins-代码的上线
第一章:自动化上线代码基本介绍 1.软件开发生命周期 老板的创意---产品经理---立项---开发团队---测试团队---运维上线 产品经理---加需求---开发团队---测试----更新代码,上线 ...
- 上古神器vim系列之移动三板斧
[导读] 前文总结了vim如何进入,如何保存退出,如何进入编辑模式.本文来总结一些稍微进阶的内容,在normal模式下如何高效的浏览代码. 模式回顾 在normal模式下主要用于浏览代码,那么有哪些方 ...
- [软件版本贴]SD.TEAM软件集
手机轰炸机-版本:v1.0.下载地址:http://pan.baidu.com/1.zip! 营销软件盒-版本:v1.0.下载地址:http://pan.baidu.com/2.zip! 不加群提取群 ...
- 百万年薪架构师一文整理RabbitMQ、ActiveMQ、RocketMQ、Kafka
一般来说,大型应用通常会被拆分成多个子系统,这些子系统可能会部署在多台机器上,也可能只是一台机器的多个进程中,这样的应用就是分布式应用.在讨论分布式应用时,很多初学者会把它和集群这个概念搞混,因为从部 ...
- data类型的url
所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在网页中直接嵌入,而不是从外部文件载入.例如对于img这个Ta ...