第18章 CSS控制元素的布局演示文稿.PPTVIP

第18章 CSS控制元素的布局 在使用CSS布局页面的时候，通常使用布局属性进行来构建页面的框架和各个具体的内容部分。合理的使用布局属性，可以使页面的显示更加灵活。在CSS中，布局属性包括，浮动属性（float）、清除浮动属性（clear）、剪切属性（clip）、溢出属性（overflow）、显示方式属性（display）、可视属性（visibility），其具体内容如下所示。 18.1 元素的浮动 在网页中，使用浮动属性，可以更改块元素的默认显示方式，将原本换行显示的块元素同行显示。通过使用浮动元素和盒模型中的各种属性，可以对各种页面元素进行布局，下面进行详细讲解。 18.1.1 元素的浮动属性float 元素的浮动属性（float），用来定义块元素的浮动方式。在浮动属性中，可以使用4种属性值，分别为static、absolute、fixed、relative。 18.1.2 浮动元素和固定元素 在制作页面的时候，如果相邻的两个元素中一个为浮动元素，另一个为固定元素。则最终的显示效果，和元素之间的位置有关。如果浮动元素处于固定元素之前，则固定元素和浮动元素同行显示（是否同行显示还和父元素的宽度有关，这里假定父元素足够宽）。如果浮动元素处于固定元素之后，则浮动元素换行显示。 18.1.3 两个浮动元素的显示效果 在制作页面的时候，相邻的两个浮动元素，子父元素足够大的情况下，会同行显示。如果两个元素中定义的浮动属性值不同，则两个元素分别显示在父元素的两侧，中间空白区域显示父元素的背景颜色或图像。 18.1.4 多个浮动元素的显示顺序 在制作页面的时候，如果同时使用多个浮动元素，页面会按照浮动元素定义的先后对元素进行排列。后定义的元素默认的排列在先定义元素的旁边。 18.2 浮动的清除 在网页中，由于使用浮动元素的时候，会影响后面相邻的固定元素。由于在不同的浏览器中，对浮动属性的解释存在差异，所以需要对某些浮动的属性进行清除。清除浮动元素时，使用的属性是清除浮动属性（clear），下面进行详细讲解。 18.2.1 清除浮动属性clear 清除浮动属性（clear），用来清除与元素相邻的浮动元素。在清除浮动属性clear中，可以使用4种属性值，分别为none、left、right、both。 18.2.2 清除浮动与固定元素 当清除浮动元素右侧的浮动元素的时候，由于固定元素在浮动元素的后面时，会同行显示，所以无法显示清除浮动的效果。在实际使用清除浮动属性的时候，常常会忽略这一点，造成布局上的困扰。 18.3 内容的剪切 在CSS中，可以使用剪切属性，对元素内容的可视化区域进行控制。剪切区域所使用的属性时clip属性，其中元素属性值的写法，和其他的属性略有不同，下面进行详细讲解。 18.3.1 内容的剪切属性clip 内容的剪切属性（clip），用来裁减元素的可视化范围。在内容的剪切属性，可以使用2种属性值，一种为auto值，另一种为区域值。 18.3.2 剪切属性与内容 在使用剪切属性的时候，元素内容的显示方式并不发生改变。元素中的内容，在剪切区域之外的部分将会消失，但是元素占有的空间并不发生改变。 18.4 溢出内容的控制 在一个元素中，有时候会发生内容超出元素定义大小的情况。在CSS中，可以使用溢出属性（overflow）对溢出的内容，定义几种显示方式，例如隐藏或者显示滚条等。使用溢出属性可以方便的控制溢出内容的显示，并能够保证元素的大小不被破坏，下面进行详细讲解。 18.4.1 溢出属性overflow 溢出属性（overflow），用来定义元素溢出部分的显示方式。在溢出属性中，可以使用4个属性值，分别为visible、auto、hidden、scroll。 18.4.2 横向溢出属性overflow-x 横向溢出属性（overflow-x），用来定义元素溢出部分在水平方向上的显示方式。在横向溢出属性中，使用的属性值和溢出属性（overflow）的属性值完全相同，其语法结构如下所示。 18.4.3 纵向溢出属性overflow-y 纵向溢出属性，用来定义元素溢出部分在垂直方向上的显示方式。在纵向溢出属性中，使用的属性值和溢出属性（overflow）的属性值完全相同，其语法结构如下所示。 18.4.4 滚条和边框 在使用溢出属性的时候，如果定义元素显示滚条，同时定义了边框，要注意滚条和边框之间的关系。滚条的部分会显示在边框的内部，如果在滚条处不想显示边框，则可以通过定义单侧边框属性，取消滚条一侧的边框。 18.5 元素的显示方式 在CSS中，可以通过相应的属性，控制元素的显示方式。例如，可以将原本以内联方式显示的元素，以块元素的方式显示。更改元素显示方式使用的是显示方式属性disp