CSS样式

SwordFly 发布于2019-04-23 11:48 / 2628人阅读

摘要：独孤九剑常用样式首行缩进一个文字大小文字修饰删除线上划线下划线词间距字母间距的区别使用浏览器默认的换行规则。其行为方式类似中的标签。只对英文起作用，以单词作为换行依据。不换行，超出部分隐藏且以省略号形成出现。

葵花宝典：

【1】相邻的2个margin值会叠加在一起。

【2】子元素设定的margin值会影响父元素。

在标准浏览器下（FireFox，Chrome，Opera，Safari）会有问题。IE下一般表现良好。

　　原因是：一个盒子如果没有上补白（padding-top）和上边框（border-top）那么这个盒子的上边距会和其内部文档流中的第一个元素的上边距重叠。以上参考http://blog.csdn.net/u012011360/article/details/41823125

因此用margin时需要注意，可以利用padding来避免。

独孤九剑：

1、CSS常用样式

#box1 {
            width: 350px;
            height: 350px;
            background: #fff;
            border: 1px solid #000;
            font-size: 14px;
            color: red;
            font-weight: bold;
            font-family: "Microsoft YaHei";
            font-style: italic;
            /* 首行缩进：1em = 一个文字大小 */
            text-indent: 1em;
            text-align: left;
            /* 文字修饰 through-line(删除线)、overline(上划线)、underline(下划线)、none */
            text-decoration: underline;
            /* 词间距 */
            word-spacing: 6px;
            /* 字母间距 */
            letter-spacing: 5px;
        }

2、word-wrap,word-break,white-space的区别

2.1 word-break normal: 使用浏览器默认的换行规则。 break-all: 允许单词内换行。 keep-all: 只能在半角空格或连字符处换行。 2.2 word-wrap normal: 只在允许的断字点换行（浏览器保持默认处理）。 break-word: 在长单词或URL地址内部进行换行。 2.3 white-space normal: 默认。空白会被浏览器忽略。 pre: 空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。 nowrap: 文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止。 pre-wrap: 保留空白符序列，但是正常地进行换行。 pre-line: 合并空白符序列，但是保留换行符。 inherit: 继承父元素属性值。 2.4 常用情况 1. word-break: break-all; 只对英文起作用，以字母作为换行依据。 2. word-wrap: break-word; 只对英文起作用，以单词作为换行依据。 3. white-space: nowrap; 强制不换行，都起作用。 4. white-space: pre-wrap; 只对中文起作用，强制换行。 5. white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 不换行，超出部分隐藏且以省略号形成出现。

私有云混合云 css样式页面css样式 css的样式 css样式代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1197.html

web前端（7）—— 了解CSS样式，引入css样式的方式

摘要：那么这些样式每一个代表什么作用呢接下来我们才正式进入的讲解为什么要学习样式使用样式可以帮助我们调整美观标签，以及如何对进行布局什么是样式是指层叠样式表，样式定义如何显示元素，样式通常又会存在于样式表中。CSS在前面大概的介绍了css，从本片博文开始，会详细的介绍它，在最开始介绍web前端时，打开百度首页，当时我提出了一个问题，为什么百度首页的输入框可以放在正中间，就是由于有css的控制，我们...

番茄西红柿 2019-04-23 13:11 评论0 收藏0
CSS Modules详解及React中实践

摘要：上例中打印的结果是对中的名都做了处理，使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器，所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

wemall 2019-08-30 15:45 评论0 收藏0
前端修炼の道 | 带你走进迷人的 CSS 世界

摘要：每条属性声明实现对网页元素进行某种特定格式的设置，由一个属性和一个值组成，属性和值之间使用冒号连接，不同声明之间用分号分隔，所有属性声明放到一对大括号中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...

shiweifu 2019-08-23 13:58 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

mj 2019-08-28 18:13 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

levius 2019-08-02 18:17 评论0 收藏0
关于CSS Reset 那些事（四）之构架CSS基础样式库

摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。前言先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史与 Normalize.css 介绍 Normalize.css...

Yu_Huang 2019-08-01 14:48 评论0 收藏0