CSS基础3——定位&浮动&装饰&精灵图

moneyhu545

已于 2024-05-01 12:05:10 修改

阅读量1.1k

点赞数 34

文章标签： css html 前端

于 2024-04-30 19:55:59 首次发布

本文链接：https://blog.csdn.net/moneyhu/article/details/138354721

版权

本节笔记整理了盒子的背景相关属性，并结合相关案例总结了定位的类型及其用法、浮动的使用场景和使用方法、为了加强用户体验的一些装饰类型、精灵图的使用。
视频参考链接：前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程

背景相关属性

背景颜色

属性名：background_color (bgc)
注意点：
- 背景颜色默认透明
- 背景颜色不会影响盒子大小，且能看清盒子大小和位置，一般在布局中会习惯先给盒子设置背景颜色
代码表示

背景图片

属性名：background-image(bgi)
属性值：background-image: url(‘图片的路径’)
注意点
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是给盒子起到装饰作用的效果，类似于背景颜色，不能撑开盒子

背景平铺(让小的背景图片平铺大盒子)

属性名：background-repeat(bgr)
属性值：

取值效果
repeat (默认值)水平和垂直方向都平铺
no-repeat 不平铺(常用)
repeat-x 沿着水平方向(x轴平铺)
repeat-y 沿着垂直方向(y轴平铺)

取值	效果
repeat	(默认值)水平和垂直方向都平铺
no-repeat	不平铺(常用)
repeat-x	沿着水平方向(x轴平铺)
repeat-y	沿着垂直方向(y轴平铺)

背景位置

属性名：background-position(bgp)
属性值：background-position: 水平方向位置垂直方向位置
注意：方位名词和坐标取值可以混用。正数：向右向下移动；负数：向左向上移动
代码表示：

背景相关属性连写

属性名：background
属性值：单个属性值的合写，取值之间用空格隔开
书写顺序(无)，但是推荐：background: color image repeat position
省略：可以按照需求省略
代码表示
注意：如果背景图位置给的是英文单词，则可以颠倒顺序；是数值，则不能颠倒顺序

img和背景图的区别：在实际开发中，如果图片比较重要，则用img；装饰性的图片，用背景图

定位

定位作用：可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况

搭建一个网页，需要用到如下布局方式：标准流、浮动、定位

使用定位的步骤

设置定位方式
- 属性名：position
- 常见属性值
  
  定位方式属性值
  静态定位 static
  相对定位 relative
  绝对定位 absolute
  固定定位 fixed
设置偏移值
- 偏移值设置分两个方向，水平和垂直方向各选一个使用即可
- 选取的原则：就近原则
  
  方向属性名属性值含义
  水平 left 数字+px 距离左边的距离
  水平 right 数字+px 距离右边的距离
  垂直 top 数字+px 距离上边的距离
  垂直 bottom 数字+px 距离下边的距离

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

相对定位

特点
- 虽然改变了位置，但是也会占用原来的位置，所以没有脱标
- 具备原有的块显示模式
- 参照自己原有位置来移动
- 当四个方向都有数的时候，水平以left为准，垂直以top为准
代码表示(表示现有位置移动后左边离原来位置100px，上边离原来位置200px)

补充小知识点：对于div的父子级关系，子级块状元素是叠加的，对于平行关系，两者是换行的

绝对定位

步骤：先找到已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位。若有父级，但父级没有定位，以浏览器窗口为参照定位(工作中一般参照有定位的父级修改位置)
特点：
- 相对于非静态定位的父元素进行定位移动
- 只有position: absolute时，原来的box标准流脱标，浮动在原有位置上
- 改变标签的显示模式特点：具备行内块的特点(一行共存，且宽高生效)
- 一般工作中采用父级相对定位，子级绝对定位

定位居中显示

若将盒子设置为绝对定位，则将该盒子设: margin: 0 auto 显示的时候，居中失效。
解决方法示例：

在这里插入图片描述

效果显示：(盒子的左边移动到参照物(父级元素)的50%处显示)
若需要将盒子显示在正中间：加上位移margin-left: -200px(盒子宽度的一半)；
对于垂直居中：和上面的方法差不多: top: 50%；然后加上位移margin-top: -盒子高度的一半；
如果想用机算而非手算位移，则可以用下面代码

transform:translate(-50%,-50%)

表示含义为：向上、向左移动自己宽高的一半，若为正数，则是向下向右移动自己宽高的一半
案例：

代码展示：

<style>
    .banner {
        margin: 0 auto;
        position: relative;
        width: 1226px;
        height: 600px;    
    }
    .banner img {
        width: 1226px;
        height: 600px;
    }
    .mask{
        position: absolute;
        bottom: 0;
        right:-20px;
        /* 注意：需要加上宽度，因为盒子只有高度没有宽度，是无法显示的 */
        width: 1226px;
        /*也可以写成width:100%;*/
        height: 150px;
        background-color: rgba(0,0,0,.5);
    }
</style>


<body>
    <div class="banner">
        <img src="./images/banner.png" alt="">
        <div class="mask"></div>
    </div>
</body>

效果图：
在这里插入图片描述

固定定位

位置不随鼠标滚动而发生变化

position: fixed;
特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置 -> 已经脱标
- 具备行内块的特点，需要设置宽高尺寸

元素的层级关系

不同布局方式元素的层级关系：
- 标准流 < 浮动 < 定位(即标准流是显示在最底端的，定位在最上面)
- 不同定位之间的层级关系
  - 如果在两个同级元素中都设置了定位，则在效果图中显示后面的元素压到前面的元素
  - 如果想改变顺序，则使用z-index(需要配合定位使用): 整数，取值越大，显示顺序越靠上

浮动

如果将div转为行内块，两个块之间会有间隙，可以用浮动解决。浮动还有图文环绕功能
代码表示(图文环绕)
代码表示(块在一行，没有间隙)
- 将two改为left，则div之间没有间隙
特点
- 浮动元素会脱离标准流，在标准流中不占位置
  
  解释：但是two这个文本不会占用one的位置，半脱离
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
  
  解释：浮动的标签是顶对齐的
- 一行可以显示多个，且可以设置宽高
- 可以对浮动元素设置上外边距
- 浮动元素不能通过text-align: center和margin: 0 auto居中(但是可以设置间隙margin-right…)

案例：

代码：先将外面的大盒子设置高宽且居中显示，然后再在大盒子中放浮动内容

<style>
    /* 注意：在最大的内容中一定要设置宽高，里面才能放内容，即下面的浮动窗口才能放里面 */
    .center{
        width: 1226px;
        height: 460px;
        margin: 0 auto;
    }
    .new1{
        height: 40px;
        background-color: #333;
    }
    .new2{
        width: 1226px;
        height: 100px;
        background-color: #ffc0cb;
        /*版心居中！！！*/
        margin:0 auto;
    }
    .new3{
        width: 234px;
        height: 460px;
        background-color: #ffa500;
        float: left;
    }
    .new4{
        width: 992px;
        height: 460px;
        background-color: #87ceeb;
        float: left;
    }
</style>

<body>
    <div class="new1"></div>
    <div class="new2"></div>
    <div class="center">
        <div class="new3"></div>
        <div class="new4"></div>
    </div>   
</body>

效果图：

CSS书写顺序：浏览器执行效率更高

浮动/display(元素转换模式)
盒子模型：margin(外边距)、border(边框线)、padding(内边距)、宽度高度、背景颜色…
文字的样式

案例1：小米模块

代码：先对整体去外边距和内边距，然后设计一个大盒子，居中显示，再设计左盒子和右盒子，将其浮动显示，对右盒子，则设计列表，先删除列表符号，然后对列表的盒子设置宽高以及背景颜色，最后对li盒子设计右外边距，利用公式将4n格式的右外边距去掉

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .big{
        width: 1226px;
        height: 614px;
        margin: 0 auto;
    }
    .left{
        float: left;
        width: 234px;
        height: 614px;
        background-color: #800080;
    }
    .right{
        float: right;
        width: 978px;
        height: 614px;
        /* background-color: #87ceeb; */
    }
    .right ul{
        list-style: none;
    }
    .right li{
        float: left;
        width: 234px;
        height: 300px;
        background-color: #87ceeb;
        margin-right: 14px;
        margin-bottom: 14px;
    }
    .right li:nth-child(4n){
        margin-right: 0;

    }
</style>

<body>
    <div class="big">
        <div class="left">

        </div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>

效果图

案例2：网页导航

代码：先设计大盒子居中，必须设计li套标签，然后设计超链接标签，设置让其浮动，宽高，字体颜色，以及背景颜色，最后设置鼠标悬停时候的背景颜色

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .big{
        margin: 0 auto;
        width: 640px;
        height: 50px;
    }
    .big ul{
        list-style: none;
    }
    .big a{
        float: left;
        width: 80px;
        height: 50px;
        text-decoration: none;
        font-size: 16px;
        color: #fff;
        background-color: #ffc0cb;
        text-align: center;
        line-height: 50px;
    }
    .big a:hover{
        background-color: #008000;
    }
</style>

<body>
    <div class="big">
        <ul>
            <li><a href="#">新闻1</a></li>
            <li><a href="#">新闻2</a></li>
            <li><a href="#">新闻3</a></li>
            <li><a href="#">新闻4</a></li>
            <li><a href="#">新闻5</a></li>
            <li><a href="#">新闻6</a></li>
            <li><a href="#">新闻7</a></li>
            <li><a href="#">新闻8</a></li>
        </ul>
        
    </div>
</body>

效果图

清除浮动

清除浮动带来的影响：浮动元素不能占标准流的位置，可能导致浮动元素和标准流元素重叠

如下(原因：浮动元素的父级元素没有高度)：
解决方法：
- 给浮动元素的父级加上高度。
- 额外标签法(缺点：代码变复杂)：针对有的元素不能加高度，在父元素内容的最后加上一个块级元素，然后给添加的块级元素设置clear: both
- 单伪元素清除法(常用)：用伪元素代替了额外标签
  - 代码表示：
  - ```
  /*基本写法*/
  .clearfix::after{
  	content:'';
  	display:block;
  	clear:both;
  }
  
  /*补充写法*/
  .clearfix::after{
  	content:'';
  	display:block;
  	clear:both;
  	height:0;
  	visibility:hidden;
  }
```
- 双伪元素清除法
  - 代码表示(.clearfix::before可以解决外边距塌陷问题，即父子级都是块级，子级加margin会影响父级的位置)
  - ```
  .clearfix::before,
  .clearfix::after{
  	content:'';
  	display:table;
  }
  .clearfix::after{
  	clear:both;
  }
```
- 给父元素设置overflow::hidden(外边距塌陷也用它)

装饰

垂直对齐方式

当浏览器遇到行内和行内块标签时，会当作文字处理，默认文字是按基线对齐的
属性名：vertical-align
属性值：

属性值效果
baseline 默认，基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

代码展示：

<style>
    input{
        height: 50px;
        /* 实现内减，让盒子的最终大小为50px */
        box-sizing: border-box;
        vertical-align: middle;
    }
</style>


<body>
    <input type="text"><input type="button" value="搜索">
</body>

效果图：

在这里插入图片描述

图片居中的几个常用场景
- 如果有两个行内块标签(左边为图片，右边是输入框)，想要让其居中显示，则需要对较大的块状元素设置垂直居中
- 若父级元素没有给高度，全靠内容(图片撑开)，则父级盒子会比图片底部多一点点，解决办法：对子级元素加上垂直居中
- 如果父级元素给了高度，想要图片在父级中居中显示，则需要给父级元素加上行高，然后给图片加上垂直居中。若想要图片水平居中，则需要在父级中添加text-align: center;

光标类型

设置鼠标在元素上显示的样式

属性名：cursor
常见属性值

属性值效果
default 默认值，箭头
pointer 小手效果，提示用户可以点击
text 工字形，提示用户可以选择文字
move 十字光标，提示用户可以移动
代码表示

属性值	效果
default	默认值，箭头
pointer	小手效果，提示用户可以点击
text	工字形，提示用户可以选择文字
move	十字光标，提示用户可以移动

边框圆角：让盒子的四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius(可以通过pxcook测)
属性值常见取值：数字+px、百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
代码展示：
边框角的常见应用：
- 画一个正圆：盒子必须是正方形，设置边框圆角为盒子宽高的一半: border-radius: 50%；
  - 如下：
- 胶囊按钮：盒子是长方形，设置变宽圆角为盒子高度的一半

overflow溢出部分展示效果

作用：如显示内容溢出盒子，则可以对溢出部分设计显示效果(隐藏、滚动条等)
属性名：overflow
常见属性值

属性值效果
visible 默认，溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出，都显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条
代码展示：

属性值	效果
visible	默认，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏

作用：网页中有的内容有和下拉菜单一样的效果，即鼠标悬停在元素时可以看见隐藏内容
常见属性：
- visibility: hidden;
  - 占位置的隐藏，虽然被隐藏了，但是原来所占的位置还在，别的元素不能来，不常用
- display: none;
  - 不占位的隐藏
  - 用法

拓展：元素的整体透明度

作用：让某元素的整体(包括内容)一起变透明
属性名：opacity
取值：0-1之间的数字；1：表示完全不透明，0表示完全透明

结构伪类选择器

作用：
- 在html中定位元素
- 减少对html中类的依赖，保持代码整洁
- 常用于查找某父级选择器中的子元素

选择器

选择器	说明
E: first-child{}	匹配父元素中第一个子元素，并且是E元素
E: last-child{}	匹配父元素中最后一个子元素，并且是E元素
E: nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E: nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素

代码表示

结构伪类公式

n的注意点，通过n可以组成常见公式

功能公式
偶数 2n、even
奇数 2n+1、2n-1、odd
找到前5个 -n+5
找到从第五个往后 n+5
代码表示

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第五个往后	n+5

伪元素：一般页面中的非主体内容可以使用伪元素

元素是html设置的标签；伪元素是由CSS模拟出的标签效果(一些不重要的小元素等等)

伪元素作用
::before 在父元素内容的最前添加一个伪元素
::after 在父元素内容的最后添加一个伪元素
必须设置content属性才能生效；伪元素默认是行内元素
代码表示(还可以对其设置宽高以及背景颜色)

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

精灵图的介绍

场景：项目中将多张小图片，合并成一张大图片。这张大图片称之为精灵图。这样只需要像服务器发送一次请求即可
优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
精灵图的使用步骤：
- 创建一个盒子，设置盒子的尺寸和小图尺寸相同
- 将精灵图设置为盒子的背景图片(为什么不是img，因为img是一整张大图，我们需要一张一张的小图 )
- 修改背景图位置
  
  通过pxcook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x,y；
代码展示

背景图片大小

(background-size: 宽度高度)

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比缩放，直到刚好填满整个盒子没有空白

background连写拓展：background: color image repeat position/size (background-size和background连写同时设置时，需要注意覆盖问题)

补充

盒子阴影

给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow

取值：

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，垂直偏移量，允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset(外阴影不写即可，默认就是外)	可选，将阴影改为内部阴影

过渡

作用：让元素样式慢慢的变化，常配合hover使用，增强网页的交互体验
属性名：transition(谁变换，谁加过渡属性)
常见取值

参数取值
过渡的属性 all: 所有能过渡的属性都过渡，具体属性名如： width，表示只有width有过渡
过渡的时长数字+s(秒)
注意点：
- 过渡需要：默认状态和hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同
  - 给默认值状态设置，鼠标移入移出都有过渡效果
  - 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

参数	取值
过渡的属性	all: 所有能过渡的属性都过渡，具体属性名如： width，表示只有width有过渡
过渡的时长	数字+s(秒)

代码表示

<style>
    .box{
        width: 300px;
        height: 300px;
        background-color: pink;
        /*让宽度和背景色变化*/
        transition: width 1s,background-color 2s;
    }
    /* 目前是鼠标点在上面直接变成800，若将其缓慢变化，则需要使用transition */
    .box:hover{
        width: 800px;
    }
</style>