css笔记

选择器

/*
三个基本选择器
*/
/*优先级别：id>class>标签 */
/*id唯一选择器*/
#idname{
    color:yellow;
}
/*class选择器*/
.classname a{
    color: black;
}
/*基本标签选择器*/
h1{
    color:blue;
}

/*
**重要**属性选择器：标签[属性] 此标签有此属性就选择
 */
a[id*="id"]{
    /*可以用正则表达式（用在左边）,
    可以不用冒号*/
    color:green;
}
a[class]{
    color:green;
}

/*
    层次选择器
 */
body p{
    color:red;
    /*body 下面的 全部p变红*/
}
body>p{
    color:red;
    /*子第一代p变红*/
}
.liclass + li{
    color:red;
    /*.liclass下面第一个li变红*/
}
.class~p{
    background: red
    /*同级下面的全部p*/
}

/*
结构伪类选择器
 */
.p1 p:nth-of-type(1){
  //指定与p同级（就是.p1的子一代）的第一个p元素
}
.ul li:nth-child(1){
  //指定与li同级（就是.ul的子一代）所有元素的第一个元素,若该元素不是li无效
}
a:hover{}
a:visited{}

浮动

  clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。

clear清除浮动的最佳实践(clearfix)：

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

注意：
✦ 浮动最初设计只是用来实现文字环绕排版的。
✦ 浮动的三个特点很重要。

1. 脱离文档流。
2. 向左/向右浮动直到遇到父元素或者别的浮动元素。
3. 浮动会导致父元素高度坍塌。

✦ 解决父元素高度坍塌的方式就是清除浮动，常规的方法是clear清除浮动和BFC清除浮动，推荐clearfix的方式。一定要弄清楚clear清除浮动的底层原理以及clearfix的那几行代码的具体作用。

作者：齐修_qixiuss
链接：详细版

justify

		<div class="form">
			<div>
				<span class="text">用户名</span>
				<input type="text">
			</div>
			<div>
				<span class="text">密码</span>
				<input type="text">
			</div>
			<div>
				<span class="text">四个字的</span>
				<input type="text">
			</div>
			<div>
				<span class="text">你12-n你</span>
				<input type="text">
			</div>
		</div>

.form .text{
			display: inline-block;
			width: 150px;
			text-align-last: justify;
		}