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) 会将其他元素从当前盒子周围“推开”

盒子模型

image

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%;
posted @   ~LemonWater  阅读(82)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示