css2

最新推荐文章于 2024-05-26 19:30:00 发布

u011533553

最新推荐文章于 2024-05-26 19:30:00 发布

阅读量112

点赞数

文章标签： css

本文链接：https://blog.csdn.net/u011533553/article/details/107753535

版权

1、定位

● 包含块

○ 对于浮动元素，其包含块定义为最近的块级祖先元素。对于定位，CSS2定义以下行为：

■ “根元素”的包含块（也称为初始包含块）由用户代理建立。在HTML中，根元素就是html元素，不过有些

浏览器会使用body作为根元素。在大多数浏览器中初始包含块是一个视窗大小的矩形

■ 对于一个非根元素，如果其 position 值为 relative 或 static，包含块则由最近的块级框、表单元格或行内

块祖先框的内容边界构成

■ 对于一个非根元素，如果其 position 值为 absolute，包含块设置为最近的 position 值不是 static 的祖先

元素（可以是任何类型）

□ 如果这个祖先元素是块级元素，包含块则设置为该元素的内边距边界，换句话说，就是有边框界定的

区域

□ 如果没有祖先，元素的包含块定义为初始包含块

● 定位都是参照于包含块来定位的

● left、top、right、bottom、width、height 的默认值都是auto

● margin、padding 默认值是0

● border-width 默认值是 medium(中等大小)

● 百分比参照：

width：参照包含块的 width

height：参照包含块的 height

margin：参照包含块的 width

padding：参照包含块 width

2、浮动

浮动的元素会分两层

.up{
	width: 100px;
	height: 100px;
	backgroun-color: red;
}
.down{
	width: 100px;
	height: 100px;
	background-color: blue;
	float: left;
}
<div class="up">upupup</div>
<div class="down">downdowndown</div>

当下面的这个div浮动以后，颜色会将上面的div覆盖，但是下面div里面的文字会卡在上面这个div的下面

3、解决IE6下fixed失效问题

注意：在 html 和 body 标签中如果只有一个标签添加了 overflow 样式，那么 overflow 只会作用在文

档，即窗口右边出现滚动条，如果 html 和 body 两个标签都添加了 overflow，那么 html 上面的

overflow 样式作用于文档，而 body 上面的 overflow 样式作用于它自己，即 body上面会出现滚动条

<style>
    html{
        margin: 30px;
        border: 1px solid;
        height: 100%;	//相对于包含块的100%，即根元素的包含块是视窗大小
        overflow: scroll;
    }
    body{
        margin: 30px;
        border: 1px solid pink;
        height: 100%;	//相对于包含块的100%，即根元素的包含块是视窗大小
        overflow: scroll;
    }
</style>

使用绝对定位来模拟固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html{
            overflow: hidden;	//给文档添加overflow为hidden属性，让文档的滚动条消失
            height: 100%;
        }
        body{
            overflow: auto;	//文档滚动条消失后，给body设置overflow为auto，如果元素的高度大于视窗大小时，body会滚动
            height: 100%;
        }
        #test{
            position: absolute;	//设置绝对定位，让元素相对于视窗定位，由于视窗不会改变了，所以元素也不会移动
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div id="test"></div>
    <div style="height: 1000px"></div>

</body>
</html>

4、BFC

● BFC是什么

BFC(Block formatting context)直译为“块级格式化上下文”，它是一个独立的渲染区域，只有Block-level box

参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

● BFC布局规则

○ 内部的Box会在垂直方向，一个接一个地放置

○ BFC的区域不会与float box 重叠

○ 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

○ 计算BFC的高度时，浮动元素也参与计算。（清除浮动 hasLayout）

○ BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

● BFC什么时候出现(哪些元素会生成BFC？)

○ 根元素

○ float属性不为none

○ position为absolute或fixed

○ overflow不为visible

○ display为inline-block、table-cell、table-caption、flex、inline-flex

5、水平垂直居中

已知高宽水平垂直居中：

.inner{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
}

未知高宽水平垂直居中：

.inner{
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate3d(-50%, -50%, 0)
}

6、垂直居中

● 内容区：底线和顶线包裹的区域就是内容区

● 行内框：如果设置行高，字体显示时除了文字本身，文字的上面和下面由于行高存在还会有一块多的区域，而

且他们是相等的，将文字本身加上文字上边以及下边的距离就是行内框

一行上垂直对齐时，以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行

内框的高度

vertical-align

top：元素及其后代的顶端与整行的顶端对齐

bottom：元素及其后代的底端与整行的底端对齐

middle：元素中线与父元素的小写x中线对齐

text-top：元素顶端与父元素字体的顶端对齐

text-bottom：元素底端与父元素字体的底端对齐

让内联元素水平垂直居中：

#wrap{
	height: 400px;
	width: 400px;
	border: 1px solid;
	margin: 0 auto;
	text-align: center;
}
#wrap:after{
	content: "";
	display: inline-block;
	height: 100%;
	width: 0px;
	vertical-align: middle;
}
#wrap img{
	vertical-align: top;
}

<div id="wrap">
    <img src="img/img1.png" width="150px"/>
</div>

u011533553

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css2

1、定位 ● 包含块 ○ 对于浮动元素，其包含块定义为最近的块级祖先元素。对于定位，CSS2定义以下行为： ■ “根元素”的包含块（也称为初始包含块）由用户代理建立。在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元素。在大多数浏览器中初始包含块是一个视窗大小的矩形 ■ 对于一个非根元素，如果其 position 值为 relative 或 static，包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成 ■ 对于一
复制链接

扫一扫