css常用代码速查

• 响应式布局

/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */

@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

<!-- 网页适配或响应各种不同分辨率的移动设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 清除浮动

/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

• 常用代码

.container {
  width: 100%;
  height: 200px;

  padding: 20px;
  padding: 10px 15px; /*先上下，后左右*/
  padding: 5px 5px 5px 5px; /*上，右，下，左*/

  margin-top: 20px;
  margin-left: 20px;  

  text-align: center;
  background: #ddd;
  
  text-decoration: none; /*清除字体样式，比如链接的下划线*/
  fontsize: 20px;

  overflow:hidden; 
  float: left;
}

• 各种样式

全局样式

* {
  box-sizing: border-box;
}

鼠标悬浮样式

.topnav a:hover {

}

设置样式下的某类元素

.menu li {

}

网页不留空边

body {
  margin: 0px;
}

class选择器

/* [class*= col-]  代表包含  col-  的类名 */
/*[class^=col-]  代表 以 col- 开头的类名 */
/*[class$=col-] 代表以 col- 结尾的类名 */

[class*="col-"] {
    
}

overflow三个作用

1.溢出隐藏

一般情况下，在页面中，一般溢出后会显示省略号

overflow: hidden;      /*溢出隐藏*/
white-space: nowrap;	/*规定文本不进行换行*/
text-overflow: ellipsis;	/*当对象内文本溢出时显示省略标记（...）*/

2.清除浮动

一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。

3.解决外边距塌陷

父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷

 

当子元素包含 float 或 margin 时，父级元素增加 overflow: hidden;