（一）布局
1、html中的标签元素大体被分为三类：块状元素、内联（行内）元素、内联块状元素
1.1、常用的块状元素(block)有：
<div><p><hx><ol><ul><table><form>
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、实现父视图和子视图（不定宽高）的中心对齐
网友评论