第五章 CSS页面布局基础

Posted 2020-07-20 littlejava

1、标准文档流

         在正常流中，在没有使用浮动或者定位的情况下，文本元素按照从上到下、从左到右的格式布局。这是浏览器的默认行为。在正常流中，块级元素从上到下依次排列，而行级元素从左到右依次排列。正常流中的元素影响其相邻元素的位置。

         2、块级元素

• 前后换行显示，默认状态下独占一行；
• 块级元素可以作为容器，包含其他行级元素、块级元素；
• 块级元素有一定高度和宽度，可以通过width和height来设置。
• div,table,p,h1-h6,ul,form等等

3、行级元素（内嵌元素、内联标签）

• 类似于文本的显示方式，从左到右逐行显示
• 行级元素不支持高、宽，由其内容大小决定
• span,label,a,img,input,textarea等等
• 通过display:block 可以将行级元素转换为块级元素

4、display属性规定了生成的框的类型：none 不显示;inline 行级元素;block 块级元素;inline-block：行内块级元素（本质还是行级元素，但是可以支持高宽）

5、选择器

• 类别选择器 .类名的方式选择；
• 类型选择器（元素选择器） 元素名的方式选择；
• ID选择器 #ID的方式选择（ID在网页中是唯一的）；
• 属性选择器 [属性名][属性名]或者[属性名=属性值]的方式选择
• 群组选择器（分组选择器） 多个元素样式属性一致时，可以共同调用一个声明，元素之间用逗号分隔；
• 伪类选择器 元素:属性，first-child第一个子元素；如a.a1:link{}，a#a2:link{}，input:focus （鼠标悬停）；
• 伪元素：元素::属性，如first-line,first-letter，before，after
• 后代选择器（包含选择器）用来选择特定元素或元素组的后代 父代和子代之间用空格分隔；
• 子类选择器 选择特定元素的直接子代；
• 通用选择器 *方式选择，优先级最低
• 相邻兄弟选择器 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素；

6、CSS框模型概述

         元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡气候的任何元素。

6.1、内边距：

         padding，使用padding会调整内容和盒子之间的距离。增加内边距会增加盒子大小。

6.2、边框

         border:px color style

6.3、外边距

         margin 表示盒子与盒子之间的距离。

7、使用负边距会使文档流发生偏移，不会占据原来的空间。

8、position:relative 相对定位。

• 使用相对定位不会影响元素本身，仍保持其定位前的形状；
• 不会脱离文档流，只是发生了偏移，不影响文本流中接下来的其它层的位置；
• 层的层叠级别高于默认的文本流级别。

9、static 静态定位（默认）；relative相对定位；absolute 绝对定位；fixed 固定定位，类似于absolute，不过其包含块是视窗本身。

10、position:absolute，使用一到多个偏移属性相对于其容器块儿的边缘进行定位，没有设置偏移属性的默认为auto；使用绝对定位会设置当前元素dislay:inline-block元素框从文档流中完全删除，不占用原来空间，不影响其它元素。如果容器块没有设置position属性或者position值为static时，将以body或者html的坐标原点作为参考

11、margin、padding 边距设置为auto时可以让模块自适应调整居中。

12、! important 将权重设置为最重要，将其它相关的css属性权重设为0.

13、z-index （定位层级）相当于z轴坐标，越大显示在最前面。注：必须配合position使用。

14、position:fixed固定在窗口某一位置，始终保持在视线里，常用于做导航。

15、float使元素在一行显示，为每个元素设置了inline-block；元素不设置高宽时，高和宽由内容决定；浮动按照一定的顺序进行排列，碰到父元素的边界或者前一个兄弟元素也会停止下来；

16、float会使元素脱离文档流，且原来的位置不占空间了。如果想清除浮动可以clear清除。