2018-03-25


#####一. html块级元素
h1~h6 p address hr(水平分割线) blockquote ul ol table form div br nav footer…
特点
1.总是从新行开始。
2.高度、行高以及内外边距都是可控制的。
3.宽度没有设置默认为100%。
4.它可以容纳内联元素和其他块元素。
#####行内元素
em i abbr strong span a img input textarea b(加粗) …
特点
1.和其他元素都在同一行上。
2.高度、行高以及顶、底边距都是不可控制的。
3.宽度就是内容的宽度,不可改变。
4.内联元素只能容纳文本和其他内联元素。
######内联块级元素(display:inline-block)
特点
1.和其他元素都在一行上。
2.元素的高度、宽度、行高以及顶和底边距都可设置。
#####二、栈和队列的区别
栈:先入后出
队列:先入先出
#####三、选择器
1.元素选择器(body、p、ul…)
2.类选择器
3.id选择器
4.通配选择器

 *{color: red};

5.后代选择器

body h1 {font-size: 200%;}

6.相邻兄弟选择器

table + p { margin-top: 2.5em;} /*选择所有紧跟在table元素与之后的p元素*/
h1 + * {margin-top: 0;}

7.子选择器

div > p {color: red;} /*选择作为div元素子元素的所有p元素*/
ul > li {font-weight: bold;}

8.属性选择器

1.简单属性选择器
a[target]
{ 
background-color:yellow;
}/*选择所有带有target属性的 <a>元素*/
2.具体属性选择器
a[target=_blank]
{ 
background-color:yellow;
}/*选择所有使用target="_blank"的a元素*/
3.部分属性选择器
[title~=flower]
{ 
background-color:yellow;
}/*选择标题属性包含单词"flower"的所有元素 ~=可用于任何属性*/
4.语言属性选择器
[lang|=en]
{ 
background-color:yellow;
} /*选择一个lang属性的起始值="en"的所有元素*/
5.开始子串属性值选择器
模式 element[attr^="substring"]
div[class^="test"]
{
background:#ffff00;
} /*class属性值以"test"开头的所有div元素的背景颜色*/
6.结束子串属性值选择器
element[attr$="substring"]
7.任意子串属性值选择器
element[attr*="substring"]

9.伪类选择器

:link
:visited
:active
:hover
:focus
p:first-child /作为某元素第一个子元素的所有p元素/

10.伪元素选择器

:first-letter
:first-line
:before 在元素前插入内容
#####四、盒子模型
20140725102923126.gif
#####五.水平居中的方法

body{margin:0; padding:0} //清除默认样式
1. .center {
margin: o auto;// 上下 左右
text-align: center;
} /*可以给其设置一个宽度*/
2.通过display:flex实现CSS水平居中的原理
父元素display:flex;flex-direction:column;
子元素align-self:center;
.par {
            display: flex;
            flex-direction: column;
        }/*父元素*/
 .son{
            align-self: center; 
        }/*子元素*/
3. 在父元素和子元素宽度都确定的情况下,可以使用该方法,需要考虑子元素的宽度(下面所示方法,子元素宽度为200px。
        .par {
            width: 1000px;
            display: table-cell;
        }
        .son {
            margin-left: 400px;/*50%*/
        }
4.与3大同小异,父、子元素须确定的宽度
使用时,父元素position:absolute,子元素给剩余宽度一半的margin-left。
5.适用于子元素宽度不确定的情况下
需要配合“margin: 0 auto; text-align: center”使用
  .son {
            border: 1px solid black;
            width: fit-content;
            margin: 0 auto;
            text-align: center;
        }
6.已知宽度,通过设置position:absolute,margin-left为宽度的负一半
.par{position:relative;}
.son{position:absolute;left:50%;width:150px;margin-left:-75px;}

垂直居中

1.单行文本水平居中
将line-height和height设置为同样的数值。
<span style="font-size:14px;"><div style="height:500px;line-height:500px;">
    我是垂直居中的
</div></span>
2.利用vertical-align垂直居中
设置父级元素为display:table-cell以及vertical-align:middle,:设置为display:table-cell的元素,不能使用浮动或者定位
.parent {
            height: 500px;
            display: table-cell;
            vertical-align: middle;
        }
3.  可以将新增的元素高度设置的和父级元素一样高,宽度为0,并且同样设置vertical-middle:middle以及display:inline-block; 由于两个元素之间的空白会被解析,因此需要在父级设置font-size:0px;在子级又将font-size设置回来。    
 .parent{
            height:300px;
            font-size:0px;
        }
 .child{
            font-size:14px;
            display:inline-block;
            vertical-align:middle;
        }
 .space{
            display:inline-block;
            vertical-align:middle;
            height:100%;
            width:0px;
        }
4.通过绝对定位
   .parent{
            height:100px;
            position:relative;
        }
   .child{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
5.通过flex
(1)、在伸缩容器上设置侧轴对齐方式align-items: center
.parent{  
  height:100px;
  display: flex;  
  align-items: center;  
}
(2)在伸缩项目上设置margin: auto 0
.parent{  
height:10px:
display: flex;  
}  
.child{  
margin: auto 0;  
}  
6.
display:
top:50%;

#####六.js基本数据类型(5种)
undefined null number boolean
string
object(一种复杂的数据类型)
引用数据类型:array object function
#####七.jquery实现鼠标放到一张图片上显示图片信息,挪开不显示

$(document).ready(function () {

            $("img").mouseout(function () {
                $("img").hide();
            });
            setInterval(function () {
                $("img").show();
            },6000);

        });

#####八.求1-999的回文数

#include<stdio.h>
int main(){
	int i,m,sum=0;
	for(i=1;i<1000;i++)
	{
		m=i;
		sum=0;
		//数字反向 
		while(m)
		{
			sum=sum*10+m%10;
			m/=10;
		}
		if(sum == i)
		{
			printf("%d ",sum);
		}
	}
	return 0;

}

#####九.快排

//c语言
#include <stdio.h>
#define N 10
void quicksort(int a[],int low,int high);
int split(int a[],int low,int high);
int main()
{
	int a[N],i;
	for(i=0;i<N;i++)
	scanf("%d",&a[i]);
	quicksort(a,0,N-1);
	for(i=0;i<N;i++)
	printf("%d ",a[i]);
	return 0;
}
void quicksort(int a[],int low,int high)
{
	int middle;
	if(low>=high) return;
	middle=split(a,low,high);
	quicksort(a,low,middle-1);
	quicksort(a,middle+1,high);
}
int split(int a[],int low,int high)
{
	int split_element=a[low];
	for(;;){
	while(low<high&&split_element<=a[high])
	high--;
	if(low>=high) break;
	a[low++]=a[high];
	
	while(low<high&&a[low]<=split_element)
	low++;
	if(low>=high) break;
	a[high--]=a[low]; 
}
a[high]=split_element;
return high;
}

//javascript
function quick_sort(arr) {  
    if (arr.length <= 1) {
        return arr;
    }  
    var middle = Math.floor(arr.length / 2);  
    var pivot = arr.splice(middle, 1)[0];  
    var low = [];  
    var high = [];  
    for (var i = 0; i < arr.length; i++) {    
        if (arr[i] < pivot) {      
            low.push(arr[i]);    
        } else {      
            high.push(arr[i]);    
        }  
    }  
    return quickSort(low).concat([middleValue], quickSort(high));
}

var arr = [6,4,5,2,7];
quick_sort(arr);  // [2,4,5,6,7]


猜你喜欢

转载自blog.csdn.net/qj6837/article/details/84575698