CSS那些事

CSS定位那些事

左边定宽，右边⾃适应⽅案：float + margin，float + calc
/* ⽅案1 */

.left {
width: 120px;
float: left; }
.right {
margin-left: 120px; }
/* ⽅案2 */
.left {
width: 120px;
float: left; }
.right {
width: calc(100% - 120px);
float: left; }

左右两边定宽，中间⾃适应：float，float + calc,圣杯布局（设置BFC，margin负值法），flex

.wrap {
 width: 100%;
 height: 200px; }
.wrap > div {
 height: 100%; }
/* ⽅案1 */
.left {
 width: 120px;
 float: left;
 }
.right {
 float: right;
 width: 120px; }
.center {
 margin: 0 120px; }
/* ⽅案2 */
.left {
 width: 120px;
 float: left; }
.right {
 float: right;
 width: 120px; }
.center {
 width: calc(100% - 240px);
 margin-left: 120px; }
/* ⽅案3 */
.wrap {
 display: flex; }
.left {
 width: 120px; }
.right {
 width: 120px; }
.center {
 flex: 1; }

左右居中
⾏内元素:text-align: center
定宽块状元素: 左右margin值为auto
不定宽块状元素: table布局，position + transform

/* ⽅案1 */
.wrap {
text-align: center
}
.center {
display: inline;
/* or */
/* display: inline-block; */
}
/* ⽅案2 */
.center {
width: 100px;
margin: 0 auto; }
/* ⽅案2 */
.wrap {
position: relative; }
.center {
position: absulote;
left: 50%;
transform: translateX(-50%); }
**上下垂直居中**
定⾼：` margin ， position + margin` (负值) 
不定⾼：` position + transform ， flex ， IFC + vertical-align:middle`
/* 定⾼⽅案1 */
.center {
height: 100px;
margin: 50px 0; 
}
/* 定⾼⽅案2 */
.center {
height: 100px;
position: absolute;
top: 50%;
margin-top: -25px; }
/* 不定⾼⽅案1 */
.center {
position: absolute;
top: 50%;
transform: translateY(-50%); }
/* 不定⾼⽅案2 */
.wrap {
display: flex;
align-items: center; }
.center {
width: 100%; }
/* 不定⾼⽅案3 */
/* 设置 inline-block 则会在外层产⽣ IFC，⾼度设为 100% 撑开 wrap 的⾼度 */
.wrap::before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle; }
.wrap {
text-align: center; }
.center {
display: inline-block; 
vertical-align: middle; }

盒模型：content（元素内容） + padding（内边距） + border（边框） + margin（外边距）

延伸： box-sizing
content-box ：默认值，总宽度 = margin + border + padding +width border-box ：盒⼦宽度包含padding 和 border ， 总宽度 =margin + width
inherit：从⽗元素继承 box-sizing 属性

BFC、IFC、GFC、FFC：FC（Formatting Contexts），格式化 上下⽂

BFC：块级格式化上下⽂，容器⾥⾯的⼦元素不会在布局上影响到外⾯的元 素，反之也是如此(按照这个理念来想，只要脱离⽂档流，肯定就能产⽣BFC )。产⽣BFC⽅式如下
float 的值不为none。
overflow的值不为 visible 。
position 的值不为relative 和 static 。
display的值为 table-cell, table-caption , inline-block中的任何⼀个⽤处？常⻅的多栏布局，结合块级别元素浮动，⾥⾯的元素则是在⼀个相对隔 离的环境⾥运⾏。
IFC ：内联格式化上下⽂，IFC 的 line box （线框）⾼度由其包含⾏
内元素中最⾼的实际⾼度计算⽽来（不受到竖直⽅向的padding/margin 影 响)。
IFC中的line box⼀般左右都贴紧整个IFC，但是会因为 float 元素 ⽽扰乱。float 元素会位于IFC 与line box之间，使得 line box 宽 度缩短。 同个 ifc下的多个line box⾼度会不同。IFC中时不可能有 块级元素的，当插⼊块级元素时（如 p中插⼊div）会产⽣两个匿名块与
div分隔开，即产⽣两个IFC ，每个IFC对外表现为块级元素，与
div垂直排列。
⽤处？
⽔平居中：当⼀个块要在环境中⽔平居中时，设置其为inline-block则会在外层产⽣
IFC，通过 text-align 则可以使其⽔平居中。 垂直居中：创建⼀个IFC，⽤其中⼀个元素撑开⽗元素的⾼度，然后设置其vertical-align : middle ，其他⾏内元素则可以在此⽗元素下垂直居中
GFC：⽹格布局格式化上下⽂（ display: grid） FFC：⾃适应格式化上下⽂（ display: flex）

每天天一句外语

日语

1、你好——口你七哇（白天）、袄哈有（早上）、空帮哇（晚上）

2、谢谢——阿里嘎脱

3、再见——撒腰那拉（这个不常用）

4、再见——八一八一or甲or甲阿内or甲马塔or马塔内or扫屋甲

5、没关系——卡马依马散 多依塔洗马洗帖（te）（对方说谢谢时用）

6、是！不是！——害！依——挨！

7、行！不行！——依——内！打咩！ j

8、对不起——死米马散！or狗埋！

9、不知道——希腊那依

10、这是什么？——口来挖囊打卡？

11、妈妈——欧卡桑

     爸爸——欧多桑

      哥哥——欧尼桑

      姐姐——欧内桑

      弟弟——欧偷偷

      妹妹——依毛偷

      爷爷辈——欧吉依桑

      奶奶辈——欧巴阿桑

      阿姨辈——欧巴桑

      叔叔辈——欧吉桑

12、一到十——一起、你、桑、有、锅、楼哭、娜娜、哈气、哭、九

13、太贵了！——塔卡依内！

14、这个多少钱？——口来依哭拉跌（de）死卡？

15、我也不好意思——口七啦口扫

16、好吃——袄依洗衣

17、我要开动啦——依塔大ki马死

18、我吃饱啦——锅七锁撒马跌洗他

19、为什么？——多无洗帖？or囊跌？or哪在？

20、小心——阿布那依

21、生日快乐——烫叫比偶咩跌偷

      圣诞快乐——库里斯马死欧咩跌偷（按英语那样读就行）

22、最近忙吗？——依马锅楼一扫嘎洗衣跌死卡？

23、你多大了？——阿纳塔哇囊撒依跌死卡？

24、我回来啦——他大姨妈

25、你回来啦——欧卡挨里

26、我走啦——依帖ki马死

27、你走好——依帖拉瞎依

28、好久不见了——偶嘿撒洗不利

29、你身体还好吗？——欧赶ki跌死卡？

30、你要去哪？——多口挨（e）依哭诺卡？

31、您是哪位？——多奇拉撒马

32、别吵！——萨瓦古纳

33、不要放在心上——ki你洗那哭帖毛依依

34、没怎么样——囊跌毛那依

35、不，没事——依呀，打依叫不

36、不必担心——新拜洗那哭帖毛依依有

37、明白了——哇卡他

38、你说谎——五锁刺ki

39、去哪？——多口挨？

40、别过来——口那依跌

41、是个什么样的人？——多那嘿（hi）头跌死卡？

42、原来如此——那炉火多（阿笠博士和原田常用语~~呵呵~~）

43、好可怕——口哇依那

44、这样可以吗？——口累跌打依叫不

45、去死吧——哭他巴累

46、真有趣——欧毛洗楼依内

47、很郁闷——武器空跌依鲁

48、糟透了——咱咱打咩

49、怎么样？——多无？

50、真厉害——死锅依！死给（男用）

51、该死——哭扫

52、好漂亮——ki来（re）依打内

53、真可怜——卡瓦伊扫

54、真可爱——卡瓦伊依内

55、别哭了——那卡那依跌

56、我请客——欧锅炉腰

57、胡说——五锁

58、不！——依呀

59、游戏结束——给母欧巴

60、太好了——腰卡他

61、再来一遍——毛五一起多

62、烦人——无路撒依。or无路赛爱那

63、色鬼——死开百（be）依

64、活该——扎马米洛

65、小气鬼——开七

66、傻冒——阿霍（修次和服部常用~~嘻嘻~~）or阿霍哭撒依

67、笨蛋——巴嘎那

68、混蛋——巴卡雅洛

69、万岁——帮扎依

70、真可恶——马塔哭

71、真的吗？——混偷？or马吉？

72、我爱你——阿姨洗帖路

73、我喜欢你——死ki打腰

74、真可笑——欧卡洗衣

75、那又怎么样——扫（so）屋洗帖那你

76、果然如此——哑怕里扫屋打（柯南常用语~~嘿嘿~~）

77、气死了——母卡次哭

78、吹牛——活啦不ki

79、没问题——蒙打那依

80、真没用——牙哭打他那依

81、真凉快——死字洗衣

82、古怪的家伙——汉金打内

83、放开我——哈那赛腰（常听诸多女生这么叫~~）

84、我是真心的——洪ki打腰

85、别动——无锅（go）卡那依跌

86、没什么——百次你（银次常用语~~）

87、快点——哈亚库（三藏常用语~~）

88、真懒——那马开猫脑

89、讨厌死了——欧欧ki那拉打

90、多管闲事——欧欧ki那欧塞瓦达

91、滚！——跌帖依开or多开

92、开玩笑嘛——叫当大腰

93、真是难以置信——新吉拉来那依

94、相信我——新吉洛

95、神经病——新开（ke）洗次打

96、冷静点——欧七次开

97、胆小鬼——腰哇母洗打内

98、辛苦啦——欧次卡来撒马（出现频率很高）

99、走吧——依ki马消无噢噢or依哭腰

100、冲啊——依开

101、真差劲——撒依帖

102、真遗憾——脏难打内

103、小心点——ki欧次开帖

104、好恶心——ki猫七哇路依

105、什么？——那你？

106、什么事——囊跌死卡？

107、你贵姓？——欧拿马艾哇？

108、放心吧——昂新洗帖

109、当然啦——猫七龙

110、太棒了——呀打！

111、不要！算了——呀咩帖！呀咩路！

112、请原谅我——有路洗帖哭打撒依

113、乱七八糟的——咩恰哭恰打

114、我厌烦了——猫无阿ki他

115、够了——猫无依依

116、还差得远呢——马达马达达腰（谁的名言大概也不用我说了）

117、瞧——米帖米帖

118、像个傻瓜——巴卡米塔伊

119、服了你了——蚂蚁他内

120、不会吧——马撒卡！

121、怪不得——多里跌

122、好无聊——此马拉那依

123、你怎么了——多无洗马喜塔

124、真衰——打咩打内

125、等一下——瞧套马跌

126、累死了——次卡来他

127、不好了——塔伊汉打

128、救命——他死开帖

129、求你了——他诺姆

130、可能是吧——扫屋卡那

131、不是吗？——扫屋甲那依诺？

132、是呀是呀——扫屋扫屋

133、对了！——扫屋打

134、正是这样——扫诺偷欧里

135、妙极了——死帖ki打

136、不好意思——斯马那依

137、别碰——撒哇啦那依跌

138、振作点——洗卡利洗洛

139、糟了！——洗马塔

140、看我的——考七米帖

141、好酷——卡口依那！

142、好帅——航撒母打内！

143、加油——刚巴累