06 CSS-盒子模型【尚硅谷JavaWeb教程】

news2024/12/26 23:27:56

06 CSS-盒子模型【尚硅谷JavaWeb教程】

JAVAWEB的学习笔记
学习视频来自:https://www.bilibili.com/video/BV1AS4y177xJ/?vd_source=75dce036dc8244310435eaf03de4e330

不同的浏览器导致前端展示页面不一样,盒子的大小的不同。(所以前端要考虑浏览器兼容问题)
IE 浏览器:实际尺寸 = width
chrome 浏览器: 实际尺寸 = width+左右borderwidth+padding

CSS 盒子模型(< div> < /div>):

  1. border 边框
  2. margin 间距
  3. padding 填充
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- 内部样式表 -->
    <style type="text/css">
        #div1 {
            background-color: aquamarine;
            width: 400px;
            height: 400px;

            /*border 边框样式*/
            border-width: 1px; /*边框粗细*/
            border-style: solid; /*边框样式:solid(实线), dotted(点状线) ...*/
            border-color: blue; /*边框颜色*/

            /*合并上面三个属性 表示*/
            /*border: 4px double blue;*/

            /*border-top: 4px dotted blue;  !*上边框*!*/
        }
        #div2{
            width: 150px;
            height: 150px;
            background-color: chocolate;

            /*设计离边框距离,使其居中*/
            margin-top:100px;
            margin-left: 100px;

            /*一个值,四个方向统一;两个值:上下、左右;三个值:上、左右、下;四个值:上右下左*/
            /*margin: 100px 100px 50px 150px;*/


            /*padding : 填充*/
            padding-top: 50px;
            padding-left: 50px;
            /*padding-bottom: 50px;*/
            /*padding-right: 50px;*/
        }
        #div3{
            background-color: gray;
            width: 100px;
            height: 100px;

            /*margin-top: 50px;*/
            /*margin-left: 50px;*/
        }
        /* 让边框紧贴网页左上角 */
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">&nbsp;</div>
        </div>
    </div>
</body>
</html>

<!--
不同的浏览器导致前端展示页面不一样,盒子的大小的不同。
IE 浏览器:实际尺寸 = width
chrome 浏览器: 实际尺寸 = width+左右borderwidth+padding

CSS 盒子模型:
1. border 边框
2. margin 间距
3. padding 填充
-->

效果展示(谷歌浏览器):
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

奇迹mu开服教程

奇迹mu开服教程&#xff1a;开服服务端的架设及开服注意事项服务器推荐奇迹开服需要准备什么&#xff1f;开服大概成本分析奇迹MU商业服务端版本&#xff1a;1.02W、1.03H、1.03K、S6EP3、S7EP2、S9EP2&#xff1b;HE网站系统&#xff1a;绑定域名授权&#xff0c;功能可定制&a…

Jenkins部署项目一(物理机器部署SpringBoot项目)

一、Jenkins部署SpringBoot项目 设备&#xff1a;MacOS 准备工作 1.已安装java开发工具包JDK 2.已安装依赖管理工具Maven 3.已安装代码版本控制工具Git 4.已安装Jenkins learn-moon代码地址&#xff1a;https://github.com/BillDavidup/learn-moon SSH: gitgithub.com:Bil…

【学Vue就跟玩一样】如何使用集中式状态管理的Vuex以及如何模块化编码+命名空间

1.vuex是什么一个专门在Vue中实现集中式状态管理的一个Vue插件,可以对vue应用中多个组件的共享状态进行集中式的管理(读取/写入)&#xff0c;也是一种组件间通信的方式&#xff0c;并且适用于任意组件间通信2.什么时候使用Vuex1.多个组件依赖于同一状态2.来自不同组件的行为需要…

Goland入门指南(使用Goland创建并运行项目)

在文章《Goland下载和安装》详细介绍了 Goland 的安装和破解&#xff0c;本节我们来介绍一下怎么使用 Goland 来创建并运行一个项目。 创建项目 首先&#xff0c;在“文件”菜单中找到“New”&#xff0c;并在下一级菜单中选择“Project”来创建一个新项目。 为项目选择一个…

【vim】C语言代码提示

前言 常见的C语言提示插件是YouCompleteMe&#xff0c;这个插件安装比较麻烦&#xff0c;在这推荐一款coc.nvim这个插件&#xff0c;github仓库地址&#xff1a;https://github.com/neoclide/coc.nvim/ 下面是安装步骤。 一、安装 nodejs 1、终端命令安装 curl -sL instal…

SpringMVC DispatcherServlet源码(2) 扫描Controller创建HandlerMapping流程

Spring MVC向容器注册一个RequestMappingInfoHandlerMapping组件&#xff0c;他会扫描容器中的Controller组件&#xff0c;创建RequestMappingInfo并注册HandlerMethod映射关系。 本文将阅读Spring MVC源码分析上述流程。 RequestMappingHandlerMapping组件 Creates Request…

java ssm校园兼职发布与互动平台的设计与实现

该系统基于B/S即所谓浏览器/服务器模式&#xff0c;应用JSP技术&#xff0c;选择MySQL作为后台数据库。系统主要包括个人中心、用户管理、企业管理、企业信息管理、兼职信息管理、职位申请管理、职位类型管理、交流中心、留言反馈、系统管理等功能模块。 使用校园兼职发布与互动…

JavaWeb:会话技术之Session

Cookie已经能完成一次会话多次请求之间的数据共享&#xff0c;之前我们还提到过Session也可以实现&#xff0c;那么&#xff1a; 什么是Session&#xff1f;Session如何来使用&#xff1f;Session是如何实现的&#xff1f;Session的使用注意事项有哪些&#xff1f; 1. Sessio…

SpringCloud学习笔记 - 熔断降级 - Sentinel

1. Sentinel熔断降级概述 1.1. 熔断降级要解决的问题 除了流量控制以外&#xff0c;对调用链路中不稳定的资源进行熔断降级也是保障高可用的重要措施之一。一个服务常常会调用别的模块&#xff0c;可能是另外的一个远程服务、数据库&#xff0c;或者第三方 API 等。例如&…

海康Visionmaster-VM权限设置、软件设置、方案设置和运行策略

权限设置 权限设置可设置是否配置管理员、技术员和操作员权限和配置密码&#xff0c;并设置不同角色人员的权限。 权限导入导出可对当前软件权限设置模块的配置以txt格式文档进行导入或导出。 打开启用加密时&#xff0c;需设置管理员密码。设置完成后&#xff0c;软件以管理员…

如何把Node项目部署到服务器上

1. 如何合理选购一台服务器 对于服务器的选择&#xff0c;我们主要有以下几种选择&#xff1a; 1. 阿里云&#xff1b; 2. 腾讯云&#xff1b; 3. 华为云&#xff1b; 4. 亚马逊云&#xff1b; 国内用户如果没有特殊需求可以选择前三种&#xff0c;这里我阿里云举例&…

【Vue】vue-devtools调试工具安装和配置

1. 安装 vue-devtools 调试工具vue 官方提供的 vue-devtools 调试工具&#xff0c;能够方便开发者对 vue 项目进行调试与开发。Chrome 浏览器在线安装 vue-devtools &#xff1a;https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpdFi…

RPA自动办公02——Uibot界面元素选择

继续RPA-Uibot的简单使用&#xff0c;本次带来RPA自动点击网页。 当然官方教程更加详细&#xff1a;界面元素自动化_UiBot开发者指南 按照书上的教程&#xff0c;点击一个表格&#xff0c;在右边拖拽命令&#xff0c;然后选择元素就可以了&#xff1a; 这个表格在官方文档上有…

为什么要开发SpringBoot?

Spring配置繁琐 虽然Spring的组件代码是轻量级的&#xff0c;但它的配置却是重量级的。一开始&#xff0c;Spring用XML配置&#xff0c;而且是很多 XML配置。Spring 2.5引入了基于注解的组件扫描&#xff0c;这消除了大量针对应用程序自身组件的显式XML配置。Spring 3.0引入了基…

计算机图形学 第4章 多边形填充

目录前驱知识多边形的扫描转换有效边表填充算法原理边界像素处理原则怎么算交点有效边桶表与边表桶表表示法边缘填充算法填充过程在这里插入图片描述区域填充算法/种子填充算法种子填充算法扫描线种子填充算法 &#xff08;更有效&#xff09;前驱知识 了解扫描转换的基本概念…

九龙证券|兔年行情将打响,A股2月上涨概率最高

兔年行情行将正式打响&#xff0c;迎接投资者的会否是 “兔”飞猛进的行情呢&#xff1f;证券时报数据宝带您一起透视兔年股票上涨概率。 A股新年后上扬概率高 从近10年A股新年后的市场体现来看&#xff0c;头几个买卖日大概率上涨。 数据宝统计&#xff0c;曩昔10年&#xf…

国内在线图表工具,你能说出几个?

之前写过很多篇在线图表、数据分析处理类工具的内容&#xff0c;但都是针对单个问题写的&#xff0c;没有将其整合起来&#xff0c;今天就借着这个问题&#xff0c;做个国内在线图表工具的合集。 一共5大类&#xff0c;每一类各介绍一个代表性工具&#xff0c;全文较长&#x…

【c语言进阶】文件操作知识大全上

&#x1f680;write in front&#x1f680; &#x1f4dc;所属专栏&#xff1a;> c语言学习 &#x1f6f0;️博客主页&#xff1a;睿睿的博客主页 &#x1f6f0;️代码仓库&#xff1a;&#x1f389;VS2022_C语言仓库 &#x1f3a1;您的点赞、关注、收藏、评论&#xff0c;是…

15. XML解析

1. 什么是 XML&#xff1f; XML 指可扩展标记语言&#xff08;EXtensible Markup Language&#xff09;。 a. XML 是一种很像HTML的标记语言。 b. XML 的设计宗旨是传输数据&#xff0c;而不是显示数据。 c. XML 标签没有被预定义。您需要自行定义标签。 d. XML 被设计为具有自…

Tomcat详解

Tomcat 是一个 HTTP 服务器. 前面我们已经学习了 HTTP 协议, 知道了 HTTP 协议就是 HTTP 客户端和 HTTP 服务器之间的交互数据的格式. 同时也通过 ajax 和 Java Socket 分别构造了 HTTP 客户端. HTTP 服务器我们也同样可以通过 Java Socket 来实现. 而 Tomcat 就是基于 Java 实…