css知识

元素嵌套

• 块级元素一般可以包含行内元素
• 块级元素不一定能包含块级元素
• 行内元素一般不能包含块级元素
  • 注意： 在html5中，a标签包裹块级元素在一定程度上是合法的，取决于a标签的外层元素

     <a href=""><div>我是div，嵌套在a标签里的内容</div></a>  <!-- 合法的-->
     <p><a href=""><div>我是div，嵌套在a标签里的内容</div></a></p> <!-- 不合法的-->
  

选择器

选择器解析

• 浏览器基于性能考虑会将选择器从右往左进行解析，栗子：
  • .wrap .part01 .title { }一开始找类名是title的元素，再往上验证是否有类名为part01的元素，之后同理

伪类与伪元素的区别

• 伪元素是新的元素。真实存在于dom中，有内容有样式，如 ::before
• 伪类表示元素的某一状态，如 :hover

权重

• 权重分类：
  • ID选择器 +100
  • 类 属性 伪类 +10
  • 标签 伪元素 +1
  • 其他选择器 +0
• 权重计算数位时是不进位的，即11class选择器的权重没有1个id选择器高

非布局样式

字体

• 字体族：serif、sans-serif、monospace、cursive、fantasy
• 字体需要引号包裹，而字体族不需要，栗子：
  • .font { font-family: “Microsoft Yahei”, serif }
• 自定义字体

@font-face {
	font-family: 'my-font';
	src: url('');
}

• 使用网络字体时，需要注意跨域问题
• 使用多字体fallback，一般把只有一个平台有的字体写在最前面，其他的字体写在后面，栗子
  • font-family: 'PingFang SC', 'Microsoft Yahei', monospace;

行高

• vertical-align默认是与baseline对齐，其属性值还可以设置像素
• img底下存在空白间隙原因及解决方法：
  • 原因：img是inline元素，需要遵守行高的构成，默认是与baseline（基线）对齐
  • 解决：1. vertical-align:bottom; 2. display:inline-block;

background

• 颜色

  • background：hsl(10, 100%, 60%)； 色相，饱和度，亮度 hsla

• 渐变色：可定义渐变的角度方向以及颜色位置

  • background: linear-gradient(135deg, red 0, green 50%, violet 100%)

• 图片

  • background-position 相对于容器
    • center top; 图片置于元素顶部居中
    • 10px 50px；x轴10px，y轴50px
  • background-size: 100px 50px; 表示图片宽100px，高50px
  • 使用雪碧图时，图片的坐标与偏移的位置是相反的。一般是负数
  • 图片使用base64
    • 图片大小会比原来增大1/3
    • 适用于小图标
    • 不易于维护

• 雪碧图动画

  • 原理：两张图片弄成雪碧图，hover时更改图片的background-position值

	.i {
		width: 20px;
		height: 20px;
		background: url(./background.png) no-repeat;
		background-size: 20px 40px;
		transition: background-position .4s;
	}
	.i:hover {
		background-position: 0 -20px;
	}

• 边框

  • 边框背景图

  border-width: 20px;
  border-image: url(./border.png) 30 round; /* round按照整数格式平铺背景图 */
  

  • 边框实现三角形

  /* 一条定颜色两条透明色，不定义宽度 */
  width: 0px;
  height: 20px;
  border-bottom: 10px solid red;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  

• 滚动 overflow

  • visible：滚动条隐藏
  • hidden：— 隐藏
  • scroll：— 显示（滚动条一直存在）
  • auto：— 自动显示（需要滚动时滚动条才显示）

• 文本折行

  • overflow-wrap (word-wrap)：通用换行控制
    • 是否保留单词
  • word-break：针对多字节文字
    • 中文句子也是单词
  • white-space：空白处是否换行

• css hack 标准属性在前，hack在后，栗子

  width: 200px;
  width: 180px\9;
  

• 自定义checkbox图标（隐藏原生input，设置label)

/* 选中状态 */
.checkbox input:checked + label {
	background-image: url(../images/checkbox2.png);
}

/* 默认状态 */
.checkbox input + label {
	background: url(../images/checkbox1.png) left-center no-repeat;
	background-size: 20px 20px;
	padding-left: 20px;
}

• 利用vertical-align调整行内与行内块元素的布局

<a href="" class="inline">左inline</a>
<a href="" class="inline">右inline</a>
<div class="inline-block">内容</div>

.inline { background-color: lightgreen; }
.inline-block {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  vertical-align: middle;  /* 重点 */
}

表格布局

 <div class="table">
   <div class="table-row">
     <div class="left table-cell">左</div>
     <div class="right table-cell">右</div>
   </div>
 </div>

.table { display: table; }
.table-row { display: table-row; }
.table-cell {
  display: table-cell;
  vertical-align: middle;
  width: 200px;
  height: 200px;
}
.left { background-color: #bfbfbf; }
.right { background-color: #aaa; }

float布局

• 特点
  • 元素“浮动”
  • 脱离文档流
  • 但不脱离文本流
• 对自身的影响
  • 形成“块”（BFC）
  • 位置尽量靠上
  • 位置尽量靠左（右）
• 对兄弟的影响
  • 上面贴非float元素
  • 旁边贴float元素
  • 不影响其他块级元素的位置
  • 影响其它块级元素内部文本
• 对父级的影响
  • 从布局上‘消失’
  • 高度塌陷

css动画

transition动画

• transform每个属性值之间是不可以随意变换的
• 补间动画
  • 位置-平移（left/right/margin/translate）
  • 方位-旋转（rotate)
  • 大小-缩放(sacle)
  • 透明度（opacity）
  • 其他-线性变换（transform）

逐帧动画

• 适用于无法补间的动画
• 资源较大
• 使用steps()
• 注意图片大小和时长

.animation {
  width: 100px;
  height: 103px;
  background: url(./ani.png) 0 0 no-repeat;
  background-size: 100px 309px;
  animation: run .5s infinite;
  animation-timing-function: steps(1); /* 重点 */
}
@keyframes run {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 0 -103px;
  }
  75% {
    background-position: 0 -206px;
  }
  100% {
    background-position: 0 0;  /* 回到初始状态 */
  }
}

判别低于ie9

<!--[if lt IE 9]>
	<style>.comm-head{top:40px}</style>
	<p class="chromeframe">
	<span>您使用的IE浏览器版本过低，本站不再支持，</span>
	<a href="//windows.microsoft.com/">升级您的IE浏览器</a>
	<span>，或使用</span>
	<a href="//www.google.cn/chrome/">Google Chrome</a><a>、</a><a href="//www.firefox.com.cn/download/">Firefox</a>
	<span>等高级浏览器，将会得到更好的体验！</span>
	</p>
<![endif]-->

提示输入

<label for="country">请选择喜欢的国家:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
  <option value=“China”>
</datalist>

不同分辨率展示不同图片

<picture>
  <source media="(min-width:768px)" srcset="med_flower.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flower" style="width: auto;" />
</picture>

页面重定向 (刷新)

<meta http-equiv="refresh" content="4; URL='https://google.com' />

在父盒子中，子盒子居中

 <div class="parent">
   <div class="child">child</div>
 </div>

.parent {display:table-cell;vertical-align:middle;text-align:center;}
.child {width:150px;height:150px;background:lightcoral;display:inline-block;}

.parent {display:grid;}
.child {width:150px;height:150px;background:lightcoral;justify-self:center;align-self:center;}

自适应两栏布局

<div class="layout">
    <div class="aside">aside</div>
    <div class="main">main</div>
</div>

.aside {float: left;width: 100px;}
.main {overflow: auto;}<!-- 触发 BFC -->

.layout {width:100%;}
.aside {width:200px;float:left;}
.main {margin-left:200px;}

效果

三条杠

<i class="icon-menu"></i>

.icon-menu {
    display: inline-block;
    width: 140px; height: 10px;
    padding: 35px 0;
    border-top: 10px solid;
    border-bottom: 10px solid;
    background-color: currentColor;
    background-clip: content-box;
}

双层圆点

<i class="icon-dot"></i>

.icon-dot {
    display: inline-block;
    width: 100px; height: 100px;
    padding: 10px;
    border: 10px solid;    
    border-radius: 50%;
    background-color: currentColor;
    background-clip: content-box;
}

小于ie9提示

<!--[if lte IE 9]>
    <p style="background:#3e1f10;color:#fbf5e7;padding:10px 0;text-align:center;width:100%;font-size:14px;position:fixed;z-index:99999;top:0;left:0;">您使用的IE浏览器版本过低，本站不再支持，<a href="//support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads" style="color:#F13C35">请升级您的IE浏览器</a>，或使用<a href="//www.google.cn/chrome/"  style="color:#F13C35">Google Chrome</a>等高级浏览器，将会得到更好的体验！</p>
<![endif]-->

定义浏览器点击行为

<a href="tel:020-10086">打电话给:020-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:me@22278.club">发送邮件: me@22278.club</a>

css属性

user-modify 让普通元素拥有可读写功能

IE6-11不兼容

• read-only
• read-write
• read-write-plaintext-only：可编辑并且只能输入纯文本

user-select 是否允许用户选择页面内容

user-drag 禁止用户拖拽( img )