首页 > 其他分享 >CSS(4)盒子模型

CSS(4)盒子模型

时间:2024-06-19 21:31:23浏览次数:24  
标签:盒子 solid 模型 边框 20px border transparent CSS

盒子模型(CSS重点)

其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。

1. 看透网页布局的本质

网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢? 看透网页布局的本质: 把网页元素比如文字图片等等,放入盒子里面,然后利用CSS摆放盒子的过程, 就是网页布局。

2. 盒子模型(Box Model)

所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

        CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框 (border)、内边距(padding)、实际内容(content)四个属性。

首先,我们来看一张图,来体会下什么是盒子模型。

所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(element box),它描述了一个文档元 素在网页布局汇总所占的位置大小。因此,每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。

用水果来比喻帮助记忆:

3. 盒子边框(border)

边框就是那层皮。。柚子皮。。。。

语法:border : border-width || border-style || border-color

 

边框属性—设置边框样式(border-style) 边框样式用于定义页面中边框的风格,常用属性值如下:

小提示:

        我们在开发中,经常把表单原本的边框去掉,然后添加任意的样式。(border: 0)

3.1 边框综合设置

border : border-width || border-style || border-color

例如:

border: 1px solid red; 没有顺序

3.2 盒子边框写法总结表

很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。

3.3 border的三角形原理

        当我们加大边框并且各个颜色不一样时,我们先来看看border的表现形式。

#box{
width:100px;
height:100px;
background:yellow;
border-top: 20px solid red;
border-right:20px solid black;
border-bottom:20px solid green;
border-left:20px solid blue;
}

                ​​​​​​​        ​​​​​​​        

        观察上图可以发现,border表现为梯形。当减小box的宽高时,会发生如下变化:

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

        从上图很容易看出,当box宽度降低到很小,也就是border的梯形的上边降到很小。所以想一想,当这 一值降到0时,border就变成了三角形。如下图:

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​  

        所以我们就可以通过将元素宽高设置为0,而通过控制border来得到想要的三角形了。

        实现将不需要方向的border设置为透明(transparent),就可以用来实现三角形了。比如想实现下三角形, 就将border-left,border-bottom,border-right设置为transparent即可。

#box{
width:0px;
height:0px;
border-top: 20px solid red;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid transparent;
}

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

3.4 圆角边框(CSS3)

        从此以后,我们的世界不只有矩形。radius 半径(距离) 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

语法格式:border-radius: 左上角 右上角 右下角 左下角;

        其中每一个值可以为 数值或百分比的形式。

技巧:border-radius: 50%;  

        让一个正方形变成圆圈以上效果图矩形的圆角, 就不要用百分比了,因为百分比会是表示高度和宽度的一半。 而我们这里矩形就只用高度的一半就好了。精确单位。

演示例子风车:

标签:盒子,solid,模型,边框,20px,border,transparent,CSS
From: https://blog.csdn.net/2401_85687751/article/details/139806992

相关文章

  • 基于GWO-CNN-LSTM数据时间序列预测(多输入单输出)-多维时间序列模型-MATLAB实现
    基于GWO-CNN-LSTM数据时间序列预测(多输入单输出)-多维时间序列模型-MATLAB实现基于灰狼优化(GreyWolfOptimizer,GWO)、卷积神经网络(ConvolutionalNeuralNetwork,CNN)和长短期记忆网络(LongShort-TermMemory,LSTM)的多维时间序列预测模型是一种复杂且有效的深度学习方法,适......
  • 在AMD GPUs上构建解码器Transformer模型
    BuildingadecodertransformermodelonAMDGPU(s)—ROCmBlogs在这篇博客中,我们展示了如何使用PyTorch2.0和ROCm在单个节点上的单个和多个AMDGPU上运行AndrejKarpathy精美的PyTorch重新实现的GPT。我们使用莎士比亚的作品来训练我们的模型,然后进行推理,看看我们的模......
  • 【继电保护】变压器纵联差动保护Simulink仿真模型含讲解文档
    ......
  • LLM大模型: FlagEmbedding-BiEncoderModel原理和源码解析
    NLP常见的任务之一是高效检索:在大规模语料库中快速检索与查询相关的段落或文档;用户输入query,要在语料库中找到语义最接近、最匹配的回答!此外,还有文本分类、情感分析等下游任务需要先把文本的embedding求出来,这些功能都能通过"双塔结构"(Bi-Encoder)实现!核心思路很简单:用两个不同......
  • 一张图看懂大模型性价比:能力、价格、并发量全面PK
    最近,国内云厂商的大模型掀起一场降价风暴。火山引擎、阿里云、百度云等纷纷宣布降价,部分模型价格降幅据称高达99%,甚至还有些模型直接免费。五花八门的降价话术,一眼望去遍地黄金。但事实真的如此吗?今天我们就拨开迷雾,深挖下大模型降价背后那些事。1选大模型要最强版还是......
  • 一文搞定 大语言模型(LLM)微调方法
    引言众所周知,大语言模型(LLM)正在飞速发展,各行业都有了自己的大模型。其中,大模型微调技术在此过程中起到了非常关键的作用,它提升了模型的生成效率和适应性,使其能够在多样化的应用场景中发挥更大的价值。那么,今天这篇文章就带大家深入了解大模型微调。其中主要包括什么是大......
  • css如何动态累计数字?
    导读:css如何动态累计数字?用于章节目录的序列数生成,用css的计数器实现起来比js方式更简单!伪元素::after::before伪元素设置content可以在元素的首部和尾部添加内容,我们要在元素的首部添加序列号,所以要用到的是::before的content属性计数器counter-reset初始化或重置......
  • 大模型在影视动漫行业的应用及案例
    大模型在影视动漫行业的应用案例详细介绍一、案例背景随着人工智能技术的快速发展,大模型在影视动漫行业的应用逐渐深入,为这一行业带来了革命性的变革。大模型通过强大的计算能力和深度学习能力,能够高效、准确地完成影视动漫创作中的多个环节,从而提高制作效率,降低制作成本,并创......
  • 从热潮到理性,大模型迎来产业「拐点」
    前言无人不谈大模型,是今年上半年科技界的真实写照。从市场热闹程度来看,大模型已经成为各家科技厂商争先涌入的赛道,无论是互联网巨头,还是科技公司,甚至是研究机构,均已加入这场大模型混战,大模型俨然成了“兵家必争之地”。就在国内大模型市场正如火如荼时,一举带动大模型热度......
  • 离线免费最新超长AI视频模型!一句话即可生成120秒视频,免费开源!只需要一张照片和音频,即
    离线免费最新超长AI视频模型!一句话即可生成120秒视频,免费开源!只需要一张照片和音频,即可生成会说话唱歌的AI视频!能自行完成整个软件项目的AI工具,以及Llama3在线体验和本地安装部署。StreamingT2V(StreamingText-to-Video)模型是一种将文本描述转换为视频内容的人工智能技......