1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 </body>
9 </html>
10 <!--
11
12 合模型
13 标准合模型：box-sizing:content-box;
14 宽高是独立的
15 内边距是独立的,会把元素成大
16 边框是独立的
17 注：宽高不包含内边距和边框
18
19 怪异合模型：box-sizing:border-box;
20 宽高包含内边距和边框
21
22 弹性盒布局：display:flex;
23 display:inline-flex;
24 作用：控制子集在主轴上排列
25 显示规则：所以的子元素都会在主轴上排列
26 默认x为主轴
27 x为主轴时，y为侧轴
28 y为主轴时，x为侧轴
29 设置方法：父级元素必须为弹性盒display:flex;
30
31 设置为display：flex；
32 1：弹性盒，子元素默认在主轴排列，默认x为主轴
33 2：父级元素为弹性盒，子元素都能设置宽高
34 3：父元素为弹性盒，让子元素在弹性盒中上下左右居中，只需要设置margin：auto；
35
36 设置为display：flex；display:inline-flex;对子元素的影响
37 子元素的float和clear 无效
38 vertical-aling(垂直对齐方式失效)
39 vertical-aling：middle;垂直中间对齐
40 只对inline和inline-block有效
41
42 容器（父元素)flec-direction:;设置主轴方向
43 flex-direction:row; 水平主轴
44 flex-direction:row-reverse;水平反向主轴
45 flex-direction:column;垂直主轴
46 flex-direction:column-revrese;垂直反向主轴
47
48 换行flex-wrap:; 条件：子元素大于父元素
49 flec-wrap:nowrap;默认不换行
50 flex-wrap:wrap;换行
51 flex-wrap:wrap-reverse;反向换行
52
53 综合写法 flex-flow:row-reverse wrap;
54
55 主轴上的对齐方式 justify-content:;
56 justify-content:flex-start; 主轴起始位置
57 justify-content:flex-end; 主轴终点位置
58 justify-content:center; 主轴中间位置
59 justify-content:space-around; 自动分配间距
60 justify-content:space-between; 两端对齐，中间自由分配
61
62 侧轴上的对齐方式 align-items:;
63 align-items:flex-start; 起始位置
64 align-items:flex-end; 终点位置
65 align-items:center; 中间位置
66 align-items:bacseline; 基线对齐
67 align-items:stretch； 默认换行
68
69 多行在侧轴的对齐方式 align-content:;
70
71 项目（子元素）
72 属性:
73 align-self:; 子元素在侧轴上的对齐方式
74 align-self:flex-start; 起始位置
75 align-self:flex-end; 终点位置
76 align-self:center; 中间位置
77 align-self:stretch; 元素被拉伸，没有设置大小
78
79 order:; 数值越大越靠后
80
81 flex:1;
82 flex-grow:1; 定义项目剩余的宽度
83 flex-shrink:1;项目总宽度超过容器时的缩小设置
84 0 本身大小
85 1 平均分配
86 flex-basis:0%; 项目的长度
87 综合写法
88 flex:放大 缩小 长度; 一般后两者不写
89
90 多列布局：
91 column-count:3;分列数,平分
92 column-gap:50px;列间隔
93 column-rule:10px solid #000;分割线
94 column-fill:;列的高度是否统一
95 column-fill:auto; 列高度自适应内容
96 column-fill:baclance;所以列的高度以其中最高的一列统一
97 column-span:all; 横跨所有列
98 column-span:all; 不横跨
99 column-width:;列宽
100
101 综合写法：
102 column
103
104 break-inside:avoid;不断层
105
106 响应式布局：
107 为了适应不同的设备，分辨率
108 不同的设备（pc电脑端 平板 手机）
109
110 响应式的优点：
111 1：一套项目，能适应不同的设备，灵活
112 2：能够快级解决多设备显示适应问题
113 3：从显示上来看：用户体验会更好一点
114
115 响应式的缺点
116 1:繁琐，代码量大，会出现隐藏无用的元素，加载时间长
117 2:开发成本偏高（不同的项目组）
118 开发一套产品不能满足要求
119 一套图也不能满足要求（移动端 pc端）
120 前段布局：一套布局方案是不能满足
121 数据：pc 移动端
122 3：兼容不同的设备，兼容性工作量加大，效率低下
123 4：这是一个折中的解决方案，多方面的因素影响达不到最佳效果
124 5：会出现用户混淆
125
126 为什么讲响应式：
127 利用响应式的思想，左移动端项目的适配+
128
129 媒体查询
130 @media 设备 and (条件){
131 选择器{属性：值；}
132 }
133 @media all and (min-width:700px){
134 .box{background:red;}
135 }
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152 -->
合模型开始
猜你喜欢
转载自www.cnblogs.com/tgs761578449/p/12676587.html
今日推荐
周排行