css调试样式整理

之前项目开发,零零散散笔记了些开发的知识,一直没有想整理总结,现在写博客整理吧


css篇

1.如何让div中的内容垂直居中

内边距(padding)法

padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
2.如何让div显示边框样式呢?

.divcss5{border:1px solid #F00}

3.CSS3 圆角(border-radius)

-moz用于Firefox
-webkit用于Safari和Chrome。
例如

#round {
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-moz-border-radius: 15px;      /* Gecko browsers */
-webkit-border-radius: 15px;   /* Webkit browsers */
border-radius:15px;            /* W3C syntax */
}
4.web手机字体自适应

css方法

@media screen and (min-width: 320px) {
html {font-size: 12px;}
}
@media screen and (min-width: 360px) {
html {font-size: 14px;}
}
@media screen and (min-width: 400px) {
html {font-size: 16px;}
}
@media screen and (min-width: 440px) {
html {font-size: 18px;}
}
@media screen and (min-width: 480px) {
html {font-size: 20px;}
}
@media screen and (min-width: 640px) {
html {font-size: 26px;}
}

标签就可用:font-size: 1.0rem,然后字体size就会根据屏幕适应了。

5.规定段落中的文本不进行换行:
p{
white-space: nowrap
}

<small>normal默认。空白会被浏览器忽略。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
<small>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,080评论 1 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,110评论 0 1
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,675评论 32 459
  • 引入 外部样式表 内部样式表 内嵌样式 此方式不利于后期维护,较少使用此方法。 语法 选择器属性声明=属性名:属性...
    小豸阅读 1,275评论 0 51