- 博客(4)
- 收藏
- 关注
RSS订阅原创 flex- - -flex-basis flex-grow flex-shrink
这里的flex:1相当于下面的写法。三个值分别表示flex-grow,flex-shrink,flex-basis。注意，flex:1和只写一个flex-grow:1是不一样的。写成flex:1，flex-shrink,flex-basis的默认值是1和0%。而写成flex-grow:1,flex-shrink,flex-basis的默认值是1和auto。也就是flex-basis是不同的。常用:1:左边一栏占300px,右边一栏占余下所有.wrap{.box1{
2023-12-18 16:32:49
325
1
原创 margin的妙用
解释:item的相邻元素(只会是符合的紧跟着的后面的一个相邻元素),所以第一个item不是,然后第二个item是第一个item选中的,第三个是第二个选中的,用这个方法,巧妙的避开了第一个。还有一种方法就是让2和3都margin-left,或者1margin-right然后3margin-left。这边的话就是为了练习一下相邻元素的选择器,用了这个方法。从来没想到过,margin还能这么用。还有一个就是分成3部分。
2023-12-18 15:06:50
335
1
原创 Grid布局
总之就是,若是子元素没有高度,就按照容器的格子来,设置了,按照自己的来,例如默认第一格,行从第一行线到第二行线,同理列从1到1。默认应该是均分的,但是感觉可以让其根据子元素来撑,也可以定grid-template-rows: 200px 200px;如果行长了,超过容器的大小,也没什么关系,这个时候,容器高度设置和不设置一样,只不过就是容器有没有包裹住罢了。按顺序,然后后面的元素会自动放到网格剩余的空间中。行小,也还是有多余的空间(容易定高)5.跨轨道放置网格元素(子元素)6.网格间距(父元素)
2023-12-15 17:42:30
310
原创 CSS摘句
7.渐变文本效果： 使用CSS的background-clip属性和渐变背景色，可以为文本创建渐变效果。将渐变应用到文本的背景区域，形成独特的渐变文本效果。要确保盒子的宽度和总文本的宽度一样才会有渐变效果。使用CSS的border-image属性，你可以创建具有渐变效果的边框样式。定义渐变图像或渐变颜色作为边框的源，以及边框的切片方式和宽度。使用CSS的vw单位（视窗宽度的百分比）可以创建响应式字体大小。一般使用的地方是页面中有a标签跳转到本页的锚点,让其不是生硬的跳转使用。使用外部的字ttf体。
2023-12-06 10:49:21
322
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人