CSS技巧

CSS技巧

背景图片居中

• background-size: cover;：图片可能会被拉伸

• background-position: center;：图片尺寸不变，只是移动至正中间

button的边框

一般浏览器会给button默认边框

border: 1px solid #ccc;：一般都用灰色细边框替代

两个行内元素对齐

默认情况是不对齐的

vertical-align:middle;：对input和button都设置居中即可对齐。

对于HTML内置的内联级标签以及表单元素标签，源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格，这是IE才会有的问题，空格和回车都会被显示为一个3px的空格，将代码写在同一行即可。也可以给父标签设置font-size:0.如果子标签有文字，就单独给子标签设置font-size。

input框和button大小不一致是由于浏览器默认给input添加padding

但是使用pabdding:none无效，不知为何，暂时调整button大小以达到等高

vertical-align和line-height之间的区别

• 默认效果

• vertical-align：用于设置行内元素之间的垂直对齐方式，将其设置为middle可以实现行内元素之间居中对齐（一般是参考图片或表单元素）。效果：

  

• line-height：用于设置标签内部一行内容的垂直对齐，将其设置为标签的高度可以实现内部一行内容垂直居中。效果：

  

margin:0 auto;和text-align的区别

margin: 0 auto;意为上下margin为0，左右margin为auto，是针对块级元素的居中，如果是行内元素用text-align

当给紧挨块级父元素的子标签设置margin-top时，会带跑其父标签

给父标签设置overflow:hidden即可

文字竖向排列

writing-mode:tb-rl;

修改placeholder样式

input::placeholder{
    color:cornflowerblue;
}
input:focus::placeholder{
    color:blue;
}

水平垂直居中

特殊用法

• 对已设置宽高的标签可实现相对已定位的父标签垂直水平居中(相当于上下左右都在顶)。
• 对于未设置宽高的标签可实现平铺整个相对已定位父标签(相当于拉伸以实现四周距离为0)。

margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;

子绝父相

如果想要实现子div在父标签中使用绝对定位，建议给父标签设置相对定位，这样就不会对页面其他标签产生影响。

强制换行

当某个标签内部字母没有自动换行的时候，可以添加word-wrap：break-Word;来强制换行。