布局以及属性介绍

一、布局介绍

1.盒子布局

• border:边框
• padding:内边距
• margin:外边距

border属性以及解释

none	无边框
hidden	此边框与其他边框冲突时将此边框隐藏，即不显示（此时与none相同）
solid	点状边框
dotted	虚线边框
dashed	实现边框

2.元素的分类

块级元素 ------- 自动换行

div p hn hr 可以设置宽度（width）和高度（height）

行内元素  ------ 不会自动换行

display用于 实现块级元素和行内元素之间互换

display的取值

none	设置不显示
inline	表示转换成块级元素，转换后与块级元素有相同的性质
block	表示转换成行内元素，转换后与行内元素有相同的性质

3.浮动布局(float属性)

float取值

left	左浮
none	不浮动
right	右浮

注：会对后面的元素产生一定的影响

消除浮动(clear属性)

none	两边都可以浮动(默认值)
left	不允许左浮
right	不允许右浮
both	不允许两侧浮动

4.定位布局

• position ------ 对象的定位方式
• static ----- 静态定位（默认）
• absolute ------- 绝对定位 ：相较于父级对象的相对定位，如果不存在父级对象，那么父级是body
• relative ------ 相对定位：直接设置位置（相较于自身的相对定位）

5.5.1 overflow（hidden：隐藏元素）

属性：

• visible----- 不剪切内容也不添加滚动条(默认值)
• auto ----- 在必需时对象才会被裁剪或者添加滚动条
• hidden ----- 不显示超过对象尺寸的内容（即将超说对象尺寸的内容会被隐藏）
• scroll ---- 显示滚动条

5.5.2 zoom（设置或者检索对象的缩放比例）

• normal : 显示的是对象的实际尺寸（默认值）
• number:百分比或者浮点数（为1.0相当于100%相当于取值为normal）

5.6 弹性盒子css3（组成： Flexible 或者 Flexbox 和弹性元素 (Flex-item））

• 通过display属性进行设置---------- display:
• 值：flex或inline-flex
• 注：一个弹性容器可以包含多个弹性元素

三、 常见的属性

• flex- direction ------- 弹性容器中子元素的排列方式
• flex-wrap ------ 弹性容器中子元素超出父容器时是否换行
• flex-flow ----flex- direction 和flex-wrap 的简写
• align-items --- 弹性容器中元素在侧/纵轴的对齐方式
• justify-content ------ 设弹性容器中元素在主/横轴的对齐方式
• align-content-------修改flex-flow 的行为

四、特殊样式

• 2D转换（ransform属性）

       translate() ------- 从当前位置移动元素（ 平移的效果）

•     3D转换

         rotateX(x轴的值设置)

         rotateY(y轴的值设置)

         rotateZ(z轴的值设置)