Web前端学习_CSS盒子模型

content

padding

border

margin

image-20241128191836637

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子模型</title><style></style>
</head>
<body>
<div class="demo">yanxiao正在学习web喃,你在干吗? 学个蛋,摆烂</div>
<div class="demo1">yanxiao学习就想睡觉,为什么喃? 因为没有学习web</div>
</body>
</html>

image-20241128201636808

1.边框宽度 格式 颜色
    <style>.demo{border:10px solid #8b1a01;}</style>

image-20241128201740626

2.内联块__文本与边框大小同步
        .demo{border:10px solid #8b1a01;display: inline-block;}

image-20241128201959136

3.设置背景颜色

background-color: #0066cc;

image-20241128202121545

4.边框大小
border-width: 10px 20px 40px 60px;
border-width:10px 20px 40px 60px;  /*上右下左*/
/*边框宽度
当给一个值的时候,上右下左同步;
当个两个值的时候,上下同步,左右同步;
当给它三个值的时候,上 左右同步 下
当给它四个值的时候,上右下左同理可以设置四个颜色,四个格式;*/

image-20241128202310771

5.padding_文本与边框的距离
padding:50px;

image-20241128202543702

6.边框四个格式
            border-style:solid dashed dotted double;/*上边(top): solid(实线)右边(right): dashed(虚线)下边(bottom): dotted(点线)左边(left): double(双线)*/

image-20241128202615978

7.编辑单个边框
border-left: 30px solid #fda543;
上边(top): solid(实线)
右边(right): dashed(虚线)
下边(bottom): dotted(点线)
左边(left): double(双线)

image-20241128203339072

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

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

相关文章

HTML CSS JS基础考试题与答案

一、选择题&#xff08;2分/题&#xff09; 1&#xff0e;下面标签中&#xff0c;用来显示段落的标签是&#xff08; d &#xff09;。 A、<h1> B、<br /> C、<img /> D、<p> 2. 网页中的图片文件位于html文件的下一级文件夹img中&#xff0c;…

华为开源操作系统openEuler安装部署

本文主要描述华为开源操作系统openEuler的安装部署。openEuler是面向数字基础设施的开源操作系统&#xff0c;是由开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目&#xff0c;其愿景是为世界提供数字基础设施的开源操作系统&#xff0c;其…

分布式搜索引擎之elasticsearch单机部署与测试

分布式搜索引擎之elasticsearch单机部署与测试 1.部署单点es 1.1.创建网络 因为我们还需要部署kibana容器&#xff0c;因此需要让es和kibana容器互联。这里先创建一个网络&#xff1a; docker network create es-net1.2.加载镜像 这里我们采用elasticsearch的7.12.1版本的…

渣土车治理新方案:智能化引领安全与环保新时代

一、渣土车问题现状 1. 盲区众多隐患大&#xff0c;事故频发令人忧。 渣土车盲区多&#xff0c;易引发交通事故&#xff0c;给行人和其他车辆带来严重安全威胁。由于渣土车体积庞大&#xff0c;实际的视觉盲区范围包括半盲区为左车门 1.2 米、右前方 1.5 米、正前方 1.2 米&am…

Vue3+node.js实现登录

文章目录 前端代码实现后端代码实现跨域处理 前端代码实现 效果图 前端代码实现 <template><div class"login-container"><el-card class"login-card"><template #header><div class"card-header"><span>…

jenkins 2.346.1最后一个支持java8的版本搭建

1.jenkins下载 下载地址&#xff1a;Index of /war-stable/2.346.1 2.部署 创建目标文件夹&#xff0c;移动到指定位置 创建一个启动脚本&#xff0c;deploy.sh #!/bin/bash set -eDATE$(date %Y%m%d%H%M) # 基础路径 BASE_PATH/opt/projects/jenkins # 服务名称。同时约定部…

Windows10+VirtualBox+Ubuntu:安装虚拟机VirtualBox,虚拟机中安装Ubuntu

一、需求 在Windows10系统中&#xff0c;安装虚拟机VirtualBox&#xff0c;VirtualBox中安装Ubuntu桌面版。 二、环境准备 系统环境 Windows10 内存&#xff1a;8G 虚拟化 虚拟机的运行&#xff0c;如果需要Windows系统开启虚拟化&#xff0c;可以通过BIOS设置。 “虚拟…

pcb元器件选型与焊接测试时的一些个人经验

元件选型 在嘉立创生成bom表&#xff0c;对照bom表买 1、买电容时有50V或者100V是它的耐压值&#xff0c;注意耐压值 2、在买1117等降压芯片时注意它降压后的固定输出&#xff0c;有那种可调降压比如如下&#xff0c;别买错了 贴片元件焊接 我建议先薄薄的在引脚上涂上锡膏…

【漏洞复现】|百易云资产管理运营系统/mobilefront/c/2.php前台文件上传

漏洞描述 湖南众合百易信息技术有限公司&#xff08;简称&#xff1a;百易云&#xff09;成立于2017年是一家专注于不动产领域数字化研发及服务的国家高新技术企业&#xff0c;公司拥有不动产领域的数字化全面解决方案、覆盖住宅、写字楼、商业中心、专业市场、产业园区、公建、…

重学 Android 自定义 View 系列(八):星星评分控件(RatingBar)

前言 本节实现一个常见的星星评分控件&#xff0c;广泛应用于各种评价类应用中&#xff0c;比如电影评分、商品评价等。难度不大&#xff0c;直接开搂&#xff01; 最终效果如下&#xff1a; 1. 效果分析 显示若干颗星星&#xff08;默认为5颗&#xff0c;可根据属性配置&a…

【力扣热题100】—— Day3.相交链表

被你改变的那部分我&#xff0c;代替你&#xff0c;永远与我站在一起 —— 24.11.28 160. 相交链表 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 …

SpringBoot实战(三十二)集成 ofdrw,实现 PDF 和 OFD 的转换、SM2 签署OFD

目录 一、OFD 简介1.1 什么是 OFD&#xff1f;1.2 什么是 版式文档&#xff1f;1.3 为什么要用 OFD 而不是PDF&#xff1f; 二、ofdrw 简介2.1 定义2.2 Maven 依赖2.3 ofdrw 的 13 个模块 三、PDF/文本/图片 转 OFD&#xff08;ofdrw-conterver&#xff09;3.1 介绍&#xff1a…

cesium 3Dtiles变量

原本有一个变亮的属性luminanceAtZenith&#xff0c;但是新版本的cesium没有这个属性了。于是 let lightColor 3.0result._customShader new this.ffCesium.Cesium.CustomShader({fragmentShaderText:void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial mate…

Java 语言的起源发展与基本概念(JDK,JRE,JVM)

Java语言的起源 源起 Java语言最初是由Sun Microsystems公司&#xff08;该公司于2009年被Oracle公司收购&#xff09;开发的一种编程语言。其创造者是詹姆斯高斯林&#xff08;James Gosling&#xff09;&#xff0c;他是一位加拿大计算机科学家。其前身名为Oak&#xff08;橡…

Mac安装及合规无限使用Beyond Compare

文章目录 Beyond CompareBeyond Compare简介Beyond Compare安装Beyond Compare到期后继续免费使用 Beyond Compare Beyond Compare简介 Beyond Compare 是一款由 Scooter Software 开发的文件和文件夹比较工具。它主要用于对比两个文件或文件夹之间的差异&#xff0c;并支持文…

使用 Spring AI + Elasticsearch 让 RAG 变得简单

作者&#xff1a;来自 Elastic Laura Trotta 使用私人数据定制你的人工智能聊天机器人体验。 Spring AI 最近将 Elasticsearch 添加为向量存储&#xff0c;Elastic 团队为其提供了优化。我们很高兴展示使用 Spring AI 和 Elasticsearch 向量数据库&#xff08;vector database&…

C语言:深入理解指针

一.内存和地址 我们知道计算机上CPU&#xff08;中央处理器&#xff09;在处理数据的时候&#xff0c;需要的数据是在内存中读取的&#xff0c;处理后的数据也会放回内存中&#xff0c;那我们买电脑的时候&#xff0c;电脑上内存是 8GB/16GB/32GB 等&#xff0c;那这些内存空间…

Spring Boot整合EasyExcel

文章目录 EasyExcel简介Spring Boot整合EasyExcel一、单sheet写操作二、多sheet写数据三、读操作 EasyExcel简介 1、EasyExcel 是一个基于 Java 的简单、省内存的读写 Excel 的开源项目。在尽可能节约内存的情况下支持读写百 M 的 Excel&#xff08;没有一次性将数据读取到内存…

Windsurf可以上传图片开发UI了

背景 曾经羡慕Cursor的“画图”开发功能&#xff0c;这不Windsurf安排上了。 Upload Images to Cascade Cascade now supports uploading images on premium models Ask Cascade to build or tweak UI from on image upload New keybindings Keybindings to navigate betwe…

Linux中使用ping提示“未知的名称或服务”

Linux中使用ping提示“未知的名称或服务” 问题&#xff1a;在linux系统中使用ping、telnet命令提示“未知的名称或服务”或 bad address。以centos系统为例&#xff1a; 问题原因&#xff1a; 1、未安装ping服务 2、操作系统未设置DNS&#xff08;尝试ping IP地址&#xff0…