CSS3教程4——页面布局

2024-03-07 08:06:44

4、页面布局——浮动

4.1、标准文档流

标准文档流：块级元素自上而下的排列，内联（行内）元素自左向右地排列，以流动的形式。

块级元素：

h1-h6 p div

行内元素：不管如何设置宽和高都只会布局一个一个行内，而不是块的形状

span a img strong

行内元素可以被包含在块级元素中，反之不可。

4.2、display

改变元素的块级还是行内元素

display:
block 块元素
inline 行内元素
inline-block 块元素，但是可以内联，在一行
none 消失

这也是一种实现行内元素排列的方式，但是我们多数情况使用float

4.3、float

float可以选择左浮动或者右浮动，float会漂浮到标准流的上方，不会影响块级元素的正常标准流。但是标准流中其他块元素中的内联元素会自动检测float边界，并环绕在其周围。

同时设置为float的块，会逐个贴在一行

4.4、父级边框塌陷

由于子元素设置为浮动，导致父级边框塌陷

clear:
right 右侧不允许浮动
left 左侧不允许浮动
both 左右都不允许浮动

解决方案：

增加父级元素高度

#father{
    border:1px #000 solid;
    height:800px;
}

增加空的div标签清楚浮动

<div class="clear"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}

overflow 给父类添加一个overflow

#father{
    border:1px #000 solid;
    overflow: hidden;
}

给父类添加一个伪类after（市面上最认可的）

#father:after{
    content:'';
    display:block;
    clear;both;
}

小结：

浮动元素后面加空div

简单，但是代码多余
设置父元素的高度

简单，不灵活
overflow

简单，下拉的一些场景避免使用
父类添加一个伪类：after

写法稍微复杂，但是没有副作用，推荐使用

4.5、display和float对比

display

方向不可控制
float

浮动起来会脱离标准文档流，需要解决父级边框塌陷

5、页面布局——定位

5.1、相对定位

/*相对定位：相对于自己原来的位置定位*/
#first{
    position:relative;
    bottom:10px;
    top:-20px;
    right: 10px;
    left: 10px
}

相对定位：relative

相对于原来的位置，进行指定的偏移。相对定位的话，它原来的位置仍然保留在标准文档流之中。

5.2、绝对定位

定位：基于xxx定位，上下左右

没有父级元素定位的前提下，相对页面（body标签的边框）定位
父级元素进行了定位（即设置了position属性，即便没有设置具体位置），也会相对父级元素进行定位，并且不会超出父级元素

#first{
    position:absolute;
    bottom:10px;
    top:-20px;
    right: 10px;
    left: 10px
}

5.3、固定定位

定位：基于浏览器的定位，上下左右

#first{
    position:fixed;
    bottom:10px;
    top:-20px;
    right: 10px;
    left: 10px
}

5.4、z-index

一个固定属性。

固定定位会将元素脱离文档流，完全浮于上方，通过设z-index的层级，可以是排列不同的元素图层，z-index越大，位置越靠上。

5.5、一些布局方法（摘自head first html）

凝胶布局

将全部内容放到一个div标签中，通过指定div标签外边距为auto，会自动地适应网页的页面，而内容会居于页面中间
两栏布局

设置布局display:table;和display:table-row，可以实现同等高度的两栏，在解决双栏设计的时候比较好看

6、动画

可以直接在百度搜索示例，进行修改

码农公寓