CSS学习(2) - 边距与高宽 + 框模型

这篇具有很好参考价值的文章主要介绍了CSS学习(2) - 边距与高宽 + 框模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

文章首发于:欢迎大佬们前来逛逛

CSS边框

border 属性能够设置边框的属性,包括样式,颜色和宽度。

边框样式

其中border-style可以设置边框的样式,具体属性如下:

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

简单测试后效果如下:

CSS学习(2) - 边距与高宽 + 框模型


边框宽度

border-width 指定边框的宽度,可以设置为px、pt、cm、em等,也可以使用预定的三个属性值:

p.w2{
    border-style: dotted;
    border-width: 2pt; 
}

p.w3{
    border-style: dashed;
    border-width: 5px;
}

p.w4{
    border-style: groove;
    border-width: 10px;
}

p.w_thick{
    border-style: double;
    border-width: thick;
}

同时这个属性也可以设置分别四个边框的宽度:

p.w3{
    border-style: dashed;
    border-width: 10px 5px; /*上下是10px,其他边是5px*/
}	
p.w4{
    border-style: groove;
    border-width: 20px 10px 20px 10px; /*分别是 上右下左*/
}

边框颜色

border-color 指定边框的颜色。

border-color: green;

指定边框的颜色:与边框的宽度一致,

border-color: green red; /*上下是绿色  左右是红色*/
border-color: cadetblue red green yellow; /*分别对应上右下左的颜色*/

单独设置边框

border- 方位 - 属性 可以指定某一个方位的边框的属性信息:

p.diff{
    border-left-style: solid;
    border-right-style: solid;
    border-top-style: dashed;
    border-bottom-style: dashed;
}

不同个数的参数如下所示:

border-style: double dashed; /*上下边框是double  左右边框是dashed*/
border-style: double solid dashed; /*上边框是double  左右边框是solid 下边框是dashed*/
border-style: double dashed solid hidden; /*上右下左边框*/
border-style: double; /*四个边框都是double*/

同理对于 border-color border-width 等也都是如此。


边框属性简写

经过我们刚才的总结,我们发现一个边框至少需要具有width,style(必须), color 等属性

我们可以使用属性简写:

顺序无所谓,只要写了就可以。

p.simple{
    border: 5px solid darkmagenta;   /*简写border属性*/
    background-color: antiquewhite;
}

同时我们可以只为某一个方位设置简写:

border-left: 5px solid darkmagenta;
border-top: 2px dashed red;
border-bottom: 2px dashed red;

圆角边框

border-radius 设置边框的弧度

p.radius{
  border-radius: 5px;
  border: 3px solid darksalmon;
}

CSS边距

外边距

通过为元素的周围外创建空间来设置外边距,使用 margin 属性。

可以通过以下来设置上右下左边框的外边距

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

可以设置的值:

  • auto
  • length:px pt 等
  • %
  • inherit
p.margin1{
    border: 5px solid gold;
    margin-top: 100px;
    margin-right: 150px;
    margin-bottom: 100px;
    margin-left: 150px;
}

属性简写:

  1. 四个参数:分别对应上右下左
  2. 三个参数:上, 左右, 下
  3. 两个参数:上下, 左右
  4. 一个参数:四个边框
p.margin1{
    border: 5px solid gold;
    margin: 10% 20% 10% 20%; /*上右下左*/
}

marginauto 意味着使元素在其容器中水平居中。

可以自己设置一下该元素需要占据的宽度与高度,然后auto即可。

p.margin1{
    border: 5px solid gold;
    margin: auto;  /*自动对齐*/
    width: 300px; /*容器为300px宽度*/
}

inherit 属性可以使得属性继承自父标签:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
/*HTML:*/
<div>
	<p class="ex1"> 这段文本的左边距继承了父标签div的 </p>
 </div>

外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

  1. 两个垂直不同块的外边距合并。
  2. 两个存在包含关系的外边距合并。
  3. 空元素块之间的外边距合并。

CSS内边距

内边距与外边距类似,可以通过 padding 来设置。

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

唯一不同的是padding没有 auto 设置的属性。

  1. 四个参数:分别表示上右下左
  2. 三个参数:表示 上,左右,下
  3. 两个参数:表示 上下,左右
  4. 一个参数:表示四个方位。
padding: 10px 20px 10px 20px;

内边距与内容宽度

内容区域是指 内边距 + 边框宽度 + 外边距 的宽度总和。

如果我们设置了左右内边距,并且设置了内容区域的宽度。

则我们的实际文本内容的宽度会超过我们所设置的内容区域的宽度。

例如在这个例子中,我们的理应的内容宽度为 300 ,但是实际内容宽度为 300+50+50+5 大概400多的宽度,显然我们尽量不要改变我们所设置好了的300的内容宽度

p.margin1{
    border: 5px solid gold;
    padding: 10px 50px;
    width: 300px;
}

因此我们可以使用 box-sizing 使得保持我们所设置的宽度

p.margin1{
    border: 5px solid gold;
    padding: 10px 50px;
    width: 300px;
    box-sizing: border-box; /*保持宽度为300px,会压缩空间,增大高度*/
}

注意:如果我们又设置了高度,则会出现文本超过边框的情况出现。


CSS高度与宽度

通过设置 heightwidth 来指定元素区域的最高宽度和高度,不包括内外边距和边框。

max-widthmax-height 也是用来设置宽度的高度的。

它们两个与上面两个区别在于:他们可以根据文本的内容动态调节元素区域的大小,而width和height是固定的,这两个是可变的会在规定的 min与max 之间适当调节。

设置最小与最大宽度和高度。

max-height: 600px;
min-height: 100px;
max-width: 600px;
min-width: 100px;

CSS框模型

每个HTML的元素又叫做方框或者是框模型,框模型如下所示:

CSS学习(2) - 边距与高宽 + 框模型

width和height指的是文本内容的宽度和高度。增加内边距和外边距不会影响文本内容的大小,但是会影响总的元素框的总大小

一个宽度为100像素的元素框的设置:

#box100{
    border: 1px solid red;
    width: 70px;
    padding: 5px;
    margin: 10px;
}

外边距可以是负值,而且在很多情况下都要使用负值的外边距,但是内边距不能是负值。


一个框模型:

  1. 内容宽度为 300px
  2. 内边距为50px
  3. 外边距为20px
  4. 边框宽度为15px
div {
  background-color: lightblue;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

元素框的总宽度大小为:

内容宽度width + 左内边距 + 右内边距 + 左外边距 + 右外边距 + 左边框 + 右边框

总高度也是同理的。文章来源地址https://www.toymoban.com/news/detail-414695.html

到了这里,关于CSS学习(2) - 边距与高宽 + 框模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 到底什么是机器学习模型?这篇文章终于讲明白了

    机器学习 (Machine Learning) 是对研究问题进行模型假设,利用计算机从训练数据中学习得到模型参数,并最终对数据进行预测和分析的一门学科。 **模型是机器学习的核心组成要素。**本文从模型的广义概念出发,引申出机器学习模型的基本定义,并就机器学习中容易混淆的概念

    2024年02月05日
    浏览(46)
  • Python和PyTorch深入实现线性回归模型:一篇文章全面掌握基础机器学习技术

    线性回归是一种统计学中的预测分析,该方法用于建立两种或两种以上变量间的关系模型。线性回归使用最佳的拟合直线(也称为回归线)在独立(输入)变量和因变量(输出)之间建立一种直观的关系。简单线性回归是输入变量和输出变量之间的线性关系,而多元线性回归

    2024年02月15日
    浏览(53)
  • 前端学习——css盒子模型、css3新特性、伪类、布局0711TODO

    样式还是得具体使用才能理解,不然会忘记也理解不透彻;还有定位,元素溢出,浮动,布局水平垂直对齐: css3新特性 1过渡 2 动画 3 2D、3D转换 伪类 三种定位方式 弹性布局/栅格布局

    2024年02月15日
    浏览(62)
  • CSS基础学习--8 盒子模型(Box Model)

    一、介绍         所有HTML元素可以看作盒子,在CSS中,\\\"box model\\\"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。         盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

    2024年02月09日
    浏览(50)
  • 2023电工杯数学建模B题完整模型代码【首发】

    文末获取全部资料 摘要 近年来,随着人工智能(AI)技术的发展和广泛应用,其在教育领域的潜力和影响引起了广泛关注。本研究旨在通过一项全面的问卷调查,探讨AI学习工具在大学生学习过程中的影响。 在本项研究中,我们得到了一套详细的调查问卷,针对包含不同专业

    2024年02月07日
    浏览(49)
  • 【AI大模型】讯飞版大模型来了!首发通用人工智能评测体系,现场发布四大行业应用成果

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:AI大模型 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用讯飞星火

    2024年02月04日
    浏览(58)
  • Vue 3 中动态获取高宽

    应用场景 : 一般用于父组件动态变换宽高,子组件需要同步修改宽高 实现简介 : Vue3 写法 思路: 1.监听父组件的 宽高 2.将监听到的高度赋给 你需要设置的对象    :: 引入监听 并实现 如何得到动态宽度 (此时的 div2 会与 divDom  宽度会保持一致) 一些补充的知识 1、了解 如何获取

    2024年02月13日
    浏览(29)
  • 2023最新首发,全网最全 Spring Boot 学习宝典(附思维导图)

    作者: bug菌 博客:CSDN、掘金、infoQ、51CTO等 简介:CSDN/阿里云/华为云/51CTO博客专家,博客之星Top30,掘金年度人气作者Top40,51CTO年度博主Top12,掘金/InfoQ/51CTO等社区优质创作者,全网粉丝合计10w+,硬核微信公众号「猿圈奇妙屋」,欢迎你的加入!免费领取简历模板/学习资料

    2024年02月11日
    浏览(52)
  • 【MATLAB第70期】基于MATLAB的LightGbm(LGBM)梯度增强决策树多输入单输出回归预测及分类预测模型(全网首发)

    (LGBM)是一种基于梯度增强决策树(GBDT)算法。 本次研究三个内容,分别是回归预测,二分类预测和多分类预测 参考链接: lightgbm原理参考链接: 训练过程评价指标metric函数参考链接: lightgbm参数介绍参考链接: lightgbm调参参考链接: 1.数据设置 数据(103个样本,7输入1输出)

    2024年02月10日
    浏览(41)
  • 机器学习算法示例的收集;MetaAI编码工具Code Llama;“天工AI搜索”首发实测

    🦉 AI新闻 🚀 Meta推出新一代AI编码工具Code Llama,助力程序员提高开发效率 摘要 :Meta推出Code Llama,这是一个基于Llama 2语言模型打造的AI编码工具,能够生成新的代码并调试人类编写的工作。Code Llama可根据代码核自然语言提示生成代码,也可以根据指定的代码进行完善和调试

    2024年02月11日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包