CSS盒子模型

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

作用:布局网页,摆放盒子和内容。

盒子模型-组成

  • 内容区域 – width & height
  • 内边距 – padding(出现在内容与盒子边缘之间)
  • 边框线 – border
  • 外边距 – margin(出现在盒子外面)
div {
  margin: 50px;
  border: 5px solid brown;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

CSS盒子模型

CSS盒子模型

边框线

四个方向

属性名:border(bd)

属性值:边框线粗细 线条样式 颜色(不区分顺序)

CSS盒子模型

div {
  border: 5px solid brown;
  width: 200px;
  height: 200px;
  background-color: pink;
}

单方向边框线

属性名:border-方位名词(bd+方位名词首字母,例如,bdl)

属性值:边框线粗细 线条样式 颜色(不区分顺序)

div {
  border-top: 2px solid red;
  border-right: 3px dashed green;
  border-bottom: 4px dotted blue;
  border-left: 5px solid orange;
  width: 200px;
  height: 200px;
  background-color: pink;
}

内边距

作用:设置 内容 与 盒子边缘 之间的距离。

  • 属性名:padding / padding-方位名词
div {
  /* 四个方向 内边距相同 */
  padding: 30px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
  padding-left: 80px;
  width: 200px;
  height: 200px;
  background-color: pink;
}

提示:添加 padding 会撑大盒子。

  • padding 多值写法

CSS盒子模型

技巧:从开始顺时针赋值,当前方向没有数值则与对面取值相同

尺寸计算

CSS盒子模型

默认情况:盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

结论:给盒子加 border / padding 会撑大盒子

解决:

  • 手动做减法,减掉 border / padding 的尺寸
  • 內减模式:box-sizing: border-box

外边距

作用:拉开两个盒子之间的距离

属性名:margin

提示:与 padding 属性值写法、含义相同

版心居中

CSS盒子模型

左右 margin 值 为 auto(盒子要有宽度)

div {
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  background-color: pink;
}

清除默认样式

CSS盒子模型

清除标签默认的样式,比如:默认的内外边距。

CSS盒子模型

/* 清除默认内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
  list-style: none;
}

元素溢出

作用:控制溢出元素的内容的显示方式。

属性名:overflow

CSS盒子模型

外边距问题

合并现象

场景:垂直排列的兄弟元素,上下 margin合并

现象:取两个 margin 中的较大值生效

CSS盒子模型

.one {
  margin-bottom: 50px;
}
.two {
  margin-top: 20px;
}

外边距塌陷

场景:父子级的标签,子级的添加 上外边距 会产生塌陷问题

现象:导致父级一起向下移动

.son {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

CSS盒子模型

解决方法:

  • 取消子级margin,父级设置padding
  • 父级设置 overflow: hidden
  • 父级设置 border-top

行内元素 – 内外边距问题

场景:行内元素添加 margin 和 padding,无法改变元素垂直位置

解决方法:给行内元素添加 line-height 可以改变垂直位置

span {
  /* margin 和 padding 属性,无法改变垂直位置 */
  margin: 50px;
  padding: 20px;
  /* 行高可以改变垂直位置 */
  line-height: 100px;
}

圆角

作用:设置元素的外边框为圆角。

属性名:border-radius

属性值:数字+px / 百分比

提示:属性值是圆角半径

CSS盒子模型

  • 多值写法

CSS盒子模型

技巧:从左上角开始顺时针赋值,当前角没有数值则与对角取值相同。

  • 正圆形状:给正方形盒子设置圆角属性值为 宽高的一半 / 50%
img {
  width: 200px;
  height: 200px;

  border-radius: 100px;
  border-radius: 50%;
}

CSS盒子模型

  • 胶囊形状:给长方形盒子设置圆角属性值为 盒子高度的一半
div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}

盒子阴影(拓展)

作用:给元素设置阴影效果

属性名:box-shadow

属性值:X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意:文章来源地址https://www.toymoban.com/news/detail-495809.html

  • X 轴偏移量 和 Y 轴偏移量 必须书写
  • 默认是外阴影,内阴影需要添加 inset
div {
  width: 200px;
  height: 80px;
  background-color: orange;
  box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

到了这里,关于CSS盒子模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 3-web前端 css 网页样式语言,基础语言、盒子模型、浮动

    html和css的关系:   HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它负责定义网页的结构和内容。HTML使用各种标签来包含文本、链接、图 片、视频等元素,并可以与如JavaScript等其他技术结合使用,实现网页的动态功能。   CSS (Cascading S

    2024年02月08日
    浏览(64)
  • Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影

    目录 CSS盒子模型 概念 弹性盒模型(flex box) 内容 父元素上的属性 display属性 flex-direction属性 justify-content属性 align-items属性 子元素上的属性 flex 文档流(标准流) 浮动 定义 浮动的原理 清除浮动 浮动的副作用 父元素设置高度 overflow清除浮动 伪对象方式 定位 定义 相对定位

    2024年02月11日
    浏览(67)
  • CSS布局基础(CSS属性特征 & 盒子阴影 & 文字阴影)

    块元素 独占一行,默认宽度100% 可设置宽高,内外边距 大部分块元素内部可以放 任意元素 文字类块元素 p / h1-h6内部,不能放块元素 常见块元素 h1-h6 p div ul ol dl li … 行内元素 在同一行显式 不能直接设置宽高,默认宽高就是实际内部内容宽高 内部只能容纳文本或者行内元素

    2024年02月01日
    浏览(79)
  • css中flex布局固定宽度盒子被压缩问题解决

    当一个flex布局,有固定宽度盒子和使用 flex: 1; ,当内容过多时固定宽度的盒子被压缩宽度。 给固定宽度的盒子设置 min-width 值 给固定宽度的盒子设置 flex-shrink: 0;

    2023年04月10日
    浏览(58)
  • FE_CSS 页面布局之圆角边框 & 盒子阴影 & 文字阴影

    在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。 参数值可以为数值或百分比的形式 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50% 该属性是一个简写属性,可以跟

    2023年04月13日
    浏览(88)
  • CSS中如何实现弹性盒子布局(Flexbox)的换行和排序功能?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(55)
  • CSS 网页布局

    在html4.01等之前的版本中html并没有专用的布局元素,而是统统使用div进行布局 页眉标签 header 标签一般用来嵌套网页的标题,搜索栏,导航栏等 导航栏 nav 用来嵌套列表 侧边栏 aside 侧边栏 注意:圣杯布局一般存在左侧和右侧两个侧边栏,此处我们仅书写一个 网页主体 sect

    2024年01月19日
    浏览(31)
  • CSS3网页布局基础

    CSS布局始于第2个版本,CSS 2.1把布局分为3种模型:常规流、浮动、绝对定位。CSS 3推出更多布局方案:多列布局、弹性盒、模板层、网格定位、网格层、浮动盒等。本章重点介绍CSS 2.1标准的3种布局模型,它们获得所有浏览器的全面、一致性的支持,被广泛应用。 在默认状态

    2024年02月05日
    浏览(41)
  • 21.5 CSS 网页布局方式

    3.1 浮动元素 3.2 浮动元素的脱标现象 3.3 浮动元素排序规则 3.4 浮动元素帖靠现象 3.5 浮动元素的字围现象 3.6 浮动排版练习 3.7 塌陷 3.8 margin折叠 3.9 清除塌陷 3.9.1 清除塌陷1 3.9.2 清除塌陷2 3.9.3 清除塌陷3 3.9.3.1 外墙法 3.9.3.2 内墙法 3.9.4 清除塌陷4 4.1 清除浮动 4.2 防止父标签塌

    2024年02月09日
    浏览(80)
  • 【玩转CSS】盒子模型

    🔥 信仰: 一个人走得远了,就会忘记自己为了什么而出发,希望你可以不忘初心,不要随波逐流,一直走下去 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾 🦄 本文由 程序喵正在路上 原创,CSDN首发! 💖 系列专栏:HTML5+CSS3+移动端前端 🌠 首发时间:2022年7月15日 ✅ 如果觉得博

    2023年04月08日
    浏览(92)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包