首页 > 其他分享 >css盒子模型

css盒子模型

时间:2023-04-19 10:11:13浏览次数:32  
标签:style 盒子 模型 边框 width 内边 border css 3D

1、介绍

所有HTML元素可以看作盒子,包括:

  • 外边距margin
  • 边框border
  • 内边距(填充)padding
  • 实际内容:显示文本和图像,指定元素的width和height属性实际就是内容的宽度和高度

2、边框

(1)border-style样式

none:默认无边框
dashed 虚线边框
solid 实线边框
double 两个边框
groove 3D沟槽边框
ridge 3D脊边框
inset 3D嵌入边框
outset 3D突出边框

(2)border-width宽度

(3)border-color颜色

(4)各边

border-top-style
  • top上,right右,left左,bottom底

(5)简写

border:5px solid red;
  • style是必须的

3、轮廓

用于绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

轮廓不占空间,即不会增加额外的width或者height。

  • outline-color设置颜色
  • outline-style设置样式
  • outline-width设置宽度

4、外边距和内边距

外边距和内边距只关心尺寸大小,其设置几乎相同

  • 可以设置各方向,也可以简写
  • 可以使用单位,也可以使用百分比

外边距区域是透明的,而内边距区域将会受到元素背景颜色的填充

 

标签:style,盒子,模型,边框,width,内边,border,css,3D
From: https://www.cnblogs.com/wd404/p/17332293.html

相关文章

  • 降雨预报模型和洪水预报模型的区别
    降雨预报模型是预测降雨,如WRF模型。洪水预报模型是预测洪水,如径流预报模型、新安江模型等。参考1:https://www.bilibili.com/video/BV15R4y1V7uu/参考2:https://wenku.baidu.com/view/74f4b21700d8ce2f0066f5335a8102d276a261c2.html......
  • 不坑盒子(Office,WPS接入人工智能)助你高效办公,掐点准时下班回家。
    不坑盒子很多朋友在工作过程中需要对Word文档进行编辑处理,如果想让Word排版更有效率可以试试小编带来的这款不坑盒子软件,这是一个非常好用的插件工具,专门应用在Word文档中,支持Office2010以上的版本,用户可以借助工具快速实现排版操作,还支持仿手写功能,简单实用,同时还支持使用ChatG......
  • 网络七层模型—网络层
        对于OSI网络七层模型,我想大家都有所了解吧,今天我也在学习中,整理下OSI七层模型种的网络层。废话不多说,我们直接开始!!网络层网络层基本概念    首先是网络层,作为OSI模型的第三层,其主要任务是:通过路由选择算法,为报文或分组通过通信子网选择最适当的路径。具体功能就......
  • 四月学习之LVS shell脚本配置DR模型
    1、DS脚本配置#!/usr/bin/bashVIP=172.16.1.100RS1=172.16.1.5RS2=172.16.1.6PORT=80SCHEDULER=rrDEV=eth1:1case$1instart)#配置虚拟IP地址VIP cat>/etc/sysconfig/network-scripts/ifcfg-${DEV}<<-EOF TYPE=Ethernet BOOTPROTO=none DEFROUTE=y......
  • 软件行业迫切需要基于正向生成的编码模型
    逆向生成难以实现飞跃软件行业长期面临生产率瓶颈。程序员的工作强度已经接近极限,要继续提高软件交付速度似乎难上加难。近年来在开发流程和工具上,如GPT显然提供了一定的提效,但是实质上没有改变软件开发的基本模式————逆向生成。目前软件项目的大部分工作时间都花在理解“现......
  • 3D轻量化引擎推出新技术,模型渲染更逼真!
    HOOPSCommunicator在2021版本中,推出了基于PBR(PhysicallyBasedRendering)的渲染特性以提供更高质量的渲染技术。PBR将材料表示为一系列方程,这些方程对光如何从表面反射进行建模,再通过GPU上运行的着色器代码进行有效地实现。一、工程领域可视化问题停滞严重在过去的30年里,PC......
  • ChatGPT/大模型+零代码,给中小企业带来哪些机会?
    ChatGPT让2023年成了AI之年。正如iPhone在2007年开启了智能手机时代,我们现在正在进入人工智能时代。新形势下,零代码应如何借势发力?伙伴云“AI+零代码”给出了答案。作为零代码领域的头部平台,伙伴云全量发布【AI零代码应用搭建平台】,无需用户单独训练,无需额外投资,根据用户具体需求、......
  • asp.net core系列 26 EF模型配置(实体关系)
    一.概述EF实体关系定义了两个实体互相关联起来(主体实体和依赖实体的关系,对应数据库中主表和子表关系)。 在关系型数据库中,这种表示是通过外键约束来体现。本篇主要讲一对多的关系。先了解下描述关系的术语。(1)依赖实体: 这是包含外键属性的实体(子表)。有时称为ch......
  • 优化故事: BLOOM 模型推理
    经过“九九八十一难”,大模型终于炼成。下一步就是架设服务,准备开门营业了。真这么简单?恐怕未必!行百里者半九十,推理优化又是新的雄关漫道。如何进行延迟优化?如何进行成本优化(别忘了OpenAI8K上下文的GPT-4模型,提示每1000词元只需0.03美金,补全每1000词元只需0.06美金......
  • 模型剪枝
    背景:模型压缩包括:模型量化、模型剪枝、权值共享等压缩技术,知识蒸馏等配合模型压缩使用的恢复压缩后小模型精度的常用算法模型简直-细粒度划分: 根据修剪的最小单位区分方法非结构性剪枝:权重剪枝、向量剪枝、kernel剪枝,这些剪枝算法可以造成模型结构的不规则化,所以这些方法需要......