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

Simmons Will not use the three-pointer as a conventional weapon, it is difficult to shoot like Curry Soup.

Since entering the league, Ben Simmons's physical condition, athleticism, vision and off-season offense are top-notch, but only shots have been criticized. In the first two seasons of his career, Simmons made a total of 17 shots from three-pointers. In 0, when he is shooting on the outside, the opponent can make a "please" gesture at will. But even if he is not good at shooting, Simmons is still selected for the All-Star team last season. If he gets a shooting skill package? The prospects of Simmons are undoubtedly limitless. This summer, Simmons has been polishing his jumper under the guidance of trainer Chris Johnson. From some streaming videos, he can see that his three-point jumper has improved. In the preseason game against Guangzhou, Simmons hit the first three-pointer in his career, and in the subsequent game against the Hornets, he made a mid-range jumper. It seems that Simmons seems to have more confidence in his jump shot, and he is more willing to sho...
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