flexbox布局，媒体查询自适应屏幕大小，box-sizing-The idle Process

flexbox布局，媒体查询自适应屏幕大小，box-sizing

box-sizing的用途：防止盒子被撑大。

假设有个块元素，width和height都是200px，如果这个块元素的border是1px，那么这个时候块元素的实际宽高就是202px；假设块元素设置padding属性为1px，那么这个时候块元素的实际宽高就是204px。所以，块元素的padding和border实际都会撑大这个盒子。

要让盒子保持原来的尺寸，不受border和padding的影响的话，可以在css中加这么一句话：

* {

box-sizing: border-box;

}

box-sizing更改默认的计算元素宽高属性值。更改为border-box后，width=content+border+padding

媒体查询自适应屏幕大小

不同的设备浏览器大小是不同的，媒体查询就是查询窗口大小动态的显示或者调整元素。

@media (min/max-width: px)

{

元素 {

width: px;

height: px;

}

@media (prefers-reduced-motion:no-preference){* {
  scroll-behavior: smooth;
}}

flexbox布局

弹性布局方式，与常规的流式或块式布局不同。items 将会在主轴 (main axis) 或者在交叉轴(cross axis) 排版。

display: flex

Comments

Low risk, high reward: the asymmetric black swan trade

Cornwall Capital was founded in 2003 by two young people who were not in the mainstream - Charlie Ledley, and Gammy Mak. I say they were out of the mainstream because they were not financial professionals from a scientific background, but they were full of imagination, and a keen insight into the market. Their insight is evident in the transactions of First Capital Financial. Case Background Before betting that the subprime mortgage market would collapse, Cornwall Capital first noticed a credit card business company, First Capital Financial. Throughout the 1990s and early 2000s, First Capital Financial claimed that it had better tools than other firms for analyzing the creditworthiness of subprime credit card users and pricing the risk of lending to them, and the market bought that claim. But in July 2002, First Capital Financial's stock fell 60% in two days after the company voluntarily disclosed a disagreement between them and two government regulators: How much capital did they ...

盘点类似河北的儿童杀人案，是如何判决的

javascript Mutations

Return true if the string in the first element of the array contains all of the letters of the string in the second element of the array. For example, ["hello", "Hello"], should return true because all of the letters in the second string are present in the first, ignoring case. The arguments ["hello", "hey"] should return false because the string hello does not contain a y. Lastly, ["Alien", "line"], should return true because all of the letters in line are present in Alien. function mutation ( arr ) { var temArr =[]; for ( let i = 0 ; i < arr [ 1 ]. length ; i ++) //要比较的是第二个数组的，所以放在外层，内层每次都要遍历第一个数组，让第二个数组中的字符去与每一个第一个数组中的字符比较，相等就push一个true，然后马上跳出内循环 { for ( let j = 0 ; j < arr [ 0 ]. length ; j ++) { if ( arr [ 1 ][ i ]. toUpperCase ()== arr [ 0 ][ j ]. toUpperCase ()) ...

The idle Process

Search This Blog