—————————————————————————使用div/css布局—————————————————————————
1.如何实现固定宽度且居中的版式?
#container{
width:600px;/*固定宽度*/
margin:50px auto;/*设置这个层的左右边距为auto,这样可以实现居中*/
}
这样设置后在页面的body中顶层放置一个container层就能实现固定宽带且居中的版式,页面所有的内容都在这个层中。
注意,这个container是最顶层,其他的所用层都要嵌套在这个层中。一般来说,将这个最顶层设置为绝对宽度,其内的层设置为相对宽度,
即百分比,这样有助于整体的调节,提高可移植性。
2.平行层之间的关系:
所谓平行层就是指嵌套在同一个父层中的子层。可以将平行层的关系分成两种:垂直排列层和水平排列层。
>>垂直排列层
层块(div)默认的显示方式就是垂直显示,也就是说每个div块占用一行,是行级元素。
这里假定父层的宽度和高度都是给定的(实际情况也正是这样)。
我们自己定义的层必然要有其属性才行,一般的属性这样设置:
#mydiv{
width:100px or 90%;//设置层的宽度(绝对宽度或者相对宽度)
height:200px;//设置层的高度也可以设置层的最小高度min-height
margin:10px auto;//设置层相对于其它层的距离。这样设可以使得层相对于外层居中,因为左右宽度设置为了auto
//这里的10px为设置上下两个同级层的边界距离,也可以单独设置层的四个边界距离:如下
//margin-top:10px;margin-right:200px;margin-bottom:5px;margin-left:10px;
text-align:center;//设置层内文本的对齐方式
border:1px solid #000000;//设置层的边框(宽度、样式、颜色)
overflow:visible/hidden/auto/scroll;//设置当层中的内容超过层大小时的显示方式具体如下:
//visible:将所有内容都显示出来(如果设置的是绝对高度会显示在层外,如果设置的最小高度那么层就会自动增高(这种情况仅限于,内层无浮动))
//hidden:不显示层中的超出部分
//auto:当层设置了绝对宽度时如果层中的内容过多就会自动增加滚动条,当层中设置了最小宽度时如果层中内容过多层就会自动增高
//scroll:无论层中内容是否过多都会增加滚动条
}
>>水平排列层
通过上面的分析知道默认情况下的div是行级元素,但是如果希望在同一个父层下同级div同行显示,也是有办法的。
(1). 在div中设置这样一个属性会使得div变为非行级元素,即能够在一行显示(从左向右依次排列)。
display:inline-block; //注意,不能写成display:inline;
(2). 上面的方法可以使得div在一行内从左向右依次显示,但是往往有这种需求:在一个层中最左面有一个层,最右面有一个层。
这时可以指定div的浮动方向:float:left或者float:right
(3). 关于水平同行层换行的说明:将层设置为同行显示之后,层就会由左向右依次排列,但是假若一行之中的层有很多,一行排列不完,
那么就要换行显示了。这里的换行是自动的,页面会自动地找到换行点。
3.嵌套层之间的关系:
所谓嵌套层,就是父层中的子层,整个页面就是由不同的层嵌套形成的。前面说到,页面中所有的内容就是放在一个叫做container的层之中,也就是说,
其它层都是这个层的子层或者嵌套子层。这里重点研究父层与其直接子层之间的关系。
这里假定给出的父层属性参数确定:
#outer{
margin:50px auto;//将层居中
width:300px;//设置宽度
min-height:400px; //设置最小高度
border:1px solid #000000;//设置边框
padding:10px;//设置内边距
}
首先对父层的padding属性做以下说明:padding是设置内层边框距离外层边框的距离,他是以内层为基准的,也就是说:
父层会根据自身的padding值调整自己距离内层边框的距离,而内层不会由于外层padding值而变化。这里的padding值表示
了上下左右四个值,还可以逐个设置:padding-top,padding-right,padding-bottom,padding-left.
好了,下面说说子层:
#inner{
width:90%;
height:350px;
margin:30px auto;
border:1px dotted #00FFEE;
}
注意,一般来说,子层的属性值往往会决定父层的表现————比如,子层宽度高度超出父层的宽度高度,这样就导致了传说中的内容溢出。
为了解决这个问题就牵扯到了前面说过的overflow属性。一般情况下,程序员保证子层宽度不会溢出,这样就可以只关心高度上的溢出。
通常将overflow设置为auto,这样如果将高度设置为最小高度值:min-height:**px;那么父层就会自动增高,
如果将高度设置为绝对高度值,那么父层就会出现滚动条。
如果将overflow设置为hidden,那么溢出的部分将不显示在页面上。
另外需要注意的一点是子层的margin属性,它不会导致父层移动,但会由于margin值导致子层移动从而导致内容溢出。
使用div/css布局
最新推荐文章于 2023-09-23 15:51:54 发布