学习笔记_css初级篇-盒子模型、层模型

对齐方式

/* 对齐方式 */
div {
    border:1px soild black;
    text-align:center;
    /* text-align是对齐方式，值有，center居中，left左对齐，right右对齐 */
}

文本行高

/* 文本行高 */
div {
    border:1px soild black;
    text-align:center;
    line-height:16px;
    /* line-height是单行文本所占高度 */
    /* 如果想让文字在一个容器里水平垂直都居中，可以使line-height等于容器高度，text-align也居中即可 */
}

首行缩进

/* 文本行高 */
div {
    border:1px soild black;
    text-align:center;
    line-height:16px;
    text-indent:2em; 
    /* text-indent是首行缩进 */
    /* 单位em，是一个相对单位，相对该标签的font-size，如设置一个1.2倍行高，line-height:1.2em;即可*/
}

横线用法（上、中、下划线）

/* 文本行高 */
div {
    text-decoration:line-through;
    /* 参数line-through等于<del>标签的中划线 */
    /* 参数underline;是下划线 */
    /* 参数overline;是上划线 */
    /* text-decoration:none; 意思是这个元素没有线，<a>标签就可以使用none把线去了*/

}

当鼠标移上去元素发生什么

/* 文本行高 */
div {
    text-decoration:line-through;
    cursor:pointer；
    /* 参数pointer当鼠标放上去，显示小手 */
    /* 参数help当鼠标放上去，显示帮助 */
    /* 参数... */
}

hover用法（伪类选择器）

前面可以是其他任意选择器，加上:hover

当鼠标移动该元素范围内，才会调取css样式,鼠标移走后css样式取消作用

/* 文本行高 */
a:hover {
    background:red;
    /* 当鼠标移动到该a标签上，背景色变红 */
}

行级元素 inline

特点：1、内容决定元素所占位置；2、不可以通过css设置宽高；

带有inline的元素具体文字特性

如：span、strong、em、del、a

/* inline */
span {
    display:inline;
    /* 可以通过display参数改变span属性，如改成block就会具有块级元素的属性 */
}

块级元素 block

特点：1、独占一行；2、可以通过css设置宽高；

如：div、p、ul、li、form、address

/* inline */
div {
    display:block;
    /* 可以通过display参数改变div属性，如改成inline就会具有行级元素的属性 */
}

行级块元素 inline-block

特点：1、内容决定大小；2、可以被css改变宽高

带有inline的元素具体文字特性

如：img

/* inline-block */
img {
    display:inline-block;

}

盒子模型

盒子模型针对html每个元素

盒子的组成部分，盒子壁：border；内边距：padding;；内容：weith+height; 外边距：margin。

padding是一个复合值

/* padding参数 */
.wrapper {
    border:10px;
    width:100px;
    height:100px;
    background-color:red;
    padding:100px;
    /* padding参数为100等于四边都是100 等于    padding:100px 100px 100px 100px; 顺序为上、右、下、左*/
    /* padding参数为3个值时，顺序为上、左右、下 */
    /* padding参数为2个值时，顺序为上下、左右 */
    /* padding也可以单独设置一条边，如padding-top、padding-left等 */

}

margin也是一个复合值，主要用法参照padding即可；

定位 position

absolute定位

绝对定位：position:absolute;

脱离原来位置进行定位；

每一个absolute都是新的层，不属于原来的层

absolute相对于最近的有定位的父级进行定位，如果没有相对文档进行定位

tips:<body>天生具有margin:8px;

relative定位

相对定位：position:relative;

保留原来位置进行定位；

relative相对于自己原来出生的位置进行定位

广告定位

所谓广告定位就是让元素固定在页面中，不会随页面滚动而划走；

position:fixed;

居中

如果想让弹窗处于页面水平垂直居中，可以使用absolute定位实现；

/* 定位 */
div {
    position:fixed; /* 开启定位 */
    left:50%； /* 左右在页面50%中，不会随着页面变化比例随之变化 */
    top:50%;   /* 同上  */
    /* 此时有一个问题，居中的点是左上角顶点是页面居中的，我们想让100px的这个盒子居正中 */
    width:100px;
    heigth:100px;  
    margin-left:-50px;
    margin-top:-50px；
/* 我们可以让盒子往上挪一半盒子高，往左挪一半盒子宽，盒子就整体居中了  */
    background-color:red;
    
}

在position定位中，有一个z-index参数，前面有说每个定位元素都一个层，z-index可以设置在哪一层上，默认参数是0

Andrew's Web

Catalog