一. 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]
网友评论