盒子模型属性详解及案例

盒子模型

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

每个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。



盒子模型属性详解及案例_第1张图片


盒子模型边框(border)

属性:border-width|border-style|border-color

         

盒子模型属性详解及案例_第2张图片

边框样式如下:

盒子模型属性详解及案例_第3张图片

边框有四条边,单独设置某条边(top|right|bottom|left)

如: border-top-width|border-top-style|border-top-color

哈哈哈哈哈哈
盒子模型属性详解及案例_第4张图片
为了简写代码可以使用属性连写,效果一样

边框线型必写,与顺序无关。

border:red solid 5px;
border-top:red solid 5px;
表单控件案例

代码及效果如下:

盒子模型属性详解及案例_第5张图片

几个需要注意的知识点:

盒子模型属性详解及案例_第6张图片

盒子模型的内边距(padding)

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距

padding-left:左内边距

盒子模型属性详解及案例_第7张图片

盒子模型会被内边距撑大

边框也会影响盒子模型的大小

盒子的大小=定义的大小+边框+内边距

内容水平居中的两种方式如下:


盒子模型属性详解及案例_第8张图片

继承的盒子一般不会被撑大

包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置内边距,不会撑大盒子。当设置的padding-left大于父盒子的宽度,子盒子宽度会大于父盒子。

盒子模型属性详解及案例_第9张图片

导航案例




盒子模型属性详解及案例_第10张图片

盒子模型的外边距(margin)

用法与padding一样,但是margin对盒子宽度不会有影响

盒子模型属性详解及案例_第11张图片

垂直方向外边距合并

两个盒子垂直一个设置上外边距,一个设置下外边距,取的设置较大的值。

下面两个盒子的外边距取100px。

盒子模型属性详解及案例_第12张图片

嵌套的盒子外边距塌陷

解决方法:  1  给父盒子设置边框(不推荐使用,麻烦)

                 2  给父盒子overflow:hidden

盒子模型属性详解及案例_第13张图片

盒子模型属性详解及案例_第14张图片

盒子模型属性详解及案例_第15张图片

案例:

盒子模型属性详解及案例_第16张图片

盒子模型属性详解及案例_第17张图片

以上就是我对盒子模型的一些理解和做的一些案例练习,如有错误欢迎指出。


你可能感兴趣的:(盒子模型,案例)