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属性。

  1. 所有的父元素都没有显式地定义position属性：父元素默认情况下position属性都是static。绝对定位元素会被包含在初始块容器中（和浏览器视口一样的尺寸）。
  2. 其中一个父元素的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】布局的更多相关文章

  1. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  2. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

  3. 百度前端技术学院（IFE）2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  4. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

  5. 百度前端技术学院-task1.3源代码

    因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...

  6. 百度前端技术学院-基础-day1

    2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...

  7. 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

    1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...

  8. 百度前端技术学院-基础-day7.8

    任务:参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...

  9. 对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记

    HTML是什么,HTML5是什么? ——HTML:超文本标记语言,一种用于创建网页的标准标记语言: ——HTML5:目前最新的HTML标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的 ...

随机推荐

  1. CleanWebpackPlugin最新版本使用问题

    如果在webpack 安装 CleanWebpackPlugin最新版本报错 如果是报下面的错误的话 然后在控制台向上翻 会发现 TypeError: CleanWebpackPlugin is no ...

  2. css 箭头三角形

    1.向下的三角形 .down{ display:inline-block; width:0px; height:0px; border-top:8px solid rgba(0, 0, 0, 0.65 ...

  3. wepy+vant-weapp踩坑记

    最近用了几个月的wepy框架,碰到了挺多问题,这里总结一下 1.clone的代码无法再本地运行,wepy报错 解决方案: 执行命令 : `npm install wepy-cli@1.6.1-alph ...

  4. Django模板之模板变量

    深度查询句点符(.)在模板语言中有特殊的含义. 当模版系统遇到点("."),它将以这样的顺序查询: 字典查询(Dictionary lookup) 属性或方法查询(Attribut ...

  5. Maven整合JaCoCo和Sonar，看看你的测试写够了没

    1 简介 单元测试是保证代码质量的重要一环,而如何衡量单元测试写得好不好呢?覆盖率(Coverage)是一个重要指标.而JaCoCo则是专门为Java提供的用于检测测试覆盖率的工具,英文全称为Java ...

  6. Spring @Required 注释

    @Required 注释应用于 bean 属性的 setter 方法,它表明受影响的 bean 属性在配置时必须放在 XML 配置文件中,否则容器就会抛出一个BeanInitializationExc ...

  7. BZOJ 1028 BZOJ 1029 //贪心

    1028: [JSOI2007]麻将 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2197  Solved: 989[Submit][Status][ ...

  8. PHP数组简单操作

    1.数字索引数组 1.1创建一个数组 php中最常用的两个类型是:数组,字符串.数组也分为两种,一种是数字索引,一种是关键是索引,关键字索引有点像python中字典的意思.数字索引类型的数组的创建方法 ...

  9. 读Pyqt4教程，带你入门Pyqt4 _004

    在PyQt4教程的这部分中,我们将探讨应用中事件和信号的发生. 事件是GUI程序的重要部分,由用户或者系统产生.当我们调用应用的 exec_() 方法,应用进入主循环.主循环获取事件并把它们发往对象. ...

  10. 服务器开发 Ubuntu

    一.Ubuntu安装: 为什么用Ubuntu,作为服务器初学者开发,如果真的要买苹果系统电脑性价比不高,所以在window系统中安装Linux虚拟机是不二之选.为什么用Ubuntu不多说了,开始安装吧 ...