CSS（盒子模型，定位，浮动，扩展）

CSS

  • 盒子模型：
    • 外边距：
    • 内边距：
    • 水平居中：
  • 定位：
    • 相对定位：
    • 绝对定位：
    • 固定定位：
  • 浮动：
  • 扩展：

盒子模型：

盒子模型(Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
 
标签：div

 
 

外边距：

margin-top: 50px;设置外边距 - 上边距。

margin-left: 50px;设置外边距 - 左边距。

margin-right: 50px;设置外边距 - 右边距。

margin-bottom: 50px;设置外边距 - 下边距。

上下左右的外边距都相同，简化为 margin: 50px;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** 	margin-top: 50px;设置外边距 - 上边距margin-left: 50px;设置外边距 - 左边距margin-right: 50px;设置外边距 - 右边距margin-bottom: 50px;设置外边距 - 下边距*/margin: 50px;}			</style></head><body><div>今天天气真好</div></body>
</html>

 
 

内边距：

padding-top: 50px;设置内边距 - 上边距
padding-left: 50px;设置内边距 - 左边距
padding-right: 50px;设置内边距 - 右边距
padding-bottom: 50px; 设置内边距 - 下边距

上下左右的内边距都相同，简化为 padding: 50px;

注意：能不使用内边距就不使用，因为老版本的IE浏览器不支持，而且会把盒子撑变形！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** 	padding-top: 50px;padding-left: 50px;padding-right: 50px;padding-bottom: 50px; */padding: 50px;}			</style></head><body><div>今天天气真好</div></body>
</html>

 
 

水平居中：

水平居中：margin: 0 auto;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;margin: 0 auto;/*水平居中*/}			</style></head><body><div>今天天气真好</div></body>
</html>

 
 

定位：

 

相对定位：

相对定位：保留原有位置，相对于原有位置进行位移。
 
position: relative;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;/*相对定位：保留原有位置，相对于原有位置进行位移*/position: relative;/*距离定位位置上边缘50px*/top: 50px;/*距离定位位置左边缘50px*/left: 50px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

 

 

绝对定位：

绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移。
 
position: absolute;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;position: relative;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;/*绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移*/position: absolute;/*距离定位位置上边缘50px*/top: 50px;/*距离定位位置左边缘50px*/left: 50px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

 

 

固定定位：

固定定位：将元素固定到页面的某个位置，一直保持不变。
 
position: fixed;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{/*固定定位：将元素固定到页面的某个位置*/position: fixed;top: 80%;left: 90%;}</style></head><body><div><a href="#top">置顶</a></div><a name="top"></a><!--下锚点--><a href="#new01">法治</a><!--定位到锚点处--><a href="#new02">国际</a><!--定位到锚点处--><a href="#new03">娱乐</a><!--定位到锚点处--><a name="new01"></a><!--下锚点--><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><a name="new02"></a><!--下锚点--><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><a name="new03"></a><!--下锚点--><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1></body>
</html>

 
 

浮动：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 50%;height: 100px;float: left;}#box02{width: 50%;height: 100px;float: right;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>

扩展：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;}input{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 5px;/*圆角属性*/box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}img{/*圆形*/border-radius: 50%;}</style></head><body><input type="button" value="普通按钮" /><br /><img src="../img/花.jpg" width="100px" height="100px" /></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/847949.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java核心: 使用instrumentation

Java核心: 使用instrumentation

在上一篇Java核心: 注解处理器我们提到&#xff0c;通过实现AbstractProcessor&#xff0c;并调用javac -processor能够生成代码来实现特殊逻辑。不过它存在两个明显的问题: 只能新增源文件来扩展逻辑&#xff0c;无法修改现有的类或方法必须有一个单独的编译过程&#xff0c;…
阅读更多...
3毛钱的QC协议芯片TYPE-C USB快充接口物理层IC

3毛钱的QC协议芯片TYPE-C USB快充接口物理层IC

前言&#xff1a; 现在基本使TYPE-C打天下了。很多产品和TYPEC息息相关&#xff0c;如笔记本的电源接口&#xff0c;手机更不用说了&#xff0c;甚至电烙铁也使TYPE-C接口的了&#xff0c;很多涉及采用TYPE-C接口的快充接口&#xff0c;简单的可以用电阻欺骗快充头&#xff0c…
阅读更多...
什么是it运维工单系统？有哪些应用价值？

什么是it运维工单系统？有哪些应用价值？

it运维工单系统是一个智能化的it运维服务管理系统&#xff0c;可以为企业和服务提供商提供高效的it运维服务管理&#xff0c;它可以自动分配任务、优化工作流程并跟踪工作进展&#xff0c;从而大大提高it运维工作效率和客户满意度。 一、it运维工单系统是什么&#xff1f; it…
阅读更多...
100000开发的系统，执意重构钱多执念？

100000开发的系统，执意重构钱多执念？

收到一位客户询盘&#xff0c;要重做自己的系统&#xff0c;原因&#xff1a;嫌弃基于PHP做的系统服务器消耗大。咨询了好几拨人&#xff0c;觉得外包公司贵&#xff0c;个人程序员又不靠谱&#xff0c;总之一门心思要重构。 现状&#xff1a; 1、系统研发耗费100000。 2、目…
阅读更多...
Java编程常见问题汇总五

Java编程常见问题汇总五

系列文章目录 文章目录 系列文章目录前言一、捕获不可能出现的异常二、transient的误用三、不必要的初始化四、最好用静态final定义Log变量五、选择错误的类加载器 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分…
阅读更多...
docker create rm export exec命令详解

docker create rm export exec命令详解

容器生命周期管理命令教程-3 1. 创建容器 docker create&#xff1a;创建一个新的容器但不启动它。 docker create -it --name mycontainer ubuntu bash通常使用 docker run(详细可看上一篇关于run命令的详细介绍) 2. 删除容器 docker rm&#xff1a;删除一个或多个容器。 d…
阅读更多...
【python】 ModuleNotFoundError: No module named datasets

【python】 ModuleNotFoundError: No module named datasets

成功解决“ModuleNotFoundError: No module named datasets”错误的全面指南 在Python编程中&#xff0c;遇到ModuleNotFoundError: No module named datasets这样的错误通常意味着Python解释器无法找到名为datasets的模块。datasets是一个流行的Python库&#xff0c;常用于加载…
阅读更多...
[leetcode hot 150]第一百三十六题，只出现一次的数字

[leetcode hot 150]第一百三十六题，只出现一次的数字

题目&#xff1a; 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间。 根据题目关于空间、…
阅读更多...
心链9----组队功能开发以及请求参数包装类和包装类实现

心链9----组队功能开发以及请求参数包装类和包装类实现

心链 — 伙伴匹配系统 组队功能开发 需求分析 理想的应用场景 我要跟别人一起参加竞赛或者做项目&#xff0c;可以发起队伍或者加入别人的队伍 用户可以 创建 一个队伍&#xff0c;设置队伍的人数、队伍名称&#xff08;标题&#xff09;、描述、超时时间 P0 队长、剩余的人数…
阅读更多...
【WEB系列】过滤器Filter

【WEB系列】过滤器Filter

Filter&#xff0c;过滤器&#xff0c;属于Servlet规范&#xff0c;并不是Spring独有的。其作用从命名上也可以看出一二&#xff0c;拦截一个请求&#xff0c;做一些业务逻辑操作&#xff0c;然后可以决定请求是否可以继续往下分发&#xff0c;落到其他的Filter或者对应的Servl…
阅读更多...
海报在线制作系统

海报在线制作系统

文章转载自&#xff1a;FastAdmin海报在线制作系统 - 源码1688 应用介绍 介绍 新机构海报是一款基于FastAdminThinkPHP开发的一款新机构海报。 采用JavaScript vue canvas技术&#xff0c;实现在线一键制作海报&#xff0c;生成海报。 功能特性 1、自由创作 2、一键制作…
阅读更多...
Django使用正则表达式

Django使用正则表达式

本书1-7章样章及配套资源下载链接: https://pan.baidu.com/s/1OGmhHxEMf2ZdozkUnDkAkA?pwdnanc 源码、PPT课件、教学视频等&#xff0c;可以从前言给出的下载信息下载&#xff0c;大家可以评估一下。 在Django框架的新版本&#xff08;v2.0 &#xff09;中&#xff0c;URLc…
阅读更多...
ECharts 图形化看板 模板（简单实用）

ECharts 图形化看板 模板（简单实用）

目录 一、官网 二、模板 ①定义请求​编辑 ② 将请求统一管理&#xff0c;别的页面引用多个请求时更便于导入。​编辑 ③最终模板 三、执行效果 四、后端代码 4.1 controller 4.2 xml 4.3 测试接口 一、官网 获取 ECharts - 入门篇 - 使用手册 - Apache ECharts 二、…
阅读更多...
ARM32开发——串口库封装（初级）

ARM32开发——串口库封装（初级）

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 开发流程分组创建 接口定义完整代码 开发流程 在文件系统中&#xff0c;创建库目录Library在keil工程中&#xff0c;创建分组管理…
阅读更多...
Vue3-组件通信详解

Vue3-组件通信详解

文章目录 组件通信的含义Vue3组件通信和Vue2的区别组件通信的具体实现props&#xff08;父子组件通信&#xff09;自定义事件&#xff08;子传父&#xff09;mitt&#xff08;任意组件间通信&#xff09;v-model$attrs &#xff08;非props的父子组件通信&#xff09; r e f s …
阅读更多...
知识图谱应用---智慧金融

知识图谱应用---智慧金融

文章目录 智慧金融典型应用 智慧金融 智慧金融作为一个有机整体&#xff0c;知识图谱提供了金融领域知识提取、融合、分析、推断、决策等功能&#xff0c;如下图所示。在场景方面&#xff0c;智慧金融涵盖智慧支付、智慧财富管理、智慧银行、智慧证券、智慧保险、智慧风控等诸多…
阅读更多...
智能分析设备助力废固运输车辆信息采集

智能分析设备助力废固运输车辆信息采集

进出车辆信息采集&#xff0c;这一环节可谓是整个废固生产及处理企业监管体系中的基石。前端摄像机以其敏锐的感知能力&#xff0c;精准捕捉废固运输车辆的车牌、车头、车尾以及车厢的细致画面&#xff0c;同时记录下对应的视频流信息。这些信息的采集不仅为后续的监管提供了详…
阅读更多...
Git存储库的推送保护

Git存储库的推送保护

Git存储库的推送保护 昨天有一个提交一直提示&#xff1a;Push rejected Push rejected Push master to origin/master was rejected by remote起初在网络上找各种解决办法&#xff0c;先列举以下找到的各类方法 提交用户的用户名和邮箱与Git不一致&#xff0c;这个只需要通…
阅读更多...
Warning：成交前，永远相信意外即将发生

Warning：成交前，永远相信意外即将发生

作为一名首次次创业者&#xff0c;随着创业进入深层次阶段&#xff0c;越来越感觉到&#xff1a;创业是一条不归路&#xff0c;因为路上不止有惊喜&#xff0c;还有风尘。创业之前我认为世界是“天圆地方”的&#xff0c; 创业后你猜我怎么看这个世界的&#xff1f; 创业前我一…
阅读更多...
项目-基于LangChain的ChatPDF系统

项目-基于LangChain的ChatPDF系统

问答系统需求文档 一、项目概述 本项目旨在开发一个能够上传 PDF 文件&#xff0c;并基于 PDF 内容进行问答互动的系统。用户可以上传 PDF 文件&#xff0c;系统将解析 PDF 内容&#xff0c;并允许用户通过对话框进行问答互动&#xff0c;获取有关 PDF 文件内容的信息。 二、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023