【零基础入门】 css学习笔记（4）布局与定位介绍

nevermind 发布于2019-08-30 15:53 / 2912人阅读

摘要：内联元素在水平方向上相互挨着，总体上会从左上方流向右下方。，增加元素，设置属性，两个内联元素并排摆放，但只有左右方向有。还能与其它内联元素并排。

写在前面：
作为一个刚开始写技术博客的新手，看到有人收藏了文章，写作动力又猛增了。这应该就是写技术博客的好处之一：能给自己增加成就感和驱动力。

最近关于css布局和定位相关内容整理地有点慢，因为同时在做freecodecamp上的题，所以节奏有点慢。

布局与定位

CSS有三种基本的定位机制：普通流、浮动、绝对定位（其中position:fixed;是position:absolute的一个子类）。除非专门指定，否则所有的元素都在普通流中定位，即其位置由元素在html中的位置决定。
实际工作中，经常有元素不仅要并排，而且要能设置宽、高。但是普通流无法满足要求，因此需要脱离普通流。元素脱离普通流常用的方式：浮动、绝对定位
CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠。

1.1 普通流

1，在普通流中，浏览器如何摆放页面元素
流：是浏览器在页面上摆放html元素所用的方法。浏览器从html文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。

块元素：浏览器先显示文档中的第一个元素，然后换行；然后是第二个元素，接下来又是一个换行，如此继续。
● 占一行
● 能设置宽、高、margin 、padding属性；
● 如果不设置宽度，那么宽度将默认变为父亲的100%。

内联元素：在水平方向上相互挨着，总体上会从左上方流向右下方。
● 与其他行内元素并排显示，直到该行排满。
● 其宽度、高度根据其内容决定，设置宽、高属性无效果。
● 元素的padding和margin影响左右，不影响上下

display:inline-block; 该元素既具有block的宽、高特性，又具有inline的同行显示特性

1）浏览器并排摆放两个内联元素时：
若两个内联元素都有外边距，例如：左边元素外边距为10px，右边元素外边距为20px，则两个元素之间有30px空间。

2）浏览器上下放置两个块元素时：
会把它们共同的外边距折叠在一起，折叠后的外边距是两个外边距中较大的外边距。

举例说明：
1，span div 元素分别设置宽、高、边框，但span并没有被撑开。

2，在span中加入文本内容，则边框才能被撑开。

3，增加a元素，设置margin属性，两个内联元素并排摆放，但只有左右方向有margin。

4，span增加display:inline-block属性，则宽、高属性生效。还能与其它内联元素并排。

GPU云服务器云服务器零基础入门学习零基础入门深度学习零基础入门学习python 学习css布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116755.html

01 【零基础入门】html学习笔记（2）

摘要：，表单的两个常见属性为填写表单的人提供一个输入提示。可用于任何表单控件，表示这个域是必要的，如果不填，则无法提交表单。，表格，表格由行中的数据单元格组成，列隐含地定义在行中。，表格应用于表示表格数据，而不是建立页面布局。 1，如何设计一个页面 1）先规划好web页面的结构，首先画出一个草图，然后创建一个略图，最后再写html2）规划页面时，先设计大的块元素，再用内联元素...

kamushin233 2019-08-02 10:39 评论0 收藏0
【零基础入门】 css学习笔记（2）盒模型

摘要：盒模型，盒模型看待元素的一种方式，它将每个元素看作由一个盒子表示。盒子实际占用的大小是左左右右，属性细节一个块元素的默认宽度是，表示它会自动延伸占满可用的空间。表示元素之间的距离，在边框外部。不能对和指定颜色，添加任何装饰。盒模型 1，盒模型： CSS看待元素的一种方式，它将每个元素看作由一个盒子表示。 2，五个属性：从内往外： width:内容的宽度，而不是盒子的宽度； hei...

mrcode 2019-08-30 15:53 评论0 收藏0
【零基础入门】 css学习笔记（5）浮动

摘要：浮动元素性质，浮动的元素脱离标准流这个元素像从标准流中被删除一样。下图是左浮动时的显示效果。，浮动的元素会互相贴靠如果父元素的宽度能显示所有浮动元素，则浮动的元素会并排显示。，无论是块级元素行内元素，一旦浮动了，都可以设置宽高，不需要用。浮动 1.1、语法： float: left; 左浮动，元素往最左边靠； float: right; 右浮动，元素往最右边靠 1.2...

clasnake 2019-08-30 15:53 评论0 收藏0
【零基础入门】css学习笔记（6）清除浮动

摘要：清除浮动，为何要清除浮动浮动效果会带来不好的影响子元素浮动会带来父元素高度塌陷。，清除浮动的两大基本方式，运用清除浮动。元素流入页面时，在这个元素左边右边或两边不允许有浮动内容。除了是用来清除浮动的，其它代码都是为了隐藏掉生成的内容。清除浮动 1，为何要清除浮动浮动效果会带来不好的影响：子元素浮动会带来父元素高度塌陷。具体解释：当浮动框高度超出包含框时，包含框不会自动伸高来闭...

BingqiChen 2019-08-30 15:53 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0