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

正则表达式匹配空格\s和特定次数

  let   ohStr  =  "Ohhh no" ; let   ohRegex  =  /Oh{3,6}\sno/ ig ;  let   result  =  ohRegex . test ( ohStr ); {3,6}表示匹配3到6次，包含3，6. {3, )表示最少3次，无上限 { ,8}表示最多8次，无下限 {3}匹配特定次数，这里表示只匹配3次的。 后面跟一个?，表示这个字母可能会出现，也可能不出现。如/colou?r/既能匹配英式英语的colour，也能匹配美式英语的color 在 pwRegex 中使用前瞻来匹配长度大于 5 个字符且具有两个连续数字的密码。 let   sampleWord  =  "astronaut" ; let   pwRegex  =  /(?=\w{6})(?=\w*\d{2})/ gi ;  let   result  =  pwRegex . test ( sampleWord );
Post a Comment
Read more