Skip to main content

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

                           

Labels:

Comments

Post a Comment

Popular posts from this blog

span[class~="sr-only"]

  The  span[class~="sr-only"]  selector will select any  span  element whose  class   includes   sr-only . Create that selector, and give it a  border  property set to  0 . span [ class ~= "sr-only" ] {    border:   0 ; }
Post a Comment
Read more

An Australian Pelican feast that lasted more than two decades

Why are you so focused? It turned out that the pelicans were all waiting to eat fish with their heads up, hahahaha! In the Central Coast area north of Sydney, there is a beautiful and famous town called The Entrance, which has the title of "Australian Pelican Capital". What makes a town so honored? The reason is these cute toucans. Every afternoon, the pelicans fly here from near and far, and there are no obstacles 365 days a year. As soon as 3:30, a staff member will push a large box full of fish to the small square where the pelicans gather, and the pelicans have long been eager to wait. This white-haired grandpa came to feed today. I saw the grandfather skillfully put on rubber gloves, while taking a fish out of the box and throwing it at the pelican, he interacted with the onlookers and introduced the knowledge of the pelican. The noise of the pelicans competing for the fish and the exclamation of the onlookers crowded into one, the atmosphere was warm. A clever pelican s...
Post a Comment
Read more

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 ...
Post a Comment
Read more