WEB前端第十二课——CSS盒子

标签：等于   str   决定   作用   一个   ica   end   column   color   

1.盒子模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）

2.border，设置元素的边框，属性（边框三要素）：宽度、样式、颜色，这也是通常border属性值的书写顺序（非严格要求）

　　单独书写：border-width（宽度，默认3px）、border-style（样式，默认none）、border-color（颜色，默认黑色）

　　border-style属性值：dotted（点状）、solid（实线）、double（双实线）、dashed（虚线）、无边框（none）

3.padding，设置元素内容与边框之间的距离，增加内边距会扩大元素边框所占用的区域

　　书写格式：padding:value（四边设置，可多值）、padding-top/right/bottom/left:value（单边设置），value取值可以为像素、百分比，但不能为负数

4.margin，设置元素边框外周围的空白区域，外边距是透明的

　　书写格式：margin:value（四边设置、可多值）、margin-top/right/bottom/left:value（单边设置），value取值可以为像素、百分比、auto、负数

　　外边距合并，当两个垂直外边距相遇时，他们将形成一个外边距，即外边距合并

　　　　　　　　合并后的外边距的高度等于发生合并的两个外边距中高度较大者

　　　　　　　　两个块级元素是包含关系时，要设置被包含元素的相对边距，需要增加父元素border（边框）或使用“ overflow：hidden”或“ padding”

　　外边距特点：① 块级元素的垂直相邻外边距外边距会合并，② 行内元素不占上下外边距，且左右外边距不会合并，③ 浮动元素的外边距也不会合并，④ 允许指定负数外边距值

5.怪异盒子，盒子模型分为两种，一种是符合W3C规范的标准盒子模型，另一种是IE的盒子模型，也被叫做怪异盒子

　　IE盒子模型也包括margin、border、padding、content，不过IE盒子模型的宽（width）包含了border和padding

6.box-sizing，该属性用于指定当前元素使用哪种盒子模型，标准（W3C）或 怪异（IE）

　　属性值：

　　　　　content-box（标准），padding和border不会被包含在width和height内

　　　　　border-box（怪异），padding和border被包含在width和height内，即元素实际大小只与width和height有关

7.flexbox，伸缩盒子模型（也叫弹性盒子）

　　它决定一个盒子在其他盒子中的分布，以及如何处理可用的空间。

　　该模型可以轻松的创建“自适应”浏览器窗口的流动布局。

　　传统盒子模型基于HTML文档流排列，弹性盒子模型可以规定特定的顺序。

　　通过设置 display属性值为 flex开启弹性盒子模型。

　　设置了弹性盒子模型后，float、clear、vertical-align在 flex中不起作用。

8.flex

　　基本结构：

　　display:flex，定义外层父容器 d0为弹性布局，默认为水平布局

　　flex-grow:value，该属性表示当前子项目在父容器中的占比，默认值为0

　　flex-direction，定义灵活项目的布局方向，属性值：row（默认值，灵活项目水平排列）、row-reverse（灵活项目以相反的顺序水平排列）

　　　　　　　　　　　　　　　　　　　　　　　　  column（灵活项目垂直排列）、column-reverse（灵活项目以相反的顺序垂直排列）

　　justify-content，设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，使用该属性之前必须先声明父元素为弹性盒子

　　　　　属性值：flex-start（默认值，子项目位于容器的开头）、flex-end（子项目位于容器的结尾）、center（子项目位于容器的中心）、

　　　　　　　　　space-between（子项目位于各行之间留有空白的容器内）、space-around（子项目位于各行之前、之间、之后都留有空白的容器内）

　　align-items，该属性定义灵活子项目在flex父容器的侧轴（纵轴）方向上的对齐方式

　　　　　属性值：stretch（默认值，拉伸子项目以适应容器）、center（子项目在容器中心）、flex-start（子项目在容器开头）、flex-end（子项目在容器末端）、baseline（子项目在容器基线）

WEB前端第十二课——CSS盒子

标签：等于   str   决定   作用   一个   ica   end   column   color   

原文地址：https://www.cnblogs.com/husa/p/13368626.html