常见css样式笔记

-------------------text(文本)---------------------------

text-indent(缩进):2em(px) 首行缩进
text-align(对齐):center(居中) 居中对齐
left 左对齐
right 右对齐
text-decoration(装饰): overline 上划线
line-through 中划线
underline 下划线
text-overflow:ellipsis(省略号) 溢出文本显示为省略标记

-------------------font(字体)---------------------------

font-size(大小) 字体大小
font-weight(粗细):normal(正常) 字体粗细
bold(粗体字符)
bolder(更粗的字符)
font-family:“宋体” 字体系列

-------------------border(边框)-------------------------

border-top 边框顶端
border-right 边框右边
border-bottom 边框下边
border-left 边框左边
border-style: none(无边框) 边框样式
solid(实线边框)
dashed(虚线边框)
border-collapse:collapse 边框合并
border-color 边框颜色
border-radius(半径):10px 边框圆角
简写属性(常用)
border:边框的粗细 边框的样式 边框的颜色

----------------display(显示)---------------------------

display:inline(行内的) 排成一行
display:none 隐藏元素

----------------vertical(垂直的)------------------------

vertical-align:middle(中间) 垂直对齐

-----------------------line------------------------------

line-height:“50px” 行高

-----------------list(列表)----------------------------

list-style:none(无) 列表样式

----------------outline(轮廓)--------------------------

outline:none 轮廓

----------------overflow(溢出)-------------------------

overflow:ellipsis(省略)
overflow:hidden(隐藏)

----------------margin(边缘)---------------------------

margin-top 上边距
margin-right 右边距
margin-bottom 下边距
margin-left 左边距

----------------float(浮动)---------------------------

float: top 向上浮动

----------------position(定位)---------------------------

position: absolute(绝对的) 绝对定位

----------------超出区域文字变为省略号--------------------

1、强制文本单行显示:white-space:nowrap;
2、设置溢出文本显示为省略标记:text-overflow:ellipsis;
3、设置溢出隐藏:overflow:hidden;

-----------------------隐藏元素区别----------------------

display:none
隐藏的元素不会占用任何空间,也就是说改元素不但会被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
visibility(能见度):hidden
可以隐藏某个元素,但隐藏的元素仍需占用于未隐藏之前一样的空间。也就是说该元素虽然被隐藏了,但仍然会影响布局。

(本文会不断进行更新和完善,目前自己也在慢慢学习中)

你可能感兴趣的:(CSS)