day03 CSS定位 布局

最新推荐文章于 2024-08-10 21:02:05 发布
最新推荐文章于 2024-08-10 21:02:05 发布
阅读量861 收藏 29
点赞数 24
分类专栏： HTML 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liang_z_/article/details/139595968
版权

目录

CSS定位

介绍

流定位

浮动定位

浮动过程

导航栏

相对定位

绝对定位

定位属性​编辑

z-index

父相子绝

固定定位

flex布局

基本概念

定义容器​编辑​编辑

flex属性

flex-direction

justify-content

align-items

flex-wrap

间隙

项目属性​编辑

order

flex-grow

flex-shrink

align-self

图标

使用方式

图标调整

具体使用

CSS定位

介绍

流定位

元素的默认显示规则,块元素上下排列 行内元素水平排列 通过margin跳转元素之间的位置

浮动定位

浮动过程

  • 元素浮动后脱离普通流定位,自身会释放位置,底下的元素会占用该元素的位置

  • 当两个浮动元素进行左浮或右浮时,会按照先来后到,水平排列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            
            #div2{
                width: 130px;
                height: 130px;
                background-color: cadetblue;
                float: left;
            }
            
            #div3{
                width: 150px;
                height: 150px;
                background-color: deeppink;
                clear: both;
            }
            
            
        </style>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </body>
</html>

导航栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            
            ol{
                list-style-type: none;
            }
            
            ol li{
                width: 80px;
                height: 50px;
                line-height: 50px;
                float: left;
                background-color: cadetblue;
                color: #fff;
                text-align: center;
            }
            
            ol li:hover{
                background-color: darkcyan;
                color: cornflowerblue;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        
        <ol>
            <li>首页</li>
            <li>电视剧</li>
            <li>电影</li>
            <li>动漫</li>
            <li>综艺</li>
            <li>纪录片</li>
        </ol>
    </body>
</html>

相对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                left: 150px;
                top:30px;
                z-index: 10;
            }
            
            #div2{
                width: 130px;
                height: 130px;
                background-color: cadetblue;
                position: relative;
                left: 40px;
                top:30px;
                z-index: 15;
            }
            
            #div3{
                width: 150px;
                height: 150px;
                background-color: deeppink;
                position: relative;
                z-index: 20;
            }
        </style>
    </head>
    <body>
        
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </body>
</html>

绝对定位

定位属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                background-color: red;
            
            }
            
            #div2{
                width: 130px;
                height: 130px;
                background-color: cadetblue;
            }
            
            #div3{
                width: 200px;
                height: 200px;
                background-color: deeppink;
                position: relative;
                left: 50px;
            }
            
            #div3 div{
                width: 100px;
                height: 100px;
                border: 2px solid black;
                position: absolute;
                left: 20px;
            }
        </style>
    </head>
    <body>
        
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">
            <div></div>
            
        </div>
        
    </body>
</html>

z-index

元素都必须定位才能使用z-index

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 绝对定位:释放原来的位置 */
            img{
                width: 150px;
                height: 150px;
            }
            
            #img1{
                position: absolute;
                left: 50px;
                top:80px;
                z-index: 20;
            }
            #img2{
                position: absolute;
                z-index: 30;
            }
            
            #img3{
                position: absolute;
                left:90px;
                top:30px;
                z-index: 40;
            }
        </style>
    </head>
    <body>
        <img src="../../img/1.jpg" id="img1">
        <img src="../../img/2.jpg" id="img2">
        <img src="../../img/3.jpg" id="img3">
    </body>
</html>

父相子绝

使用绝对定位时,一般要给父级进行相对定位,子级使用绝对定位,子级位置相对于最近的已经定位的父级元素偏移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 绝对定位:释放原来的位置 */
            #div1{
                width: 120px;
                height: 120px;
                border: 2px solid cadetblue;
                position: relative;
                left: 180px;
            }
            
            
            #div2{
                width: 120px;
                height: 120px;
                border: 2px solid red;
        
            }
            /*相对于div1的位置偏移 */
            #div1 div{
                width: 60px;
                height: 60px;
                border: 2px solid red;
                position: absolute;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div>
                
            </div>
            
        </div>
        <div id="div2"></div>
    </body>
</html>

固定定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 40%;
                height: 600px;
                padding-bottom: 500px;
                background-color: cadetblue;
            }
            
            button{
                position: fixed;
                left: 1500px;
                top:400px;
            }
            
        </style>
    </head>
    <body>
        <div></div>
        <button>回到顶部</button>
    </body>
</html>

flex布局

2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项（flex item）

使用flex,必须要定义容器

定义容器

flex属性

以下5个属性设置在容器上。

  • flex-direction

  • justify-content

  • flex-wrap

  • flex-flow

  • align-items

flex-direction

flex-direction属性决定flex项在主轴的排列方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
.container{
width: 480px;
height: 480px;
border: 2px solid red;
display: flex;/*定义容器 子元素会按照一定规则排列,子元素默认水平排列*/
flex-direction: row;
}
<div class="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div></div>
</div>

justify-content

justify-content属性定义了项目在主轴上的对齐方式。

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

.container{
width: 480px;
height: 480px;
border: 2px solid red;
display: flex;/*定义容器 子元素会按照一定规则排列,子元素默认水平排列*/
flex-direction: row;
justify-content: space-evenly;/*子元素均等分布*/
}
<div class="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div></div>
</div>

align-items

align-items属性定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

.container{
width: 480px;
height: 480px;
border: 2px solid red;
display: flex;/*定义容器 子元素会按照一定规则排列,子元素默认水平排列*/
flex-direction: row;
justify-content: space-evenly;/*子元素均等分布*/
align-items: center;/*子元素垂直居中*/
}
<div class="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div></div>
</div>

flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上。

flex-wrap属性定义，如果一条轴线排不下，如何换行。

0

 .box{
   flex-wrap: nowrap | wrap | wrap-reverse;
 }

  • nowrap（默认）：不换行

  • wrap：换行，第一行在上方。

  • wrap-reverse：换行，第一行在下方。

.container{
width: 480px;
height: 480px;
border: 2px solid red;
display: flex;/*定义容器 子元素会按照一定规则排列,子元素默认水平排列*/
flex-direction: row;
justify-content: space-evenly;/*子元素均等分布*/
align-items: center;/*子元素垂直居中*/
flex-wrap: wrap;/*宽度不够时自动换行*/
}
<div class="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div></div>
</div>

间隙

通过gap属性,可以调整项目之间的距离,但是使用时需要注意,当项目有最小距离,而gap值小于最小距离时不生效

column-gap:调整列之间的距离 单位px

row-gap:调整行之间的距离 单位px

gap:10px 20px 等价于 row-gap:10px;column-gap:20px;

项目属性

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0,可以为负数。

flex-grow

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .container{
                width: 480px;
                height: 480px;
                border: 2px solid red;
                display: flex;
            }
            
            .container>div{
                width: 150px;
                height: 150px;
                border: 2px solid cadetblue;
                box-sizing: border-box;
            }
            
            #div1{
                flex-grow: 2;
            }
            
            #div2{
                flex-grow: 1;
            }
            
            #div3{
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="div1">div1</div>
            <div id="div2">div2</div>
            <div id="div3">div3</div>
        </div>
    </body>
</html>

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .container{
                width: 450px;
                height: 450px;
                border: 2px solid red;
                display: flex;
            }
            .container>div{
                width: 150px;
                height: 150px;
                border: 2px solid cadetblue;
                box-sizing: border-box;
            }
            
            #div1{
                flex-shrink: 0;/*div1不缩小 其他元素等比例缩小*/
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="div1">div1</div>
            <div id="div2">div2</div>
            <div id="div3">div3</div>
            <div id="div4">div4</div>
        </div>
    </body>
</html>

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            
            
            .container{
                width: 450px;
                height: 450px;
                border: 2px solid red;
                display: flex;
                align-items: center;
                
                
            }
            .container>div{
                width: 150px;
                height: 150px;
                border: 2px solid cadetblue;
                box-sizing: border-box;
            }
            
            #div1{
                flex-shrink: 0;/*div1不缩小 其他元素等比例缩小*/
                align-self: flex-start;
                margin-top: 30px;
            }
            #div4{
                align-self: flex-start;
                
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="div1">div1</div>
            <div id="div2">div2</div>
            <div id="div3">div3</div>
            <div id="div4">div4</div>
        </div>
    </body>
</html>

图标

使用Alibaba矢量图标库

https://www.iconfont.cn/

使用方式

点击图标添加购物车 将购物车中的图标添加至项目

引入初始的css

.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
color:red;
}

使用svg引入图标

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-iconfontapple"></use>
</svg>

图标调整

使用font-size调整图标大小

.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    color:red;
    font-size: 26px;
}

具体使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="//at.alicdn.com/t/c/font_4165294_mpg01q44rmg.js"></script>
        <style>
            .icon {
                   width: 1em; height: 1em;
                   vertical-align: -0.15em;
                   fill: currentColor;
                   overflow: hidden;
                   font-size: 30px;
                   color: red;
                }
                
                .one{
                    width: 100px;
                    height: 50px;
                    display: flex;
                    align-items: center;
                }
        </style>
    </head>
    <body>
        
        <div class="one">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-pingguo"></use>
            </svg>
            <div>苹果</div>
        </div>
        
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-search-1-copy"></use>
        </svg>
        
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gouwudai"></use>
        </svg>
    </body>
</html>
爱看星星的猪_
关注
  • 24
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Css3的页面布局之定位
qq_56248592的博客
09-27 216
Day03 Css的学习深入 position 定位 CSS position 属性 值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "lef
day5.CSS定位布局
qq_45801179的博客
11-12 127
1.定位（position） 设定元素在文档中的位置。会将标签（元素）转换为块级。 1.1定位的分类 1)static:静态定位 默认值，没有定位，不设置偏移值（left/top/right/bottom）,占用标准流（文档流） 2）relative：相对定位 占用标准流（文档流），它会出现在文档流中它该出现的位置，通过设置偏移值改变其位置。它相对于自身位置所占的位置做偏移 3）absolute:绝对行为 脱离文档流，相对于body做偏移（left/top/right/bottom） 绝对定位一般与相对定位
CSS的布局 Day03
m0_74154295的博客
10-15 410
网页中HTML的标签多种多样，具有不同的特征。而我们学习盒子模型、使用定位和弹性布局把内容分块，利用CSS布局使内容脱离文本流，使用定位或弹性布局让每块内容摆放在想摆放的位置，让网站页面布局更合理、有条理。
CSS学习-DAY03-定位
qq_63014909的博客
07-14 1068
定位学习。
学习笔记~1.3 CSS 定位布局
qq_44888570的博客
09-26 244
1.3 CSS 定位布局 笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入一些自己的见解，同时会分享一些学习过程中遇到的问题和解决方法。 正文 1.定位（position) 设定元素在文档中的位置。会将标签（元素）转换为块级。 2.定位分类（属性值） 1）static:静态定位 默认值，没有定位，不能设置偏移值(left/top/right/b
css定位布局
weixin_74015202的博客
10-07 53
## CSS 定位布局 ### 1、定位的作用 普通文档流中块元素垂直排列，行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示。 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）。 ### 2、定位的实现 使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置。 定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位。 边
day7 CSS布局3
m0_70619994的博客
06-16 111
目录一、定位1、网页常见布局方式2、定位的常见使用场景3、使用定位的步骤4、静态定位5、相对定位6、绝对定位7、固定定位8、元素的层级关系二、装饰1、认识基线2、文字对齐问题3、垂直对齐方式4、光标类型5、边框圆角4、溢出部分显示效果5、元素本身隐藏6、拓展点（1）透明（2）边框合并（3）焦点伪类选择器（4）属性选择器（1）标准流（2）浮动（3）定位（1）可以解决盒子与盒子之间的层叠问题（2）可以让盒子始终固定在屏幕中的某个位置（1）设置定位方式（2）设置偏移值偏移值设置分为两个方向，水平和纯质方向各选一个
day54 css页面布局
xiaoyurainzi的博客
09-21 215
目录一 网页布局方式二 标准流三 浮动流 一 网页布局方式 #1、什么是网页布局方式 布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word，nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2、网页布局/排版的三种方式 2.1、标准流 2.2、浮动流 2.3、定位流 二 标准流 标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。 # 1 浏览器默认的排版方式就
前端8day-css 元素定位
weixin_59418570的博客
03-01 115
伪类选择器，伪对象选择器，position元素定位的用法以及一些常用的属性
Day06-CSS布局-浮动
07-10
浮动是CSS中的一个定位属性，由`float`关键字定义，可取值为`left`、`right`或`none`。当一个元素被设置为浮动，它会尽可能地向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边框。同时，其他非浮动...
CSS-day03.pdf
01-25
在 CSS 中，盒子模型是网页布局的基础，浮动和定位是实现网页布局的重要技术。下面我们将详细介绍盒子模型、浮动和定位的知识点。 盒子模型 盒子模型是 CSS 中的一个基本概念，它将 HTML 页面中的布局元素看作是一...
day07（CSS05-定位+装饰）.rar
12-01
"day07（CSS05-定位+装饰）.rar"这个压缩包包含了关于这一主题的学习资料，包括讲义、大纲和代码示例，为深入理解CSS定位和装饰提供了丰富的资源。 首先，让我们从CSS定位开始。定位在网页布局中扮演着核心角色，它...
day02_CSS预习笔记1
08-03
在实际应用中，CSS的布局知识如盒子模型（content、padding、border、margin）和定位（static、relative、absolute、fixed）也非常重要，它们决定了元素在页面上的位置和大小。此外，CSS还提供了许多高级特性，如...
day08（CSS06-定位+装饰）v1.0.pdf
02-17
【CSS定位】是CSS布局中的关键部分，它允许开发者精确控制元素在网页上的位置。定位的主要应用场景包括解决元素间的层叠问题以及固定元素在屏幕特定位置。定位方式主要有四种：静态定位、相对定位、绝对定位和固定...
css学习
polarisya的博客
08-07 186
【代码】css学习。
使用tailwindcss轻松实现移动端rem适配
最新发布
felix_alone2012的博客
08-10 228
本示例节选自小卷全栈开发实战系列的《Vue3实战》，将演示如何用所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。
前端面试宝典【CSS篇】【5】
BDawn的专栏
08-06 171
CSS 选择器的优先级（也称为“特异性”或“specificity”）是指当多个 CSS 规则应用于同一个 HTML 元素时，哪个规则会被应用。CSS 的优先级机制确保了样式规则能够按照预期的方式生效。 在 CSS 中，一些属性是可以被子元素继承的，这意味着子元素会自动采用父元素的这些属性值。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 449
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
浮动与定位：CSS布局的关键
本节主要探讨了CSS布局的三种主要机制：普通流（标准流）、浮动和定位。这三种机制帮助开发者有效地安排网页上的元素，使其符合设计需求。 1. 普通流（标准流） 普通流是元素默认的布局方式，分为块级元素和行内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值