CSS笔记

狂神CSS笔记

一、选择器

1 基本选择器

/* 标签选择器 */
div{
	
}
/* id选择器 */
#id{
	
}
/* class选择器 */
.class{
	
}

2 层级选择器

/* 后代选择器 选中body标签中所有的后代div标签 */
body div{
	
}
/* 子选择器 选中body标签中的子div标签 */
body > div{
	
}
/* 相邻兄弟选择器 同辈：只有一个，相邻向下 */
A + B{  /* 选中A的相邻向下兄弟B */
	
}
/* 通用兄弟选择器 ：当前选中元素向下所有兄弟 */
A ~ B{  /* 选中A的所有向下兄弟们B */
	
}

3 结构伪类选择器

/* ul的第一个子元素 */
ul li:first-child{
     background-color: yellow;
}
/* ul的最后一个子元素 */
ul li:last-child{
    background-color: lightpink;
}
/* 选中li父级元素的第2个孩子，仅当第2个孩子是当前类型元素才生效 */
li:nth-child(2){
    background-color: lightblue;
}
/* 选中li父级元素的第3个类型为li的孩子 */
li:nth-of-type(3){
    background-color: skyblue;
}

4 属性选择器

/*class属性为red*/
a[class="red"]{
    color: red;
}
/*class属性包含two*/
a[class*="two"]{
    font-weight: bold;
}
/*class属性以one开头*/
a[class^="one"]{
    font-size: 2em;
}
/*class属性以three结尾*/
a[class$="three"]{
    font-style: oblique;
}
/*包含id属性*/
a[id]{
    background-color: black;
    color: white;
}

5 伪类选择器

a:hover{
  /*鼠标悬浮状态*/   
}
a:link{
  /*初始化状态*/   
}
a:visited{
  /*点击后状态*/   
}
a:active{
  /*点击中，按住没放的状态，*/   
}

二、美化页面

1 字体

a{
    /*单位可以用em，px。em表示一个缩进*/
    font-size:12px;
   	font-weight:bold;
    color:red;
    font-family:"宋体";
    /*字体风格;斜体*/
    font-style: oblique;
}

2 文本

a{
    /*文本修饰：加下划线，中划线，上划线等或者去掉等等*/
    text-decoration: none;
    
    /*文本缩进：首行缩进*/
    text-indent: 2em;
    
   	/*颜色*/
    color:rgb(0,0,0);/*rgb表示红绿蓝，0~255*/
    color:rgba(0,0,0,0.5) /*a表示不透明度，0~1*/
        
    /*文本水平居中*/  
    text-align:center;
    
    /*文本垂直居中 :文本行高等于块的高度
    line-height=height*/
    
    /*文本图片水平对齐*/  
    vertical-align:middle;
}

3 背景图像应用

div{
    /*颜色 图片 图片位置 平铺方式*/
    /*图片位置是相对于自身原来位置偏移*/
    background:red url() 100px 100px no-repeat;
}
div{
    background-image: url(../img/r.png);
	background-repeat: no-repeat;
	background-position: 230px 2px;
    color:red;
}

4 阴影

div{
    /*阴影颜色，水平偏移，垂直偏移，阴影半径（半径越大越模糊）
    相对于自身偏移，偏移原点在元素本身，x轴往右是正，y轴往下是正
    */
    text-shadow:red 10px -10px 2px;
}

5 列表

ul li{
    list-style:none; /*decimal,circle*/
}

三、盒子模型

1 盒子大小计算

margin+border+padding+盒子内容

2 margin

div{
    /*margin水平居中
    条件：块元素，有固定宽度
    */
    margin:0 auto;
}
div{
    /*参数顺序：
    一个参数时：代表上下左右
    两个参数时：第一个参数上下，第二个参数左右
    四个参数时：顺时针，上右下左*/
    margin:0 0 0 0;
}

3 border

div{
    /*粗细 实线虚线（dashed） 颜色*/
    border:1px solid red;
    
    /*可以利用border的none值画一个三角形*/
}

4 圆角边框

div{
    /*左上 右上 左下 右下 顺时针 */
    border-radius:0 0 0 0;
}

5 盒子阴影

div{
    /*颜色 水平偏移 垂直偏移 模糊（阴影）半径
    偏移原点在元素本身*/
    box-shadow:0 0 0 0;
}

四、浮动

1 标准文档流

就是文档正常的，依照元素本身性质（该换行换行，该包裹包裹）从上往下依次排列

2 display

div{
	display:none;
    dipalay:inline;
    dipalay:block;
    dipalay:inline-block;
    /*display可以自由的修改元素的性质，行内-->块级，块级-->行内等等*/
}

3 float

div{
    float:left;
    float:right;
    
}

4 clear

div{
    clear:left;  /*消除左侧浮动*/
    clear:right; /*消除右侧浮动*/
    clear:none; /*默认值*/
    clear:both; /*消除两侧侧浮动*/
}

5 解决float引发的父级元素边框塌陷问题

/*方法1：增加父级标签的高度*/
/*方法2：父级标签增加overflow属性*/
div{
    overflow:none;
    overflow:scroll;
    overflow:auto;/*和scroll效果差不多，溢出内容显示滚动条*/
}
/*方法3：在最后一个float元素后添加一个空div标签*/
<div id="clear">
#clear{
	margin: 0px;
	padding: 0px;
	clear: both;
}
/*方法4：父标签添加伪类after*/
#father:after{
	content: "";
	display: block;
	clear: both;
} 

6 display和float对比

display不能控制浮动方向，但不用考虑父级标签边框塌陷问题

float可以控制，但要考虑父级标签边框塌陷问题

五、定位

1 相对定位relative

div{
    position:relative;
    /*相对定位是相对于元素本身位置偏移的*/
    left:50px;/*与原来位置的左方偏离50px*/
    top:50px;/*与原来位置的上方偏离50px*/
    /*相对定位并不会偏离标准文档流，原来的位置会被保留*/
}

2 绝对定位absolute

div{
    position:absolute;
    /*绝对定位：
    1、当父级元素未定位时，相对浏览器偏离
    2、当父级元素已定位，相对父级元素偏离
    3、在父级元素范围内移动
    */
    left:50px;/*与父级元素或浏览器的左方偏离50px*/
    top:50px;/*与父级元素或浏览器的上方偏离50px*/
    /*绝对定位会偏离标准文档流，原来的位置不会被保留*/
}

3 固定定位fixed

div{
    position:fixed;
    /*也是相对于浏览器 偏移，设置后位置钉死了，滚条移动也不会变动*/
}

4 z-index及opacity

div{
    z-index:0; /*和ps的图层差不多，值越大越浮于上层，0~无限*/
    opacity:0~1;/*不透明度 rgba的a也是设置透明度*/
}

六、狂神经验分享

不要重复造轮子，对于一些静态页面（登录）直接去网上找开源项目，依照自己需求修改即可。Css很多我写到死可能都写不出

常用前端框架：element_ui ,lay_ui ,

关键字搜索：门户网站 模板之家 源码之家

动画：网上有非常漂亮的一些js+canvas写的模板。当然css页可以写动画，但好动画都是js 写的。