【CSS】几种CSS元素定位方法
自定义网页布局: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layoutposition定位relativeabsolutefloat布局leftrightclearflex布局概念 让布局变得灵活和直观 容器自己决定如何均匀分配它的子元素 – 包括子元素的大小和相互之间的间隔。 自动调整子元素的高和宽,来很好的填充任何不同屏幕大
position定位
position属性:
- static: 占据在正常的文档流中
- relative: 它与静态定位非常相似,占据在正常的文档流中,仍然可以修改top/bottom/left/right来精确指定它的最终位置,包括让它与页面上的其他元素重叠。
position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
- absolute: 元素会被移出正常文档流,并不为元素预留空间,绝对定位固定元素是相对于
<html>
元素或其最近的定位祖先
通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
- fixed: 元素会被移出正常文档流,并不为元素预留空间
而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。
- sticky: 相对位置和固定位置的混合体,它允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点(例如,从视口顶部起10像素)为止,就变得固定了
一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时),即便这个祖先不是最近的真实可滚动祖先。
应用举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Position:Sticky</title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
body { width: 500px; height: 1400px; margin: 0 auto; }
// 1. 可用于使导航栏随页面滚动直到特定点,然后粘贴在页面顶部。
dt { background-color: black; color: white; padding: 10px; margin: 1em 0; }
.sticky_dt{ background-color: red; position: sticky; top: 30px; left: 30px; }
// 2. 另一种有趣且常用的用法,是创建一个滚动索引页面。在此页面上,不同的标题会停留在页面顶部
dt { background-color: black; color: white; padding: 10px; margin: 1em 0; position: sticky; top: 0px; left: 0px;}
</style>
</head>
<body>
<dl>
<dt>A</dt> <dd>Apple</dd> <dd>Ant</dd> <dd>Altimeter</dd> <dd>Airplane</dd>
<dt class="sticky_dt">B</dt> <dd>Bird</dd> <dd>Buzzard</dd> <dd>Bee</dd> <dd>Beanstalk</dd>
<dt>C</dt> <dd>Calculator</dd> <dd>Cane</dd> <dd>Camera</dd> <dd>Camel</dd>
<dt>D</dt> <dd>Duck</dd> <dd>Dime</dd> <dd>Dipstick</dd> <dd>Drone</dd>
<dt>E</dt> <dd>Egg</dd> <dd>Elephant</dd> dd>Egret</dd>
</dl>
</body>
</html>
float布局
float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。
属性
- left: 表明元素必须浮动在其所在的块容器左侧的关键字。
- right: 表明元素必须浮动在其所在的块容器右侧的关键字。
- none: 表明元素不进行浮动的关键字。
- inline-start: 关键字,表明元素必须浮动在其所在块容器的开始一侧,在ltr脚本中是左侧,在rtl脚本中是右侧。
- inline-end: 关键字,表明元素必须浮动在其所在块容器的结束一侧,在ltr脚本中是右侧,在rtl脚本中是左侧。
clear清除浮动
clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。
属性
- none: 元素不会向下移动清除之前的浮动。
- left: 元素被向下移动用于清除之前的左浮动。
- right: 元素被向下移动用于清除之前的右浮动。
- both: 元素被向下移动用于清除之前的左右浮动。
flex布局
让布局变得灵活和直观 容器自己决定如何均匀分配它的子元素 – 包括子元素的大小和相互之间的间隔。 自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间 适用于应用组件和小比例布局 flex item(flex项)沿着主轴从左到右排列
解决问题:对齐方式,排列方向,排列顺序
属性
- display:flex
- Flex-direction 改变主轴方向 row/columu/row-reverse /column-reverse
- justify-content 控制 flex item(flex项) 在主轴(main axis)上的对齐
- flex-start: 元素和容器的左端对齐。
- flex-end: 元素和容器的右端对齐。
- center: 元素在容器里居中。
- space-between:元素之间保持相等的距离。
- space-around:元素周围保持相等的距离。
- align-items 属性则定义了 flex item(flex项) 在交叉轴(cross axis)上的对齐方式
- flex-start: 元素与容器的顶部对齐。
- flex-end: 元素与容器的底部对齐。
- center: 元素纵向居中。
- baseline: 元素在容器的基线位置显示。
- stretch: 元素被拉伸以填满整个容器。
- align-self 允许单独设置每个 flex item(flex项) 的对齐方式
- flex-basis 控制一个子元素(flex项)的默认大小,沿着轴线的长度
- flex-grow 初始值都是 1, 每个item的相对宽度
- flex-shrink 决定矩形子元素允许收缩多少的,主要用途是指定哪些 flex项 要缩小,哪些 flex项 不要缩小。默认情况下,每个矩形子元素(flex项)都为 1 – 这意味着每个矩形子元素将 随着容器收缩而收缩
- flex:flex-grow,flex-shrink 和 flex-basis 的缩写
推荐一个很好玩的Flex练习游戏:FlexBox Froggy
https://www.w3cplus.com/blog/tags/157.html
https://hufan-akari.github.io/solved-by-flexbox/
grid网格
- 特点
- 强大,灵活,简单
- 结构和表现分离
- 针对目标为大比例布局
两个核心组成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是实际的 grid(网格 ),items 是 grid(网格) 内的内容
二维的网格容器,我们需要定义列和行
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
定位和调整 items(子元素) 大小,使用 grid-column 和 grid-row 属性来设置起始grid:
grid-column: 1 / 4;
grid-row: 2 / 5;
推荐一个很好玩的Grid练习游戏:Grid Garden
更多推荐
所有评论(0)