第五章 CSS页面布局基础

Posted littlejava

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第五章 CSS页面布局基础相关的知识,希望对你有一定的参考价值。

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清除。

以上是关于第五章 CSS页面布局基础的主要内容,如果未能解决你的问题,请参考以下文章

Web开发

python第五十天 (HTML, CSS)

Web开发·期末不挂之第五章·CSS盒子模型(盒子模型各属性&行级元素和块级元素&导航栏的实现)

WPF学习第五章 理解WPF的布局

Web前端开发笔记——第三章 CSS语言 第五节 盒子模型

HTML5与CSS3基础