猫幻  

文本:

color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写 
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

 

 

字体:

font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

 

列表:

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

 

定位:

 

 

bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto
length
%
inherit
2
clip 剪辑一个绝对定位的元素 shape
auto
inherit
2
cursor 显示光标移动到指定的类型 url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto
length
%
inherit
2
overflow
设置当元素的内容溢出其区域时发生的事情。 auto
hidden
scroll
visible
inherit
2
overflow-y
指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content
2
overflow-x
指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content
2
position 指定元素的定位类型 absolute
fixed
relative
static
inherit
2
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto
length
%
inherit
2
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto
length
%
inherit
2
z-index 设置元素的堆叠顺序 number
auto
inherit

浮动:

 

 

clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit

对齐:

文本在元素内居中对齐,可以使用 text-align: center;

图片居中对齐, 可以使用 margin: auto;

我们可以使用 position: absolute; 属性来对齐元素:

绝对定位元素会被从正常流中删除,并且能够交叠元素。

body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }
我们也可以使用 float 属性来对齐元素:
我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:
 

垂直居中 - 使用 line-height

垂直居中 - 使用 position 和 transform

如果要水平和垂直都居中,可以使用 padding 和 text-align: center:
posted on 2021-11-17 17:26  猫幻  阅读(26)  评论(0编辑  收藏  举报