CSS学习--盒模型
盒模型
margin, border, padding, and content
块级元素 (block box)
* 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样宽
* 每个盒子都会换行
* width 和 height 属性可以发挥作用
* 内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当前盒子周围“推开”
行级元素(inline box)
* 盒子不会产生换行。
* width 和 height 属性将不起作用。
* 内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
inline-block
* 盒子不会产生换行。
* width 和 height 属性可以发挥作用
* 内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当前盒子周围“推开”
盒子模型
box-sizing
可以设置盒子类型
box-sizing: content-box|border-box|inherit;
值 | 描述 |
---|---|
content-box | 在宽度和高度之外绘制元素的内边距和边框。(标准盒模型) |
border-box | 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 |
inherit | 规定应从父元素继承box-sizing 属性的值。 |
外边距折叠
如果你有两个外边距相接的元素,这些外边距将合并为一个外边距,即最大的单个外边距的大小。
内边距
padding: top | right | bottom | left;
padding: vertical | horizontal;
padding: all-side;
外边距
margin: top | right | bottom | left;
margin: vertical | horizontal;
margin: all-side;
边框
border: width | style | color;
border-radius: all-side;
border-radius: top right bottom left;
/* 右上角的水平半径为1em,垂直半径为10%: */
border-top-right-radius: 1em 10%;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战