第18章++CSS控制元素的布局.ppt

第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中，可以通过相应的属性，控制元素的显示方式。例如，可以将原本以内联方式显示的元素，以块元素的方式显示。更改元素显示方式使用的是显示方式属性display。通过使用显示方式属性，可以方便的更改元素默认的显示方式，制作处特殊的显示效果，例如导航的图片转换效果等。下面进行详细讲解。,18.5.1显示方式属性display,显示方式属性（display），用来更改元素默认的显示方式。在显示方式属性中，可以使用的属性值有很多，其中部分属性值还不被浏览器所支持。,18.5.2内联块属性值的异常显示,在使用内联块属性值（inline-block）的时候，IE浏览器对该属性值支持的并不完整。当在内联元素中使用时，元素可以显示块属性，同时保留原有的内联属性。当在块元素中使用时，元素可以显示块属性，但无法显示内联属性。,18.5.3隐藏属性值none,在使用隐藏属性值（none）的时候，不但隐藏了元素包含的内容，同时元素所占有的物理空间也一起消失了。在页面中，其他元素将忽略隐藏元素的存在，按照各自原有的方式显示。,18.6元素的可视性,元素的可视性，是只元素是否可见。在CSS中，可以通过可视属性（visibility），控制元素的可视性。使用可视属性，只能完全显示或者隐藏相应元素，无法显示部分元素内容。下面进行详细讲解。,18.6.1可视属性visibility,可视属性（visibility），用来定义元素及其内容是否可见。在显示方式属性中，可以使用3个属性值，分别为，visible、collapse、hidden。,18.6.2可视性