盒子和css背景

最新推荐文章于 2024-03-17 09:00:44 发布
最新推荐文章于 2024-03-17 09:00:44 发布
阅读量60 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44433423/article/details/116917248
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .h1:hover{
            border-width: 3px;
            border-style: dotted;
            border-color: blue;
            border-left-width: 2px;
            border-right-width: 2px;
            border-top-style: solid;
            border-left-style: dotted;
            border-right-style: dotted;
            border-bottom-style: solid;
            padding: 10px 5px 3px 0px;
        }
        .p1:hover{
            /* 上右下左的方向 */
            border-width: 5px 2px 10px 0px;
            border-style: dashed groove double;
            border-color: blue;
            /* 设置复合属性 */
            border:2px double blue;
            margin: 40px;
            text-align: center;
        }
        img{
            width: 100px;
            height: 200px;
        }
        /* 超出div的范围自动加入滚动条 */
        div{
            width: 200px;
            height: 100px;
            overflow: auto;
            background-color: yellow;
            background-repeat: repeat;
        }
      body{
          background-image: url("Hydrangeas.jpg");
          /* 水平上平铺 */
          background-repeat: repeat;
          /* 背景图像是否滚动 */
          background-attachment: fixed;
          background-position: right bottom;

          }
      
    </style>
</head> 
<body>
    <h1 class="h1">四川大学锦江学院</h1>
    <p class="p1">计算机学院</p>
    <img src="Hydrangeas.jpg" alt="">
    <div><p>
        计算机计算机计算机        
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        计算机计算机计算机
        
        
        </p></div>
</body>
</html>
Pretty Fairy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS盒子模型和背景
weixin_43748832的博客
11-29 2425
、CSS盒子模型 1.什么是盒子模型 所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻。 一个盒子是由四个部分组成 ①　“内容–content”（盒子内的物件）、 ②　“内间距–padding”（物件和盒子的距离）、 ③　“边框–border”（盒子壁）、 ④　“外间距–margin”（盒子和其它物体的距离） 组成，如下示例图： 2.IE盒子模型与w3c的盒子模型 (1)由...
html盒子背景图,CSS盒子模型以及背景图
weixin_42515781的博客
06-16 4674
===========本文共1500字================CSS盒子模型---边框内容区域边框box-shadow: none;边框宽度 border-width边框样式 border-style边框颜色 border-color复写属性：宽度、样式、颜色圆角 border-radius 取值可以为px 或是百分比小三角：通过border设置CSS盒子模型---内容区域​ 宽度：w...
css背景图铺满盒子
learn_daydayUp的博客
12-13 6662
背景图片铺满整个盒子大小 uniapp-H5 .wrapper { background: url(/static/sorry.png) no-repeat center center; background-size: 100%; width: 100vw; height: 100vh; background-attachment: fixed; }
CSS背景属性和盒子模型
2302_80088975的博客
03-17 988
css背景，盒子模型相关知识
css 背景撑开盒子高度
qq_41498791的博客
11-29 756
背景图片撑开盒子 需求： 给定1980px1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(19801080)=576px 问题： 背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用img标签插入这张图，撑开容器达到模拟背景的目的，当然这么做的话其他元素只能选择浮动或者定位来排版了。 解决： 图
css背景图撑开盒子高度
chauncywu的博客
12-07 8401
本文原地址 需求： 给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px 问题： 背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用i...
css背景虚化
m0_65972155的博客
11-30 519
css背景虚化
第四讲 CSS盒子模型-背景
Fiki515的博客
03-07 1506
一、盒子模型-背景 1、background-color：定义标签的背景颜色 2、background-image：定义背景图片,可定义多背景 例：background-image：url("图片路径")； 3、background-repeat：定义背景图片的显示方式 repeat 图片重复 repeat-x 图片横向重复 repeat-y 图片纵向重复 no-repeat 图片不重复 4、background-position：定义背景图片的
一、CSS背景样式[背景样式、盒子阴影]
黑日里不灭的light
09-29 478
（默认图片显示在左上角），相当于在盒子里面展示出露出来的内容；解释：背景尺寸设置，默认图片按其大小只显示左上角（根据盒子大小显示）解释：该裁切比较有意思，其实就是图片显示的范围。解释：使用背景固定可以实现一种很好看的效果。（不太懂这个区域的请认真阅读前篇。用的比较少，可以自行查询资料。
css背景缩放
lxllxl211的博客
10-23 673
contain等比拉伸 当宽度或高度 铺满div盒子就不再拉伸了。/* background-size: 高度 宽度;里面的单位可以是% 相对于父盒子来说的。cover完全覆盖盒子 会导致显示不全。运行结果：只展示了contain的效果。只设置一个参数为等比缩放。可能会出现空白区域*/
深入理解CSS中的盒子模型
09-27
CSS中的盒子模型（Box Model）是网页布局的基础，它定义了元素如何占据空间并与其他元素交互。这个模型将每个HTML元素视为一个矩形盒子，包含了...了解和熟练运用盒子模型，可以提升CSS编码的效率和网页设计的质量。
css盒子模型 css margin 外边框合并
09-25
CSS盒子模型是Web开发中非常基础且核心的概念之一，它定义了元素框处理内容、内边距、边框和外边距的方式。了解和掌握CSS盒子模型，对于进行前端开发和网页布局至关重要。 首先，CSS盒子模型由四个部分组成：内容...
css盒子模型
08-22
在"CSS盒子模型应用"的压缩包文件中，可能包含了示例代码、实例演示和解释，帮助你更直观地理解并掌握CSS盒子模型的运用。通过实践这些例子，你将能够更好地应用盒子模型解决实际的网页布局问题。
CSS 理解盒子模型
09-25
内容区域的宽度和高度可以通过CSS的`width`和`height`属性来设置。如果未指定宽度和高度，内容区域将根据其内容自动调整大小。 2. **内边距(padding)**: 内边距位于内容区域与边框之间，用于增加元素内部的空间，使...
css:盒子模型
11-13
除了基本的布局功能外，CSS盒子模型还可以用来创建各种视觉效果，比如通过调整边框大小和颜色来绘制简单的图形。 ```html <!DOCTYPE html> .triangle { width: 0; height: 0; border: 100px solid ...
计算机网络实验三：UDP协议探索和分析
最新发布
08-24
【实验目的】 1、掌握UDP协议数据格式； 2、掌握UDP首部各字段含义； 3、了解网卡offload技术； 4、熟悉Linux下nc命令的使用方法。
基于springboot和vue的 一站式家装服务管理系统 源码 （优秀毕业设计源码）
08-24
1. 一站式家装服务管理系统 代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
Linux教程-磁盘相关-分区-文件系统-挂载-软连接硬连接.zip
08-24
涵盖了Linux系统管理的核心概念和技能。包含加密文件的知识点，逐步深入到磁盘分区的基础知识（分为两部分详细讲解），进而探讨文件系统和挂载的原理。教程还包括对挂载信息的详细解读，以及磁盘空间耗尽的两种常见情况分析。此外，重点讲解了软连接和硬链接的区别，并提供了额外的补充材料以加深理解。适合Linux初学者和系统管理员提升对文件系统管理、磁盘空间优化和链接应用的实战能力。
java源码资源一个支持servlet的web服务器
08-24
java源码资源一个支持servlet的web服务器提取方式是百度网盘分享地址
css背景图片自适应盒子
05-26
要让背景图片自适应盒子，可以使用CSS3中的background-size属性。具体实现方法如下： 1. 设置背景图片 ```css .box { background-image: url('图片路径'); } ``` 2. 设置背景图片的大小 在background-size属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值