笔记《七》--盒模型、布局模型、弹性盒模型

（一）布局

1、html中的标签元素大体被分为三类：块状元素、内联（行内）元素、内联块状元素

1.1、常用的块状元素(block)有：

display:block;

独占一行；width、height、line-height、top、bottom都可以设置；不设置width时默认是父容器的100%

head中，style内：a{display:block;}；把a标签设置为块状元素，独占一行。

1.2、常用的内联元素(inline)有：<a><span><label>

display:inline;

和其他内联元素在一行上、不可设置宽高和top以及bottom

1.3、常用的块状内联块状元素有：<img><input>

display:inline-block;

和其他元素在同一行上；但是可以设置宽高top，bottom

1.4、设置该标签元素不会被显示 display:none;

（二）盒子模型

1、盒模型的width和height是内容宽高，不包含border和padding

2、背景色---div {background-color: red;}

3、border---.div{border:2px solid red;}

border-width:2px;border-color:red;

border-style:solid实线, dotted点线, dashed虚线

border-top、border-left、border-right、border-top为某一边设置边框。

border-radous:左上、右上、右下、左下；同等于border-top-left-radius:10px;其他四个角同理。

4、padding/margin(padding在边框内、margin在边框外)

padding/margin:上，右，下，左

四个值一样的话：padding/margin:10px;

上下一样，左右一样的话：padding/margin:{10px,20px}

(三)布局模型-流动模型、浮动模型、层模型（flow、float、layer）

1、流动模型。

默认的网页布局样式。

块状元素自上而下按顺序垂直分布。

内联元素自左向右按顺序水平分布。

2、浮动模型

如果想要两个块状元素按照自左向右在一行显示，需要设置这个块状元素为float布局。

#div1{float:left; }

#div2{float:right; }

3、层模型

为了让html元素在网页中精确定位，引入层模型；分为绝对定位、相对定位、固定定位三种。

3.1、绝对定位（position:absolute）

设置某个元素在最近的父视图里的绝对定位。在父视图里的（x，y，w，h）

3.2、相对定位（position:relative）

设置某个元素相对于以前的位置的移动。（一般是0,0）

3.3、固定定位（position:fixed）

设置某个元素与浏览器窗口的固定位置。

3.4、relative和absolute的组合使用。（一般父视图relative；子视图absolute）

（四）弹性盒模型（flex）

一个父块状元素中有3个子块状元素。默认这三个块状元素，自上而下显示。如果想让他们自左向右显示。有以下方法：

(1)为每个子块状元素设置display：inline，但是要为每个子块状元素设置内容，否则不显示。因为内联不能设置宽高等，只能通过内容撑开

(2)为每个子块状元素设置display：inline-block

（3）为每个子块状元素设置：float：left

（4）为父块状元素设置：display:flex;

display:flex的特点。

A：把块状元素显示在一排

B：需要加在父视图上，改变的是子视图的排列

C：默认自左向右排列，默认和父视图左边没有间隙，子视图之间也没有间隙

display:flex;

justity-content:flex-start、flex-end、center、space-between、space-around，操纵横轴

flex-start：子视图自左向右展示

flex-end：子视图自右向左展示

center：子视图中间显示

space-between：子视图分布展示，第一个距离父视图左侧0px，最右边的子视图距离父视图右边0px，中间的子视图等间距。

space-around：子视图等间距展示。第一个距离父视图左边Npx；最右边的子视图距离父视图的右边Npx，中间间距2*Npx

align-items:flex-start | flex-end | center | baseline | stretch;操纵纵轴

flex-start：子视图在左上角，一行展示

flex-end：子视图左下角，一行展示展示

center：子视图中间，一行展示显示

baseline:子视图左上角，一行展示&&子视图内容文字的底线对齐。

stretch（默认值）：子视图在左上角，一行展示

如果子视图未设置高度或设为auto，将占满整个容器的高度。

如果子视图设置了高度，和flex-start效果相同

flex:N

父视图设置display:flex;子视图设置flex：N；N表示几份，占比

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。

（五）一些小技巧

1、水平居中：

2、实现父视图和子视图（定宽高）的中心对齐

3、实现父视图和子视图（不定宽高）的中心对齐