CSS页面布局

块元素在页面中以区域块的形式出现,其特点是,每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性
  行内元素与块元素可以通过display属性进行相互交换
  display属性常用的属性值及含义如下:
(1)inline:此元素将显示为行内元素(行内元素默认的 display属性值)
(2)block:此元素将显示为块元素(块元素默认的 display属性值)。
(3)inline- block:此元素将显示为行内块元素,可以对其设置宽度、高度和对齐等属性,但是该元素不会独占一行。
(4)none:此元素将被隐藏,不显示,也不占用页面空间,相当于该元素不存在。
  静态定位是元素默认的定位方式,是各个元素在HTML文档流中默认的位置。
  块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  在静态定位方式中,无法通过位置偏移属性(top、bottom、left或right)来改变元素的位置。
  静态定位是CSS中四种定位的一种,是默认的定位方式。
绝对定位是脱离文档流的,不占据其原来未移动时的位置
是相对于父级元素或更高的祖先级中有relative(相对)定位
并且离本元素层级关系上最近元素的左上角进行定位
如果在祖先元素中没有relative定位的,就默认相对于body进行定位。
  绝对定位是CSS中四种定位的一种。
z-index属性设置一个定位元素沿 z 轴的位置
z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
浮动脱离文档流
浮动可以左浮动、右浮动
浮动使用float属性
在盒子模型中的代表块元素的矩形对象,可以通过CSS样式来定义内容区域的高度与宽度,当这个内容无法容纳子矩形对象时,对于这些子矩形对象必须决定怎么显示,显示什么,这样的处理规则就称为溢出处理。

CSS溢出定义方法:
  overflow:visible|hidden|scroll|auto


在CSS中可以使用 visibility(可见性)来设置对象是否可见,该属性的语法格式如下所示:
   visibility: visible | hidden  ;


通过visibility属性设置横向菜单的某一个对象隐藏

visibility属性设置隐藏,但隐藏后其原来位置仍然被占用。
元素的边框(border)是围绕元素内容和内边距的一条或多条线。CSS中使用border属性设置元素边框的样式、宽度和颜色。
边框线定义方式如下:
border :  宽度、样式,颜色;
border-width,border-color
border-top....

内边距是指盒子模型的边框与显示内容之间的距离,使用padding属性进行定义。
语法格式如下:
  padding:像素值; 
  padding:像素值,像素值
  padding:像素值,像素值,像素值
  padding:像素值,像素值,像素值,像素值
在CSS 3中,过渡通过以下几个属性进行实现:
transition-property属性:规定设置过渡效果的 CSS 属性的名称。
transition-duration属性:规定完成过渡效果需要多少秒或毫秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:定义过渡效果何时开始。
CSS 3变形是一系列效果的集合,如平移、旋转、缩放和倾斜,每个效果都被称作为变形函数。
定义语法:   transform: none| transform-functions;