CSS3 常用基础用法

一、选择器

选择器优先级：id > class > 标签

1、标签选择器

h1 {
	// 颜色
	color: red;
	// 背景色
	background: #38d185;
	// 圆角
	border-radius: 10px;
	// 字体大小
	font-size: 20px;
	}

2、类选择器

.b {}

3、id选择器

#a {}

4、层级选择器

// 后代选择器，后代所有p标签
body p {}
// 子选择器
body>p {}
// 兄弟选择器  向下寻找一个
.a + p {}
// 通用兄弟选择器  向下寻找所有
.a ~ p {}

5、伪类选择器

	// ul标签下的所有li标签中的第一个
ul li:first-child{}
	// 同理
ul li:last-child{}

	// 选中当前p标签的父标签下的第一个标签，必须是p标签才生效
p: nth-child(1) {}
	// 选中当前p标签的父标签下的第二个p标签
p: nth-of-type(2) {}

	// 鼠标移动上去才有的效果
a:hover {}

6、属性选择器

// 所有a标签里有id的标签
	a[id]{}
	// 所有a标签里有id且为first的标签
	a[id = first]{}
	// 所有a标签里有class且包含first的标签
	a[class *= "first"]{}
	// 所有a标签里有href且以http开头的标签  同理$符号表示结尾
	a[href ^= http]{}
	a[href $= http]{}

---

二、样式

1、常用样式

height: 50px          	//高度
width: 50px          	//宽度
color: red				//颜色
background: #38d185   	//背景颜色
float: left           	//浮动（靠左）
display: block        	//展示
display: flex        	//水平布局  使用这个才能用 flex: 1 //铺满
flex-direction: column  //垂直布局
display: none        	//隐藏
overflow: hidden        //多余部分隐藏
border-right: 1px solid #000000 //右边框
border-radius: 10px   	//圆角
text-align:center    	//文字居中
text-decoration:none	//去除下划线
margin-left:5px			//左外边距
font: bold 20px/50px Arial //字体：粗体，大小，行高，字体
font-family:宋体		//字体

2、字体样式

// 字体样式
font-family:宋体		// 字体
font-size: 20px;  		// 字体大小
font-weight:cold		// 字体粗细
font: oblique bolder 12px "楷体" // 斜体，粗体，大小，字体

3、盒子层叠，隐藏显示

// 盒内图片，禁止重复，居中
backgroud: rgba(0,0,0,.4) url(images/arr.png) no-repeat center;

// 隐藏
.mask {
     display: none   
 }
// 鼠标移动上去，取消隐藏
.a:hover .mask {
    display: block
}

4、绝对定位，把阴影标签写死定在父级盒子上

5、输入框样式

border: 0          //  去除初始边框
outline: none;     //  去除选中时的边框
font-size: 10px    //  输入文字大小
padding-left: 15px //  左边间距大小
color: #757575     //  灰色字体
border-radius: 5px //  圆角

6、自适应大小

全部尺寸都用rem / 字体大小来显示
width: 20rem / 40  
height: 30rem / 40