HTML＋CSS＋JS教程；前端

HTML+CSS+JS教程；前端

css的初始化，居中，隐藏，浮动，显示隐藏，溢出，定位

margin:0

padding:0

浏览器默认的加了边框，所以用来去掉边框

div是不需要清楚边框的，因为它默认是没有的。

以至于input标签也有边框

所以在写前端代码的时候我们首先会将所有的标签去除边框，可以直接拿别人设置好的直接复制过来引用。

hr就是水平分割线：简单来说就是一条线，但是现在被boder替代了

1.文字居中

div{

width: 300px;

height: 200px;

background:green;

text-align: center;

/* 文字垂直居中：设置行高属性的值等于自身高度属性的值 */

line-height: 200px;

}

p{

line-height: 100px;

}

文字

2. 标签居中-版心居中

div{

width: 1000px;

height: 200px;

background: #ccc;

margin: 0 auto;

}

3. 显示隐藏

div{

width: 100px;

height: 100px;

background: green;

/* display: none; 不占位 */

/* display: block; */

/* 占位 */

visibility: hidden;

}

h1

window.onload = function(){

var mydiv = document.getElementById("parent");

var mybtn = document.getElementById("btn");

mybtn.onclick = function(){

}

}

4. 溢出

div{

width: 200px;

height: 200px;

background: #ccc;

/* overflow: hidden; 隐藏 */

overflow: auto; /*只有超出的时候加滚动条*/

/* overflow: scroll; 直接加滚动条*/

}

文字效字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效

5.浮动

首先下想，是怎么让div这种换行标签在一行显示的？？？

所以就是浮动实现让换行的标签在一行显示

想让在一行显示每一个div都得加浮动

.box1{

width: 100px;

height: 100px;

background: red;

float: right;

}

.box2{

width: 200px;

height: 200px;

background: green;

float: right;

}

.box3{

width: 300px;

height: 300px;

background: blue;

float: right;

}

6. 定位

作用：标签堆叠；压在一起

相对；绝对；固定 定位

div{

border: 1px solid red;

position: relative;

left: 100px;

top: 200px;

}

/*

1、改变位置的参照物是他自己

2、占位 脱离 标准流/文档流（标签默认的显示方式）

3、还具备换行标签的特点

*/

div{

border: 1px solid red;

position: absolute;

top: 100px;

}

/*

1、不占位

2、参照物默认是浏览器，改：以最近的已经定位的父级为参照物 条件

3、不具备换行标签的特点

*/

div{

border: 1px solid red;

position: fixed;

left: 0;

top: 0;

}

/*

1、不占位

2、参照物是浏览器

3、不具备换行标签的特点

*/

7. 定位的灵活应用

div{

width: 800px;

height: 300px;

background: #ccc;

/* margin: 0 auto;? */

position: absolute;

left: 50%;

margin-left: -400px;

top: 50%;

margin-top: -150px;

/* 改变标签的显示级别 ：取值是整数，取值越大显示级别越靠上 */

z-index:10;

/* 内容和背景色一起透明 */

/* opacity: 0.5; */

/* alpha */透明

background: rgba(0,0,0,0.6);

}

p{

width: 300px;

height: 300px;

background: green;

position: absolute;

left: 500px;

top: 300px;

}

透明

8. iframe 框架标签

在框架集中替换body

iframe{

width: 1200px;

height: 800px;

}