CSS常用样式设置

1. 元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告。

1.1 display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意 思。

特点： 隐藏之后，不再保留位置。

1.2 visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置。

1.3 overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

1.4 显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留 位置	位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显 示下拉菜单， 应用极为广泛
visibility	隐藏对象，保留位 置	使用较少
overflow	只是隐藏超出大小 的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

 

2. list-style 属性

list-style 简写属性在一个声明中设置所有的列表属性。

 可以按顺序设置如下属性：

• ist-style-type
• list-style-position
• list-style-image

例如:把图像设置为列表中的列表项目标记：

ul
{
list-style:square inside url('/i/arrow.gif');
}

 2.1 list-style-type

值	描述
none	无标记
disc	默认，标记是实心圆
circle	标记是空心圆
square	标记是实心方块

 2.2 list-style-position

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据 标记对齐

 2.3 list-style-image

值	描述
URL	图像的路径
none	默认，无图形被显示

 3. CSS用户界面样式

所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚 动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽

3.1 鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor : default 小白 | pointer 小手 | move 移动 | text 文本 | not-allowed

 鼠标放我身上查看效果哦：

<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed"> 禁止</li>
</ul>

 3.3 轮廓 outline

 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

p
{
outline: #00FF00 dotted thick;
}

 但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ： outline: 0; 或者 outline: none;

<input type="text" style="outline: 0;"/>

 3.3 vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center; 

但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。 vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这 么晚来讲解。

vertical-align : baseline |top |middle |bottom

 设置或检索对象(图片、表单)内容的垂直对其方式，样式设定到图片或表单的选择器上。

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

 vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元 素， 通常用来控制图片/表单与文字的对齐。

模式	单词
基线对齐：默认的是文字和图片基线对齐	vertical-align: baseline;
垂直居中：默认的是文字和图片基线对齐	vertical-align: middle;
顶部对齐：默认的是文字和图片基线对齐	vertical-align: top;

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对 齐。

4. 溢出的文字隐藏

4.1 word-break:自动换行

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

主要处理英文单词

4.2 white-space

如何处理元素内的空白

属性名	white-space
属性值	normal | nowrap
默认值	normal
描述	设置如何处理元素内的空白

• normal：默认处理方式。空白会被浏览器忽略
• nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对 象

下面的表格给总结了 white-space 属性的行为：

值	空白符	换行符	自动换行
normal	合并	忽略	允许
nowrap	合并	忽略	不允许

4.3 text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

clip : 　不显示省略标记（...），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（...）

 注意一定要首先强制一行内显示，再次和overflow属性 搭配使用

.hid-kk{
width: 100px;
height: 100px;
display: block;
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
}