浮动定位

最新推荐文章于 2023-09-24 01:51:21 发布

Candycandyma

最新推荐文章于 2023-09-24 01:51:21 发布

阅读量440

点赞数

分类专栏： # css基础

本文链接：https://blog.csdn.net/Candycandyma/article/details/103962036

版权

css基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

浏览器的默认样式

通常情况下编写网页时需要去除浏览器的默认样式（PC端的页面）
重置样式表：专门用来对浏览器的样式进行重置的。
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一

CSS定位

定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。

通过使用 position 属性，我们可以选择 4 种不同类型的定位。
1、static
默认值，元素框正常生成。块级元素（div、p、h1等）生成一个矩形框，作为文档流的一部分，行内元素（span、strong等）则会创建一个或多个行框，置于其父元素中。

2、relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
即如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

（1）元素开启相对定位后，如果不设置偏移量，则元素不会发生任何变化
（2）相对定位会按照元素的原始位置对该元素进行移动。
（3）相对定位会提升元素的层级
（4）相对定位不会使元素脱离文档流
（5）相对定位不会改变元素的性质。块还是块，行内还是行内

<head>
<style type="text/css">
h2.pos_left {
	position:relative;
	left:-20px;
	}
#相对于正常标题往左
h2.pos_right {
	position:relative;
	left:20px;
}
#相对于正常标题往右
</style>
</head>

3、absolute
通过绝对定位，元素可以放置到页面上的任何位置。
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
（1）开启绝对定位后，如果不设置偏移量，元素的位置不会发生改变
（2）开启定位后，元素从文档流中脱离
（3）绝对定位会改变元素的性质，行内元素变成块元素，块元素的宽高被内容撑开
（4）绝对定位会提升元素的层级
（5）绝对定位元素是相对于其开启了定位的包含快进行定位

包含块：正常情况下，包含快就是离当前元素最近的祖先块元素;在绝对定位中，如果所有的祖先块元素都没有开启定位，则根元素就是他的包含块。

<head>
<style type="text/css">
h2.pos_abs {
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

注意：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
4、fixed
元素框的表现类似于将 position 设置为 absolute，唯一不同的是固定定位永远参照于浏览器的视口定位。固定定位的元素不会随着滚动条滚动。

<style type="text/css">
h2.pos_abs {
 position:fixed;
 right:100px;
 top:150px;
}
</style>

5、sticky属性：粘滞定位和相对定位基本一致，不同的是粘滞定位可以在元素达到某一位置时将其固定。

绝对定位元素布局

普通水平布局：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区宽度

开启定位后水平布局：
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块内容区宽度

当发生过度约束时：
如果9个值中没有auto的话则自动调整right值以使等式满足
如果有auto的话则自动调整auto的值以使等式满足

因为left、right的默认值是auto，如果不知道这两个值，则等式不满足时，将会自动调整这两个值。

注意：使开启绝对定位的元素在包含块中水平垂直居中，将left、right、top、bottom设置为0，margin设置为auto。

z-index 属性设置元素的堆叠顺序。需要一个整数作为参数，参数越大层级越高，层级越高越优先显示。默认为0。如果元素层级一样，则优先显示靠下的元素。祖先元素的层级再高，也不会盖住后代元素。

overflow属性：如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。默认值是 visible。可以设其值为hidden，隐藏超出的元素内容。设置其值为auto，可以使浏览器自动处理溢出。

<style type="text/css">
div {
    background-color:red;
    width:150px;
    height:150px;
    overflow:scroll;
}
</style>

vertical-align：设置元素的垂直对齐方式。text-top、text-bottom.

CSS浮动

通过浮动可以使一个元素向其父元素的左侧或者右侧移动。
使用float属性设置元素的浮动，none为默认值

注意：元素设置浮动以后，水平布局的等式便不再强制成立，该元素会完全从文档流中脱离，不再占用文档流的位置，所以该元素下边的还在文档流中的其他元素会自动向上移动。

浮动特点：
1、浮动元素完全脱离文档流，不在占用文档流位置
2、设置浮动以后元素会向父元素的左侧或者右侧移动
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或者右移动时，不会超过他前边的其他浮动元素
5、如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素，最多就是和他一样高

主要作用就是让页面中的元素可以水平排列。

元素浮动以后，脱离文档流的特点如下：
1、块元素：不再独占一行，且块元素的高度宽度默认被内容撑开，如果不设置宽高的话。
2、行内元素：脱离文档流后会变成块元素，特点和块元素一样，可以设置宽高等属性。

高度塌陷

在浮动布局中，父元素的高度是被子元素撑开的，当元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将无法撑起父元素的高度，导致父元素高度缺失。

父元素高度缺失以后，其下的元素会自动上移，导致页面布局混乱。

BFC（block formatting context）块级格式化环境
元素开启BFC后的特点：
1、开启BFC的元素不会被浮动元素覆盖
2、开启BFC的元素，子元素父元素外边距不会重叠
3、开启BFC的元素可以包含浮动的子元素

通过一些特殊方式开启元素的BFC：
1、设置元素浮动
2、将元素设置为行内块元素
3、将元素的overflow设置为一个非visible的值，常见的设置为hidden

clear

如果我们不希望某个元素因为其他元素浮动而的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素的影响。

可选值：
left：清除左侧浮动元素对当前元素的影响
right：清除左侧浮动元素对当前元素的影响
both：清除两侧中影响最大的那侧

原理：设置清除浮动后，浏览器会自动为该元素添加一个上外边距使其位置不受其他元素影响。

高度塌陷的最终方案

详见高度塌陷问题.html。

/* 可以同时解决高度塌陷和外边距重叠的问题 */
.clearfix::before,
.clearfix::after{
	content: "";
	display: table;
	clear: both; 
	}

Candycandyma

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浮动定位

CSS定位CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。通过使用 position 属性，我们可以选择 4 种不同类型的定位。static元素框正常生成。块级元素（div、p、h1等）生成一个矩形框，作为文档流的一部分，行内元素（span、strong等）则会创建一个或多个行框，置于其父元素中。relative元素框偏移某个距离。元素仍...
复制链接

扫一扫