HTML CSS整理笔记（六）盒子模型

完成笔记链接：https://www.niwoxuexi.com/blog/web/article/1245

———6 盒子模型———

39.盒子模型的组成：

content网页内容、border边框、padding内边距、margin外边距

(1)边框border：

• border-color 边框颜色：如border-color:#369 #000 #111 #F00;按“上右下左顺时针”设置
• border-width 边框粗细：如细thin、中等medium、粗的thick
• border-style 边框样式：常用none无边框、dotted点线边框、dashed虚线边框、solid实线边框
• border 简写:如下边框border-bottom:9px red dashed;四条边框border:9px blue solid;

(2)margin外边距：盒子边框以外和其他盒子间的距离

• margin-top:上外边距、margin-bottom：下外边距
• margin-left：左外边距、margin-right：右外边距
• margin：简写"上右下左"
• auto：设置盒子在它的父容器里居中显示。如margin:0px auto;让整个盒子居中。

如果将元素的 margin设为负值，则元素会变大。

(块元素可以把左右页边距设置为"自动"中心对齐。margin:auto;但前提宽度不能是100%)

注意：很多标签都有自身默认的外边距，所以一般用并集选择器统一设置这些标签的外边距为0px,这样不会产生不必要的空隙。
如清除body和h2自带的外边距 body,h2{margin:0px;}

(3)padding内边距：

• padding-left、padding-right、padding-top、padding-bottom、
• padding"上右下左"

40.盒子模型的尺寸：

增加边框、内边距、外边距后不会影响内容区域的尺寸，但会增加盒子模型的总尺寸。

(1)内盒总尺寸 = border(上下/左右)+padding(上下/左右)+内容宽/高度

(2)整个盒子的宽度 = 内容宽度+左右padding+左右边框border+左右margin

41.box-sizing拯救布局

(语法)box-sizing:content-box、border-box、inherit

(1)content-box：盒子的宽度或高度=border+padding+(margin)+width/height

(2)border-box：盒子的宽或高度等于元素内容的宽或高度

(即 该内容宽/高度=盒子宽/高度-border-padding )

(3)inherit：使元素继承父元素的盒子模型模式。

42.border-radius圆角边框：语法和边框相似，只是四个边框带圆角

(语法)border-radius:length{1~4个数字};

(1)用border-radius制作特殊图形

• 圆形：元素的宽度和高度必须相同。圆角半径为元素宽度的一半，或直接设圆角半径为50%
• 半圆形：元素的高度是宽度的2倍，且圆角半径为元素的宽度值。
• 扇形：即制作四分之一圆形。"三同"元素宽度、高度、圆角半径 "一不同"

43.盒子阴影：和文本阴影相似

(语法)box-shadow:inset x-offset y-offset blur-radius color;

• inset：内部阴影，可选。
• x-offset：X轴水平位移，正值在右，负值在左。
• y-offset：Y轴垂直位移，正值在下，负值在上。
• blur-radius：模糊半径可选，只能>=0 值越大阴影向外面积越大,边缘越模糊。

HTML CSS整理笔记更多笔记

HTML CSS整理笔记（一）HTML5基础

HTML CSS整理笔记（二）列表、表格、媒体元素

HTML CSS整理笔记 （三）表单

HTML CSS整理笔记（四）CSS3基础

HTML CSS整理笔记(五) CSS3美化网页

HTML CSS整理笔记（六）盒子模型

HTML CSS整理笔记 (七) 浮动

HTML CSS整理笔记 (八) 定位网页元素

HTML CSS整理笔记 (九) CSS3做网页动画

HTML CSS整理笔记 （十）HTML部分