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-width: 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是完全不透明
