overflow 属性规定如何处理不符合元素框的内容。语法见下
overflow:hidden;
- Object.style.overflow=visible|hidden|scroll|auto
可能的值
值 | 描述 |
---|---|
visible | 内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,但是浏览器不会显示供查看内容的滚动条。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 由浏览器决定如何显示。如果需要,则显示滚动条。 |
裁剪元素中内容的左 / 右边缘 - 如果溢出元素的内容区域的话。语法见下
overflow-x:hidden;
- JavaScript 语法: object.style.overflowX="scroll"
- overflow-x: visible|hidden|scroll|auto|no-display|no-content;
值 | 描述 |
---|---|
visible | 不裁剪内容,可能会显示在内容框之外。 |
hidden | 裁剪内容 - 不提供滚动机制。 |
scroll | 裁剪内容 - 提供滚动机制。 |
auto | 如果溢出框,则应该提供滚动机制。 |
no-display | 如果内容不适合内容框,则删除整个框。 |
no-content | 如果内容不适合内容框,则隐藏整个内容。 |
《CSS3 初始化属性,webKit 的 CSS 扩展 (WebKit 是私有属性) 》
- -webkit-touch-callout | -webkit-line-clamp | -webkit-tap-highlight-color | -webkit-appearance
letter-spacing:-3px; letter-spacing 属性增加或减少字符间的空白(字符间距)
text-indent:50px; text-indent 属性规定文本块中首行文本的缩进。
可能的值
值 | 描述 |
---|---|
length | 定义固定的缩进。默认值:0。 |
% | 定义基于父元素宽度的百分比的缩进。 |
inherit | 规定应该从父元素继承 text-indent 属性的值。 |
text-align 属性规定元素中的文本的水平对齐方式。
text-align:center;
- JavaScript语法: object.style.textAlign="right"
可能的值
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
可能的值
vertical-align 属性设置元素的垂直对齐方式。
《display:inline、block、inline-block 的区别》 vertical-align:text-top;
尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。 display:inline-block;
background:transparent; 默认。背景颜色为透明
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
length | |
% | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
box-sizing:border-box;
- div {
- box - sizing: border - box; - moz - box - sizing: border - box;
- /* Firefox */
- - webkit - box - sizing: border - box;
- /* Safari */
- width: 50 % ;
- float: left;
- }
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 ?? 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
- 语法 box-sizing: content-box|border-box|inherit;
值 | 描述 |
---|---|
content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
inherit | 规定应从父元素继承 box-sizing 属性的值。 |
中文是雅黑,英文是就 Arial,如果用户电脑里没有雅黑,自适应默认的就是宋体。
font-family: microsoft yahei, arial, helvetica, sans-serif;
来源: http://www.2cto.com/kf/201705/640058.html