零碎的html和css

垂直居中

通常的做法 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>