【百度前端技术学院 Day7/8】布局
1. 定位
1.1 文档流
单个元素：
- 块级元素：内容宽度是其父元素的宽度的100％，并且与其内容一样高。
- 内联（行内）元素：高宽与他们的内容高宽一样。（所以不能为他们设置宽高）
元素之间的交互：
- 块级元素：在视口中垂直布局——每个都将显示在上一个元素下面的新行上。
- 内联元素：它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上。如果没有空间，那么溢出的文本或元素将向下移动到新行。
- 外边距折叠：两个外边距接触，则两个外边距中的较大者保留，较小的一个消失。
1.2 介绍定位
1.2.1 静态定位
静态定位是每个元素获取的默认值——它只是意味着将元素放入它在文档布局流中的正常位置。
1.2.2 相对定位
position: relative;
top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。
PS：描述和实际情况相反，比如你设置【top: 30px;】你将会看到你所选择的元素向下移动了30px，这是相对定位工作的方式。你可以想象一个力作用在这个盒子的顶部，将它向下推了30px。
1.2.3 绝对定位
position: absolute;
绝对定位的元素不再存在于正常文档布局流中。top，bottom，left和right以不同的方式在绝对定位，它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。
1.2.4 定位上下文
判断绝对定位元素的包含元素的方式：取决于绝对定位元素的父元素的position属性。
- 所有的父元素都没有显式地定义position属性：父元素默认情况下position属性都是static。绝对定位元素会被包含在初始块容器中（和浏览器视口一样的尺寸）。
- 其中一个父元素的position属性是relative：相对于这个父元素进行定位。
1.2.5 z-index
“z-index”是对z轴的参考（无单位）。正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。
1.2.6 固定定位
fixed：这与绝对定位的工作方式完全相同。绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。
1.2.7 position: sticky
被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点为止，此后它就变得固定了。
2. Flexbox
我们想要将哪些元素设置为Flexbox，就需要给这些flexible元素的父元素display设置为一个特定值——flex。
PS：如果想设置行内元素为flexible box，也可以设置display属性为inline-flex。
2.1 flex模型说明
- 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
- 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
- 设置了
display: flex的父元素被称之为 flex 容器（flex container）。 - 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）。
=> 主轴的方向可以设置，Flexbox提供了flex-direction这个属性：
row（默认值）/ column / row-reverse / cilumn-reverse （reverse为反向排列flex项）
flex是三个属性的缩写：flex-grow/flex-shrink /flex-basis
flex-grow：无单位比例flex-shrink：指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器flex-basis：最小值
2.2 换行
当在布局中使用了定宽或者定高时，可能会出现flexbox中子元素溢出破坏布局的情况。解决方法如下：
flex-wrap: wrap;
flex: 200px; //表示每个元素的宽度至少是200px
这样就实现了换行操作：任何溢出的元素都会被移到下一行。最后一行如果没有排满，那么最后一行的元素会变得更宽，以便把整个行填满。
PS：flex-direction 和 flex-wrap 可以缩写为 flex-flow 。
flex-direction: row;
flex-wrap: wrap; //下面这一句是一样的意思
flex-flow: row wrap;
2.3 flex项的动态尺寸
article {
flex:;
}
article:nth-of-type(3){
flex:;
}
我们设置的flex值是一个无单位的比例值，表示每个flex项沿主轴的可用空间大小。只看第一个article，表示每个元素占用的空间是相等的（占用空间是指设置padding和margin之后剩余的空间）。而后面一句表示第三个元素要占用两倍可用宽度。也就是说，前两个元素每个占1/4的空间，第三个元素占1/2。
article {
flex: 1 200px;
}
article:nth-of-type(3){
flex: 2 200px;
}
这里的200px是给flex指定了最小值。意味着给每个项首先分出200px可用空间，剩余的空间再根据设置的比例进行分配。
=>flexbox的价值就在于它的响应性。如果调整浏览器窗口的大小或增加一个元素，布局仍然是正确的。
2.4 水平和垂直对齐
- align-items：控制flex项在交叉轴上的位置。
- stretch（默认值）：所有的flex项沿着交叉轴的拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽高，则变为最长的flex项的长度。
- center：这些项保持原有的高度，但在交叉轴居中。
- flex-start / flex-end：使flex项在交叉轴的开始/结束处对齐所有的值。
- justify-content：控制flex项在主轴上的位置。
- flex-start（默认值）：所有项都位于主轴的开始处。
- flex-end：所有项都位于结尾处。
- center：让flex项在主轴居中。
- space-around：让所有的flex项在主轴均匀地分布，再任意一段都留有一定的空间。
- space-between：不会在两端留下空间。
PS：align-self属性可以覆盖align-items的行为。
2.5 flex项排序
flexbox可以改变flex项布局位置，且不会影响到源程序。
button:first-child{
order:;
}
这里设置的order值是用于排序的。
所有flex项的默认order值是0，order值大的比小的显示顺序更加靠后，相同order值的项按照源顺序显示。当然也可以给order设置负值让他们排的更前面。
2.6 flex嵌套
一个元素是flex项，他同样可以成为一个flex容器，它的子节点也表现为flexible box。
3. 网页布局
3.1 一列布局
margin : 0 auto;
3.2 两列布局
1. 双inline-block
.wrapper {
font-size:;
}
.left, .right {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
.right {
width: calc(100% - 140px);
}
2. 双float
.wrapper{
overflow: auto;
}
.left, .right {
float: left;
box-sizing: border-box;
}
.right {
width: calc(100% - 140px);
}
3. float + margin-left
.wrapper-float {
overflow: hidden;
}
.left {
float: left;
}
.right {
margin-left: 150px;
}
4. absolute + margin-left
.left {
position: absolute;
}
.right {
margin-left: 150px;
}
5. float + BFC
.wrapper {
overflow: auto;
}
.left {
float: left;
margin-right: 20px;
}
.right {
margin-left:;
overflow: auto;
}
6. flex
.wrapper {
display: flex;
align-items: flex-start;
}
.left {
flex: 0 0 auto;
}
.right {
flex: 1 1 auto;
}
3.3 三列布局
三列布局指的是两侧定宽中间自适应。
1. 圣杯布局
为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
2. 双飞翼布局
为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
【百度前端技术学院 Day7/8】布局的更多相关文章
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 百度前端技术学院task1.10
任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...
- 百度前端技术学院（IFE）2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
- 通过Github Pages在线查看百度前端技术学院完成的任务成果
前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...
- 百度前端技术学院-task1.3源代码
因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...
- 百度前端技术学院-基础-day1
2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...
- 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局
1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...
- 百度前端技术学院-基础-day7.8
任务:参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...
- 对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记
HTML是什么,HTML5是什么? ——HTML:超文本标记语言,一种用于创建网页的标准标记语言: ——HTML5:目前最新的HTML标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的 ...
随机推荐
- 梳理继承中的has a和is a
面向对象中的继承问题,研究了一天 ,简单梳理下其中最重要的has a和is a 1.has a 一个类中使用了另一个类中的自定义的类型 这里Student中使用了Book 和 computer2.类型 ...
- Spring Bean 定义
Bean 定义 被称作 bean 的对象是构成应用程序的支柱.也是由 Spring IoC 容器管理的. bean 是一个被实例化,组装,并通过 Spring IoC 容器所管理的对象. 这些 bea ...
- Kubernetes Ingress简单入门
作者:Nick Ramirez 原文链接:https://thenewstack.io/kubernetes-ingress-for-beginners/ 本文转载自Rancher Labs 不知道你 ...
- 【Windows】win10：硬件良好，软件系统出错
平台:戴尔G3, win10 现象:能正常开机,开机后前几分钟内能打开部分应用,经过大约两分钟后系统无法正常使用. 分析:此次问题出现再新购买的笔记本电脑中,鉴于电脑刚买,硬件坏的可能性很小,然而为了 ...
- [Android应用开发] 02.界面展现和文件权限
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- 线程池 & 线程调度
线程池1. 第四种获取线程的方法:线程池,一个 ExecutorService,它使用可能的几个池线程之 一执行每个提交的任务, 通常使用 Executors 工厂方法配置. 2. 线程池可以解决两个 ...
- This的关键字的使用
this: 1.可以用来修饰属性 方法 构造器 2.this理解为当前对象或当前正在创建的对象. 3.可以在构造器中通过this()形参的方式显示的调用本类中其他重载的指定的构造器 要求: 在构造器 ...
- raw_input和input
昨天在OJ上做CTF的题目,发现有道python的题目很有意思,让我知道了raw_input和input的区别,并且能干一些别的事情. 官方文档上说,input()相当于eval(raw_input( ...
- 《CEO说》读后感
<CEO说>读书心得(1至3章): 成功的企业和街头小贩有着共性的商业智慧,能够透过复杂的表象看到商业的本质,化繁为简,抓住企业经营的根本要素(现金净流入.利润.周转率.资产收益率.业务增 ...
- Hystrix微服务容错处理及回调方法源码分析
前言 在 SpringCloud 微服务项目中,我们有了 Eureka 做服务的注册中心,进行服务的注册于发现和服务治理.使得我们可以摒弃硬编码式的 ip:端口 + 映射路径 来发送请求.我们有了 F ...