零碎的html和css

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 1.1k 字 | 阅读时长 ≈ 4 分钟
总有些零碎的东西，一锅炖了。

垂直居中

通常的做法 height:40px;line-height:40px; 达到垂直居中的效果
建议的做法 可以通过 padding 和 line-height 相加来达到，这样比直接设置高度有更多的灵活性，适应性更好。

border和outline

border占用宽高空间，outline不占用

文字省略溢出

word-break: break-all; 单词的中断，当一行显示不下的时候，随意中断单词/数字, 控制如何分行
white-space:nowrap; 控制文字如何不换行
文字省略溢出

1
2
3
4
5
p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行文本的溢出效果谷歌上很多。

为什么在两个span之间会出现莫名其妙的空格？ 怎么消除？

其实不只是两个 span 之间会出现，所有的 inline 和 inline-block 元素之间存在回车、换行、空格、tab等的任何看不到的字符，显示到页面上都会表现为有一个空格的间隔。

解决办法是使用 浮动，浮动的元素是不遵守上面规则的。

元素的高度和空格

如果在页面有这样的代码<div style="font-size:20px">123123</div>，那么这个时候 div 的高度是多少？
答：不确定，这个时候是由字体决定，因为此时 div 的 line-height 是字体设计师设计字体的时候的建议行高（设计师觉得这个行高字体排列最好看），而 div 的高度为 字体大小 * 行高，如果字体不同，div 的高度也会不同，所以不确定 div 的高度，可以通过 css 覆盖字体行高。

html 中命名输入了两个空格，为什么页面上只会显示一个，空格的宽度也会不一样？
答：空格的宽度也跟字体有关，因为字体设计师在设计的时候给出的建议空格宽度，

两端对齐

text-align:justify 为什么两端对齐的没有效果？

答：text-align:justify只有在多行文字的情况下，才会出现两端对齐，在单行文字的时候，没有相对的参照物。

怎么实现单行两端对齐？

答： 可以通过在给元素添加一个 after 伪类，并设置伪类display:inline-block，然后设置text-align:justify ，然后指定元素的高度并设置overflow:hidden隐藏超出的 after，这样就实现了多行的效果，text-align:justify也就起作用了，其实文字是对齐了一个看不到的行。

1
2
<div>姓名</div>
<div>家庭地址</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div {
    width: 120px;
    text-align: justify;
    line-height: 30px;
    height: 30px;
    overflow: hidden;
}

div::after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 1px;
}

设置a标签有href属性时，触摸屏按下的颜色

1
-webkit-tap-highlight-color:rgba(0,0,0,0);

去除默认情况下，ios中input和button的圆角

1
-webkit-appearance: none

禁止用户对文字缩放

1
2
3
body *{
  -webkit-text-size-adjust:none
}
  • 当对某元素设置id属性id=someId时, window对象会增加同名属性, 可以通过window[someId]或window.someId引用该元素
  • getAttribute/setAttribute/removeAttribute操作元素的行间属性，attribute有一个特性是可以获取原始字符串，在获取src、href这样属性的时候，使用getAttribute可以获取源码里写入的值，而dom.src/dom.href获取的是浏览器处理过的值，在不同浏览器下会不一样
  • node.children获取所有的元素节点，node.childNodes获取所有的节点，包括元素节点、文本节点、注释节点等
  • p、dt和h1~h6不可以包含块级元素
  • private在定位的时候不脱离文档流，并且占有原来的位置，position: absolute;的元素是相对于已定位的父元素 ， position: fixed;的元素是相对于ViewPort（可视窗口），
  • 表格中colspan是横向合并，rowspan是纵向合并，border-collapse:collapse合并表格边框，消除边框间隙,忽略 border-spacing 和 empty-cells 属性
  • ul是无序的，ol是有序的
  • dl定义列表，dt定义列表标题，dd定义列表项，dl下有多个dd列表项，只有一个dt标题
    1
    2
    3
    4
    5
    6
    <dl>
    	<dt>我是标题</dt>
    	<dd>列表项</dd>
    	<dd>列表项</dd>
    	<dd>列表项</dd>
    </dl>