首页 > 其他分享 >看到过的css 属性!!!

看到过的css 属性!!!

时间:2023-09-20 15:44:07浏览次数:50  
标签:flex 布局 看到 元素 默认 宽度 css 属性

记录一下看到过的,没见过的不知道就算了;

 

inline-size: 60px

block-size:30px

padding-block:10px

这三个文字属性 和 writing-mode: 有关, writing-mode 设置文字是从左往右排列还是从上往下


 


 


 关于 nth-child!!!

 MDN 文档里解释

p:nth-child(1) {

background-color:red; // 这个选择器中  第一个 p-title  和 div》p  都会是红色背景, 因为第一个算是第一个p ,然后 在div中, 也存在第一个p  !!!

}

 最后注意  

<p><p>123</p><p/>

这种语法嵌套, 最终生成的效果是 =》  <p ><p/><p>123</p>   因为段落p 不允许包含任何的块元素, 包括它自己




 

关于position:fixed 定位的补缺:

使用 元素 固定定位来得到高度的情况下 ,默认时候是相对于屏幕视口的定位的,但是当元素祖先存在 transform perspective, filter 属性非none 时, 容器视口会从屏幕视口变成改祖先。

 




 

el-cascader  级联组件   限制选中数量:

 

默认这个组件是双向绑定 v-model=""的, 要限制选中数量,

那么就需要取消双向绑定, 通过自己绑定 属性 :value="value"  然后判断 value 是否大于2, 通过change 事件去判断是否符合数量限制,然后赋值。




el-select  实现自适应宽度!!!

主要借助于 子元素的宽度去撑大父元素, 然后将子元素隐藏(但是需要占位 来实现!!!)

 




scroll-behavior: smooth:  表示平滑滚动, 这样子锚点条状的时候就会有动画效果

还有一种js的方式, 就是先获取锚点的dom

然后 : dom.scrollIntoView({behavior:smooth}),  通过这种方式也可以实现跳转到锚点

 


 


 


css 实现多个容器保持相同的宽度,

可以借助于 flex布局, 因为flex 布局默认会有一个属性 就是 align-items:stretch  , 会拉神子元素以保持同样的宽度或者高度,

但是有一个问题就是 如果  display:flex  flex-direction:column  这样虽然可以保持同样的高度, 但是会出现子元素默认都是撑满整个宽度的 ,

所以这里 解决方案就是 使用 inline-flex !!! 

 




aspect-ratio:  1/1  保持容器的宽高比始终为1:1 ! !!

 




:focus-within   :  表示存在焦点 的 元素或者子元素获取焦点应用的样式

 


 


 


莫名的div 对不齐,错位位置 或者文字对不齐的问题。 大部门可能是 vertical-align:baseline 这问题, 有时候不同容器中的文字为了保持默认的baseline 对齐, 就会错位容器!!!导致出现莫名的错位,莫名的滚动条等问题

 


 



vue2

vue.data 页面级暂存的思路和实现:

点击暂存按钮的时候,就是直接将this.$data中的数据存到localstorage中, 然后因为 vue中的 data() {} 其实就是一个函数,返回一个对象, 所以直接 可以 export default {let pageInfo =  JSON.parse(localstorage.getitem("vuepage"));  data() {return Object.assign({}, pageInfo ) ;}}

 




 

 

数字id太长导致请求接口报错的问题: 其实就是 js中 整型其实也就是精度要求的  大于 2**53 次方的 int id  就会出现id出现错误,导致请求失败。 所以也提醒id尽量使用字符串类型去存储!!!

至于解决方式 可以借助于 json-bigint 这个包。 npm 安装后  转换一下格式即可。


 


 

关于获取 transition: all 1s;  如果获取动画持续的时间的问题:

 

可以使用 window.getComputedStyle(dom). transitionDuration  就可以获取到 这个动画的持续时间, 那么就可以动态的设置定时器出发的时间,就可以完成动画完成后,执行逻辑操作的这种操作了,不用担心手动填的时间太短导致动画没完成就执行或者动画完成,等待时间太久等问题!!!

 




 

css 高度的悖论问题:

对于 <div class=father><div class=child></div><.div/>  ,  father的高度取决于 child的高度, 所以在child 的样式 设置 为 50% 是不会有效果的,因为father 没高度,而child 又说我的宽度是father的50% 。  除非child 是脱离了文档流的绝对定位。 子绝父相, 这样子就可以i实现!!!




float 布局, 子元素超高,内容被撑大导致超高, 就可能会出现布局错乱的问题!!!!这个排查UI需要很注意的点




 

 

span 标签默认是 inline, 也就是说默认宽度是根据内容来设置的, 但是如何将span 放到flex 布局中, span  就会自动被转成block, 就导致宽度不会跟着内容来改变, 就导致出现实际占位宽度和内容宽度不一致的问题!!!

 



inline 展示的标签, 默认的 vertical-align 是baseline  ,这就会导致莫名的缝隙问题。  将display  改成block 或者修改 vertical-align  就可以解决!!!

 



 

 

backgrond: url()  这个 属性默认只填写图片地址时, 其实其他 比如 no-repeat 属性 默认时会被加上  而且值是  initial  所以 如果单独给图片设置 background-repeat 属性, 一定要设置在backgrond: url() 后面或者 直接 background: url no-repeat  一起写

 




flex-direction:row-reverse,  碰到左右结构,还是flex 布局的 ,调换左右的结构可以使用 这个css!!!

 




 

 

关于 flex 布局,可能会出现缩放事件的 缩小事件不会被执行的情况。  这是因为不对flex布局的子元素设置 min-width 或者overflow 的情况下, flex布局自动伸缩 flex-shrink 事件不会小于内容宽度, 所以会出现 flex 布局的伸缩效果在拉伸浏览器,布局会变宽,但是小于一定的宽度后,不会在自己缩小的原因。

 




关于系统的深色模式还是浅色模式 

可以使用 media 查询来判断!!!

@media and (pefers-color-scheme: dark) {

// 表示当系统调到深色模式, 此处的css  样式就可以生效!!!

}



相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)

CSS 选择器 - CSS:层叠样式表 | MDN (mozilla.org)



 

margin 和 padding 的百分比的计算是按照 父级的宽度来计算的!!!!




 

对于左右结构,但是存在一边的区域内容高度低于 另外一边时, 可以使用 flex 布局默认的 拉伸,使得左右结构的高度一致!!!, 那如果一边的高度是动态的,那么另外一边的高度就可以自适应为动态的高度!!!

 

标签:flex,布局,看到,元素,默认,宽度,css,属性
From: https://www.cnblogs.com/Hijacku/p/17705573.html

相关文章

  • 用css控制td强制换行
    即便是给td限定的宽度,但是如果里面的内容是连续的,IE就认为是一个单词,不会换行。控制td换行的css样式:style="word-wrap:break-word;word-break:break-all;"<tablewidth="100%"border="0"cellspacing="1"cellpadding="0"><tr><tdwi......
  • css字体---跨站引入报跨域问题【解决方法】
    最近遇到一个问题,考虑到网站的性能,需要将图标字体单独放到一个网站引入,减少资源占用,但是遇到一个问题,引入字体文件的时候,报跨域的错误。具体解决方法:将图标字体转base64转换网址:https://transfonter.org/按照以下三个步骤进行操作: 然后下周这个: 里面有个:stylesheet.cs......
  • CSS的选择器
    CSS的选择器分为全局选择器、元素选择器、类选择器、ID选择器和合并选择器1.全局选择器<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"&......
  • Python 爬虫使用 Selenium 如何在 WebElement 获得属性
    首先,我们需要初始化驱动和指定使用特定的流量器。 代码如下: fromseleniumimportwebdriverwd=webdriver.Firefox()上面的代码可以简单的理解为启动一个Firefox的实例。使用css选择器可以把程序读取的HTML理解为一个Doc。我们需要在Doc中选择我们的元素,这个叫做选择......
  • Vue之与后端交互的三种方式、显示小电影案例、计算属性、监听属性、Vue生命周期、组件
    与后端交互的三种方式后端写了一堆接口前段会了前后端要打通===》从前端发送ajax===》核心:用js发送http请求,接收返回原生js,可以开启可以开启ajax,但是原生js开启,比较麻烦,需要做浏览器兼容,有坑(基本不写)jq,写了个兼容所有浏览器的$.ajax(),不仅仅有ajax,还封装了很多d......
  • Python 爬虫使用 Selenium 如何在 WebElement 获得属性
    首先,我们需要初始化驱动和指定使用特定的流量器。 代码如下: fromseleniumimportwebdriverwd=webdriver.Firefox()上面的代码可以简单的理解为启动一个Firefox的实例。使用css选择器可以把程序读取的HTML理解为一个Doc。我们需要在Doc中选择我们的元素,......
  • vue-计算属性、监听属性、生命周期钩子函数
    计算属性1.计算属性是基于他们的依赖变量进行缓存的2.计算属性只有在它相关依赖变量发生改变时才会重新求值,否则不会变(函数只要页面变化,就会重新运算)3.计算属性就像python中的property,可以把方法/函数伪装成属性4.计算属性,必须有返回值 实现输入input中后名字首字母大写......
  • spring中 beandefinition类中的6大属性
    什么是BeanDefinition?BeanDefinition表示bean的定义,spring根据 beandefinition用来创建bean对象,他有很多属性来描述bean。1.beanClass:表示一个bean的类型,比如UserService.class,在创建bean的过程中会根据此属性来实例化得到的对象。2.scope:表示一个bean的作用域,比如......
  • 谷歌浏览器提示:尝试通过Set-Cookie标头设置Cookie时被阻止,因为它具有“Secure“属性,但
    具体表现是使用谷歌浏览器https访问网址可以正常操作cookie,但是http访问,就会发现cookie不能操作,比如无法进行正常的登录。解决方案:清除谷歌浏览器的缓存数据。 参考链接:https://blog.csdn.net/Mr_yangx/article/details/115674652 ......
  • 用CSS来创造不规则的图形
    CSS创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。现在,我们已经可以使用CSS3常见不规则复杂图形了,如下图所示:image使用CSS创建的图形,无法内置文字或实现文字环绕效果。......