css属性

文字属性

文字对齐

text-align 属性规定了元素中的文本的水平对齐方式。

left --> 左边对齐,默认
right --> 右边对齐
center --> 居中对齐
justify --> 两边对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

none --> 默认,定义标准的文本
underline --> 定义文本下的一条线
overline --> 定义文本上的一条线
line-through --> 定义穿过文本下的一条线
inherit --> 继承父元素的text-decoration属性的值

常用的为去掉a标签默认的下划线

a {
    text-decoration: none;
}

首行缩进

将段落的第一行缩进32像素

p {
    text-indent: 32px;
}

去掉li标签的样式

list-style: none;

文字之间的距离

将文字的间距调整为5像素

p {
    letter-spacing: 5px;
}

背景属性

背影颜色

background-color: red;

背景图片

background-image: url("图片地址");

背景重复

background-repeat: repeat;

repeat --> 默认,背景图片平铺满整个网页
repeat-x --> 背景图片只在水平方向上平铺
repeat-y --> 背景图片只在垂直方向上平铺
no-repeat --> 背景图片不平铺

背景位置

background-position: left top;

边框

边框属性

• border-width
• border-style
• border-color

div {
    border- 2px;
    border-style: solid;
    border-color: red;
}

简写
div {
    border: 2px solid red;
}

边框样式

none --> 无边框
dotted --> 点状虚线边框
dashed --> 矩形虚线边框
solid --> 实线边框

border-radius

用border-radius这个属性可以实现圆角边框的效果。

将border-radius设置为长或高的一半或者50%就可以得到一个圆形。

display属性

用于控制HTML元素的显示效果。

display:none --> 隐藏某个元素,且隐藏的元素不会占用任何空间
display:block --> 转成块级元素
display:inline --> 转成行内元素
display:inline-block --> 转成行内块元素

CSS盒子模型

• margin：用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
• padding：用于控制内容与边框之间的距离
• border(边框)：围绕在内边距和内容外的边框
• content(内容)：盒子的内容，显示文本和图像

margin外边距和padding内填充

margin和padding的常用简写方式

• 提供一个参数，用于四边
• 提供两个参数，第一个用于上下，第二个用于左右
• 提供三个参数，第一个用于上，第二个用于左右，第三个用于下
• 提供四个参数，按照上-右-下-左的顺序作用于四边；

float浮动

在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是什么元素。

浮动的三种取值

left --> 向左浮动
right --> 向右浮动
none --> 默认值，不浮动

clear清除

clear属性规定元素的哪一侧不允许其他浮动元素。

left --> 在左侧不允许浮动元素
right --> 在右侧不允许浮动元素
both --> 在左右两侧都不允许浮动元素
none --> 默认值,允许浮动元素出现在两侧
inherit --> 规定应该从父元素继承clear属性的值

注意：clear属性只会对自身起作用，不会影响其他元素。

清除浮动

清除浮动的副作用：父标签塌陷问题

主要有三种方式：

• 固定高度
• 伪元素清除法
• overflow:hidden

伪元素清除法

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

overflow溢出属性

visible --> 默认值，内容不会被修剪，会呈现在元素框之外
hidden --> 内容会被修剪，并且其余内容是不可见的
scroll --> 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto --> 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit --> 规定应该从父元素继承overflow属性的值

定位(position)

static --> 默认值,无定位
relative --> 相对定位
absolute --> 绝对定位
fixed --> 固定

是否脱离文档流

脱离文档流

绝对定位

固定定位

不脱离文档流

相对定位

z-index

设置对象的层叠顺序。

opacity

用来定义透明效果。

取值范围是0~1，0是完全透明，1是完全不透明