【百度前端技术学院 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标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的 ...
随机推荐
- jupyter notebook 修改前端样式
目录 jupyter notebook主题 修改css和js 最终效果 jupyter notebook主题 作者的GitHub地址:https://github.com/dunovank/jupyt ...
- EF Join连接查询的坑
最近做项目的时候遇到一个需要级联查询的数据,表中又没有定义相关的外键约束,所以限定了咱们只能使用Join方式的关联而不是Include的方式关联,关于Include和Join的详细用法,本屌就不再此处 ...
- UVA11038
题目大意:见刘汝佳<算法竞赛入门经典——训练指南>P173 解题思路: 求出 0 到 m-1 这些数字中 0 出现的次数(此处要特判 m = 0 的情况),再求出 0 到 n 这些数字中 ...
- 使用Buildpacks高效构建Docker镜像
1. 前言 Spring Boot 2.3.0.RELEASE 正式发布了几天了,其中有个新的特性:可以将Spring Boot应用代码直接打包为Docker镜像.这是什么科技?我赶紧去官网查了一番才 ...
- PHP 获取上个月1号和上个月最后一天时间戳，下个月1号和下个月最后一天的时间戳
// 上个月的时间戳 $thismonth = date('m'); $thisyear = date('Y'); if ($thismonth == 1) { $lastmonth = 12; $l ...
- Multisim-74LS08\74LS02\74LS86逻辑功能仿真实验
一． 实验目的 了解TTL门电路的外观封装.引脚分布和使用方法. 掌握数字电路试验台.万用表和示波器的使用方法. 掌握TTL与门.或非门和异或门的逻辑功能. 认识门电路对信号的控制作用. 二．实验内容 ...
- [PHP学习教程 - 类库]001.全局唯一ID(GUID)
GUID: 即Globally Unique Identifier(全球唯一标识符) 也称作 UUID(Universally Unique IDentifier) . GUID 是一个通过特定算法产 ...
- python3程序开发指南——第1章 笔记
python文件的扩展名为.py ,但是python GUI程序的扩展名为.pyw 在python中,注释以#开始,作用范围为该行 IDLE提供了三个关键功能:输入python表达式与代码,并在pyt ...
- Xilinx ISE多功能移位寄存器仿真及Basys2实验板实验
移位寄存器实现Verilog代码: `timescale 1ns / 1ps module add( input clk, input reset, input [1:0] s, input dl, ...
- 【极客思考】计算机网络：Wireshark抓包分析TCP中的三次握手与四次挥手
[摘要]本文重点分析计算机网络中TCP协议中的握手和挥手的过程. [前提说明] 前段时间突然看到了一篇关于TCP/IP模型的文章,心想这段时间在家里也用wireshark抓了点包,那么想着想着就觉得需 ...