博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
样式技巧总结
阅读量:6285 次
发布时间:2019-06-22

本文共 1348 字,大约阅读时间需要 4 分钟。

  • 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
  • 关于水平居中和垂直居中的方法
    •  其中的6,7也是不错的办法
  • 如果要用伪类来清除浮动,样式一定要加display:block, content: " ", 如 
&:after {
clear: both; content: " "; display: block;} /* "display: block; clear: both;"是确保这个空白字符是非浮动的独立区块 */
  • flex这个属性的作用是把容器内的剩余宽度按照比例做一个分配,比如如下dom树,如果.title和.img flex:1,代表两个div 50% 50%分配宽度
  • 生鲜馆

    第二件半价

    • 如何去掉div中文字上下的间距,有一种解决办法,就是设置这个div的line-height, 设置成差不多当前字体大小的高度就行了。不知道还有没有其他办法。 关于样式的权重计算规则(经常发现父元素定义的font-size,子元素无法直接继承,因为*默认定义了font-size)
      • 第一等:代表内联样式,如: style=””,权值为1000。
      • 第二等:代表ID选择器,如:#content,权值为0100
      • 第三等:代表类,伪类和属性选择器,如.content,权值为0010
      • 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001
      • 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000
      • 继承的样式没有权值。
    • 关于如何清除浮动 
    • text-overflow只能针对单行文本溢出设置省略号,多行文本溢出设置省略号参考
    • 有关border-radius的详细原理,这篇文章说的很好 
    • 若想让容器内的元素通过text-align来设置左右对齐,子元素必须是inline或者inline-block的元素,如果子元素是block,父元素上设置text-align无效
    • 如果是inline元素,设置height width margin均无效
    • position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效。注意一点的是,position:relative并不能够隐式的改变display的类型(看了京东分类页的header-bar有感)
    • 写样式的时候发现比如我在父元素上定义的font-size不能传递给子元素,那可能是因为通配符(*)优先级大于继承而来样式的优先级

     

    样式命名技巧

    • “分离”,“统一前缀”,方法为“面向属性的命名”,准则为“无层级、无标签”。详见 

     

    转载于:https://www.cnblogs.com/linux-centos/p/7363452.html

    你可能感兴趣的文章
    CentOS6.5安装kafka-2.10-0.8.2(单机)
    查看>>
    主从复制、读写分离水平拆分及库表散列
    查看>>
    spring boot controller设置 @Transactional 不回滚的解决办法
    查看>>
    地铁是怎么建成的
    查看>>
    C# net request payload形式发送post请求
    查看>>
    java sm3加密算法
    查看>>
    jumpserver v0.5.0 创建用户和管理机器
    查看>>
    [转]深邃之思想,纯粹之灵魂——我所了解的柳智宇学长
    查看>>
    cgi与fastcgi区别_转
    查看>>
    Linux CentOS如何汉化系统
    查看>>
    k8s architecture
    查看>>
    Redis的Errorlog或者启动日志(错误日志)的配置
    查看>>
    机器学习算法GBDT
    查看>>
    Android 系统版本和API level的关系表
    查看>>
    【转】干货 | 【虚拟货币钱包】从 BIP32、BIP39、BIP44 到 Ethereum HD Wallet
    查看>>
    [转]1、蓝牙核心技术了解(蓝牙协议、架构、硬件和软件笔记)
    查看>>
    SpringMVC工作原理详解
    查看>>
    Java 11 Tutorial
    查看>>
    TD8和KuGoo(酷狗)冲突
    查看>>
    makefile里PHONY的相关介绍
    查看>>