CSS基础知识

 

都是网上收集的资料，非原创。仅供自己学习做笔记用的，只是为了分享自己的笔记，侵权就删

现在的互联网前端三层：

HTML    超文本标记语言    从语义的角度描述页面结构。

CSS        层叠式样式表       从审美的角度负责页面样式。

JS           JavaScript              从交互的角度描述页面行为。

css

浏览器默认样式

一句话，浏览器将载入的html变为dom树，但是此时没有任何显示样式。所以显示的样式，都是css定义的，浏览器只会通过css来渲染视图样式

 

  1 html, address, 
  2 blockquote, 
  3 body, dd, div, 
  4 dl, dt, fieldset, form, 
  5 frame, frameset, 
  6 h1, h2, h3, h4, 
  7 h5, h6, noframes, 
  8 ol, p, ul,center, 
  9 dir, hr, menu, pre{ display: block} 
 10 /* 以上按照block显示，没有规定的则按照默认的inline显示 */
 11 
 12 li { display: list-item} 此元素作为列表显示 和display：block不同的是，前面有.
 13 /* 程序猿常用的display值是：inline/block/inline-block，很少用到 list-item
 14 list-item到底是什么样的显示效果，可以通过例子验证。。。。
 15 第一，你可以不用ul-li，而用其他标签实现list-item的效果
 16 第二，要意识到，浏览器对待html只是把它当作一个dom树，至于显示成什么效果，是通过浏览器默认的css实现的，即样式全部通过css设计，和html无关 */
 17 
 18 head { display: none} 
 19 table { display: table } 
 20 /* display:table 和 block 最大的区别在于：包裹性。 提到包裹性，就不得不提一下float和absolute*/
 21 
 22 tr { display: table-row} 
 23 thead { display: table-header-group} 
 24 tbody { display: table-row-group} 
 25 tfoot { display: table-footer-group} 
 26 col { display: table-column} 
 27 colgroup { display: table-column-group} 
 28 td, th { display: table-cell; } 
 29 /* 与table相关的其他display值，研究的意义不大，但是table-cell值得一说。
 30 table-cell是多列布局的最新解决方案，比使用float更加有效（不兼容IE6、7）
 31 实际上table-cell是要依赖其他table相关的display，但是浏览器会为我们做这些工作，不必手动填写 */
 32 
 33 caption{ display: table-caption} /标签定义表格的标题，须直接放置到 <table> 标签之后。每个表格只能定义一个标题
 34 th { font-weight: bolder; text-align: center} 
 35 /* th标题默认设置了粗体和文字居中 */
 36 
 37 caption{ text-align: center} 
 38 body { margin: 8px; line-height: 1.12} 
 39 /* 不同浏览器的margin不一样，所以要设置【 *{margin:0} 】 
 40 line-height:1.12 针对英文没问题，但是中文看起来很别扭
 41 另外，1.12是一个相对值（即1.12em），与文字有关的距离设置最好用相对值*/
 42 
 43 h1{ font-size: 2em; margin: .67em 0} 
 44 h2{ font-size:1.5em; margin: .75em 0} 
 45 h3{ font-size: 1.17em; margin: .83em 0} 
 46 h4, p, 
 47 blockquote, ul, 
 48 fieldset, form, 
 49 ol, dl, dir, 
 50 menu { margin:1.12em 0} 
 51 /* em是相对单位，1em就是一单位，浏览器默认的一单位是16px，
 52 可以通过 body{font-size:20px} 来修改一单位的值
 53 p的字体大小是1em，h1是2em，h2是1.5em，等等
 54 另外，与文字相关的距离值，最好用相对单位，例如 line-height:1.4; margin:.5em等等，这样做的好处就是当自定义了1em的绝对px时，line-height也会跟着变 */
 55 
 56 /* 注意，如果我们自己写css【 * {margin:0} 】，可以把p、h1、h2等标签的margin覆盖掉
 57 我们都知道，*选择器的权重是最低的，但是它却能覆盖掉标签选择器，说明浏览器已经在这里面做了手脚
 58 浏览器没有让默认样式和用户自定义样式“公平竞争”，而是优先用户自定义样式 */
 59 
 60 h5{ font-size: .83em; margin: 1.5em 0} 
 61 h6{ font-size: .75em; margin: 1.67em 0} 
 62 h1, h2, h3, h4, 
 63 h5, h6, b, 
 64 strong { font-weight: bolder} 
 65 /* 这里可以看到哪些标签文字是加粗的 */
 66 
 67 blockquote { margin-left: 40px; margin-right: 40px} 
 68 i, cite, em, 
 69 var, address { font-style: italic} 
 70 /* 这里可以看到哪些标签是斜体 */
 71 
 72 pre, tt, code, 
 73 kbd, samp { font-family: monospace} 
 74 pre{ white-space: pre} 
 75 button, textarea, 
 76 input, object, 
 77 select { display:inline-block; } 
 78 /* 不知道inline-block是什么样子的？或者不知道inline-block有什么特性？
 79 在这里看看哪些标签是inline-block，就知道inline-block的用处了
 80 具体inline-block的用途，我们会在后面详细介绍，此处只是点出来 */
 81 
 82 big { font-size: 1.17em} 
 83 small, sub, sup { font-size: .83em} 
 84 sub{ vertical-align:sub} 
 85 sup { vertical-align: super} 
 86 table { border-spacing: 2px; } 
 87 thead, tbody, 
 88 tfoot { vertical-align: middle} 
 89 td, th { vertical-align: inherit } 
 90 s, strike, del { text-decoration: line-through} 
 91 hr {border: 1px inset} 
 92 /* 为什么<hr/>默认是那么个难看的样子，特别是IE下，这就是罪魁祸首 */
 93 
 94 ol, ul, dir, 
 95 menu, dd { margin-left: 40px} 
 96 ol {list-style-type: decimal} 
 97 /* ul 和 ol 在默认情况下都会有一篇左边的间距，在这里可以看到为何会有间距，以及间距的具体大小是多少。
 98  */
 99 
100 ol ul, ul ol, 
101 ul ul, ol ol { margin-top: 0;margin-bottom: 0} 
102 u, ins { text-decoration: underline} 
103 br:before {content: "A"} 
104
105 :before, :after { white-space: pre-line } 
106 /* <br/>为何能实现换行？浏览器得到html的br标签，只会解析成一个dom节点而已，
107 而“换行”这一功能是通过这里实现的？？？？？ */
108 
109 center{text-align: center} 
110 abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em} 
111 :link, :visited { text-decoration: underline} 
112 :focus {outline: thindottedinvert} 
113 
114 /* Begin bidirectionality settings (do not change) */
115 BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override} 
116 BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override} 
117 
118 *[DIR="ltr"] { direction: ltr; unicode-bidi: embed} 
119 *[DIR="rtl"] { direction:rtl; unicode-bidi: embed} 
120 /* 这些标签或属性都不常用 */
121 
122 @media print{ 
123 h1{ page-break-before:always} 
124 h1, h2, h3, 
125 h4, h5, h6{ page-break-after: avoid} 
126 ul, ol, dl { page-break-before: avoid}
127 /* 对于打印页面时的设置，不常用 */
128 
129 /* 以下都是按照标签选择器来的，标签选择器比类、id选择器的权重都低。
130 所以，用户自定义的样式，无论是用标签、类还是id，都能覆盖默认的标签选择器 */

*{
margin:0;
padding: 0
} 有时候会导致li 前面序号，或者.消失。那是因为设置了内外边距为0啊，整个有序列表都顶到最左边了，所以序号看不到

 

　　​

　　在body中，定义了两个样式，如上图。

　　第一，在默认情况下，页面中的文字不会直接顶到浏览器的边框，这就是因为默认样式为body设置了margin的缘故。这里需要注意个问题，不同浏览器为body设置的margin值可能不一样，因此大家都知道在css中用 *{margin:0} 来解决这一兼容性问题。

　　之前已经提到过，*选择器的级别要低于body标签选择器，但是*{margin:0}依然有效的原因，就是浏览器偷偷的做了优先级的手脚。如果在正常情况下，*选择器在遇到标签选择器时，是不会起作用的，及时它是“后加载”的。例如：

      ​

css属性样式

cursor鼠标光标

常用光标

crosshair 光标呈现十字线

move 光标指示可移动

text 指示文本

wait 光标沙漏

help 光标指示可用帮助

url 自定义光标url

溢出overflow

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

 

URL 和 URI

Web 上可用的每种资源 - HTML 文档、图像、视频片段、程序等 - 由一个通用资源标志符（Uniform Resource Identifier, 简称 "URI" ）进行定位 。

URL 是Uniform Resource Location的缩写，译为 “统一资源定位符” 。它是 URI 命名机制的一个子集。

URI 表示为 <uri>。注意，定义 URI 使用 “url()” 。

比如，'background-image' 特性的描述：

'background-image' : <uri> | none | inherit

而在设置该特性的时候：

 

background-image:url(...)

 

active

选择活动链接，并设置其样式：

和vue配合

循环的情况：

1、点击时传入index索引（获取当前点击的是哪个）

@click="active(index)"

2、将索引值传入class（索引等于几就第几个添加active类）

:class="{active:index==ins}"

3、在data里边添加ins：0（表示默认第一个添加active类）

data{ ins：0 } 

4、最后在methods里边添加方法

active(num) {
                this.ins=num
                    }

非循环情况下

<div class="fund_box">

<el class="{active:actives == 1}" click="active(1)">投资</el>

<el class="{active:actives == 2}" click="active(2)">捐赠</el>

</div>

methods: {

 active(index){

this.actives = index;

}}

 

 

英文字符换行

在一个设定好宽度的div中，当我们输入的中文文字长度超过了设定宽度时，会自动换到下一行。但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远超出设定的大小。

原因：
    英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行。

吖真老中医处方：
    word-break:break-all；
    word-wrap:break-word；

两者区别：
    1、word-break:break-all 内容到达固定宽度处会自动换行，如果该行末端有个英文单词很长，则把单词截断。对FF（火狐）无效。
    2、word-wrap:break-word 如果该 a行 末端宽度不够显示整个单词，它会自动把整个单词放到下一行 b行 ，而不会在 a行 把单词截断。若 b行 整行都不够一个单词宽，则将单词截断以对齐。对FF（火狐）、IE有效。

优缺点：
    word-break:break-all能很好的让文本对齐，显得整洁，但是100%切断单词，易读性降低
    word-wrap:break-word比较人性化，但行末会参差不齐

 

text-indent 属性

text-indent 属性规定文本块中首行文本的缩进

例子 text-indent： -999em； 可以隐藏文字

 

行高

CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的，line-height是一行行高度

1. line-height: 40px;

​

 

文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：

​

为了严格保证字在行里面居中，我们的工程师有一个约定：行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。如果为奇数，下像素增加1px

 

长度值

长度值适用于水平或垂直方向的尺寸。

长度值表示为 <length>。长度值的格式是： <number> + 单位( e.g., px, em, etc.)，注意，一定要有单位，除非这个值是0。 如果长度值是0，单位可有可无。

 <number>，是由 0～9，小数点以及前面的正负号组成。例如：-1.5，3.1415926，实数包括整数。

可用此类值的 CSS 特性很多，例如，'margin'、'padding'、'height' 和 'width'等。这些可以设置成实数，实数包含整数

有些特性支持负的长度值，比如 ‘margin’。但是如果给一个不支持负长度值的特性设置一个负的值，那么这个声明会被忽略。

 

当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？

按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。

而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。

那为什么 height:100%; 不起作用

当设计一个页面时，你在里面放置了一个div元素，你希望它占满整个窗口高度，最自然的做法，你会给这个div添加height: 100%;的css属性。然而，如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗？

错。

为了理解为什么不会，你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

观看演示

上面的演示例子是父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。你可以根据父元素的背景色来判断子元素的高度不是100%。

那么，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。换句话说，你需要这样做：

<html>
  <body>
    <div style="height: 100%;">
      <p>
        想让这个div高度为 100% 。
      </p>
    </div>
  </body>
</html>

 

现在你给了这个div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度。

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

 

从这个演示中你可以看出，height: 100%;起作用了。

在使用height: 100%;时需要注意的一些事项

1、Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。

2、如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。

 

垂直居中

文本在行里面居中（当你设置行高的时候，由于文字的上部分行距和下部分行距是相等的，文字就正好在中间，这时文字就对齐了。）

公式：

1. 行高:盒子高;

​

需要注意的是，这个小技巧，行高=盒子高。行高大于盒子高，文章会下沉  只适用于单行文本垂直居中！！不适用于多行。

如果想让多行文本垂直居中，需要设置盒子的padding-top：

 

​

 

文本居中 text-align:center是直接加给盒子的，不是用在文本上面的，它的意思是让我内部文本居中

 

水平居中 margin: 0 auto

 

根据 CSS 规范，下面是margin: 0 auto;的工作原理

如果'margin-left'和'margin-right'均为'auto'，则它们的使用值相等。 这会让元素相对于包含块的边缘水平居中。

 

这里我使用margin:0 auto，这基本上将顶部和底部的margin重置为零，并使其左侧和右侧为auto

 

块级元素垂直居中

position定位或者flex布局，然后移动自身一半距离

还有就是设置display：table和table-cell

html:

<div class="parent">
        <p class="son">会议认为，党的十八大以来，我国经济发展取得历史性成就、
                     发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力
                     再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。
        </p>
    </div>

css:



       .parent {
           display: table;
           width: 300px;
           height: 300px;
           text-align: center;
       }
       .son  {
           display: table-cell;
           height: 200px;
           background-color: yellow;
           vertical-align: middle;
       }

 

 

 

这里我们只需要将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中啦

vertival-align

 vertical-align 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。默认为baseline对齐

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

 

选择器

 行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。

class类选择器  p.class名称只对P元素作用 如果省略元素名  用.class名 那么规则会应用到这个类的所有成员，

可以单独设置div的子元素 例 #div1 h3{color：red；}单独设置div1中 h3的颜色，也可以设置多个子元素，#div p h3 在div中的p中的h3子元素

一个元素可以加入多个类 比如 <p class="demo1 demo2 demo3"> 多个类 多个类如果定义属性相同的话 选择最后列出的规则

class和id，类名以一个字母开头，id以一个数字和字母开头。不能有空格。一个元素只能有一个id 可以有多个class 比如<p id="aa" class="bb cc dd">

id选择器尽量留给js使用，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

比如 

*[title]{color:red}   所有包含标签的元素变成红色

a[href] {color:red;}  只对href属性的a元素应用样式

a[href][title] {color:red;}将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：

planet[moons] {color:red;}

根据具体属性值选择

假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。

属性值必须完全匹配，空格之类也要填写

根据部分属性值选择

如果根据部分属性值进行选择，则需要用到波浪号~

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[classs~="important"]{color:red};如果忽略了波浪号则说明需要完成值匹配  ~=适用于有大量数据的时候

子串匹配属性选择器

[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="w3school.com.cn"] {color: red;}

 特定属性选择类型

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

一般来说，[att|="val"] 可以用于任何属性及其值。

假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：

img[src|="figure"] {border: 1px solid gray;}

 

多标签选择

　　多标签选择器一般和html上下文有关，它有以下集中分类

1. 选择一个祖先的所有子孙节点，例如 div p{…}

2. 选择一个父元素的所有直属节点，例如 div > p{…}    IE7开始兼容，IE6不兼容

3. 选择某一个元素紧挨着的兄弟节点，例如 li + li{…}    IE7开始兼容，IE6不兼容

4. 选择某一个元素的所有同胞节点，例如 span ~ a{…}

5. 交集选择器：

   交集选择器由两个选择器构成，一个class选择器，一个标签选择器   交集选择器没有空格  ，交集选择器是并且的意思，既。。。又。。。

   例子  p.text1{

               color:red;

   }    class选择器为text1的p     

   连续交集 

   标签1标签2标签3 这个写法IE7开始兼容

         6.序选择器

          选择第一个li    ul li：first-child  选择最后一个li    ul li：last-child  IE7开始兼容，IE6不兼容

         7.并集选择器（分组选择器）：div2，div2 用逗号表示并集  并集选择器就是选择所有的满足标签1，或者满足标签2的标签，然后对其进行修饰。

 

　　给大家列举一个比较典型的应用，如下图

　　​

　　上图中的效果应该比较常见，在各个菜单之间加下划线。我之前的实现是：每个li都加一个border-bottom，在把最后一个li的border-bottom去掉。

　　其实完全没必要这样麻烦，下面一个样式设置即可解决：

　　​

css的继承性

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。

关于盒子、定位、布局的属性，都不能继承。

 

选择器的优先级

特指度

　　要解决以上问题，我们需要引入一个概念——特指度（specificity）。特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。

　　这个计算叫做“I-C-E”计算公式，

1. I——Id；

2. C——Class；

3. E——Element；

　　即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。特指度数相同时，以后面的为主

　　下面举几个css表达式的特指度计算结果，大家也自己算一算，是不是对：

CSS选择器表达式	特指度计算结果
p	1
p.large	11
P#large	101
div p#large	102
div p#large ul.list	113
div p#large ul.list li	114

　　还有一个重点要注意：!important优先级最高，高于上面一切。font-size:60px !important;  important要写在里面

 

！important提升的是一条属性，而不是一个选择器，无法提升继承的权重，该0还是0，无法提升权重为0的东西）* 选择器最低，低于一切。

​

  

字体

一、字体属性主要包括下面几个

font-family，font-style，font-variant，font-weight，font-size，font


font-family（字体族）: “Arial”，“Times New Roman”，“宋体”，“黑体”等;//多个字体用，隔开

font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;

font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;

font-weight (字体浓淡): 是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;

font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em

 

如果用 font 属性的话，就可以把几个样式进行简化，减少书的情况；font 属性的值应按以下次序书写(样式用空格隔开，样式多属性之间用空格隔开)：

顺序：font-style | font-variant | font-weight | font-size | line-height | font-family

font的简写

font:14px/24px "宋体"

=  1 font-size：14px；

     2 ling-height：24px；

    3 font-family：“”宋体“”；

行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号

例子 font：12px/200%“”宋体“”

.font{
font-style（字体样式）：normal（正常）、italic（斜体）或oblique（倾斜）;
font-variant（字体变化）: normal（正常）或small-caps（小体大写字母）;
font-weight（字体浓淡）:是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;
font-size（字体大小）:可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em
line-height（行高）:1.5em;
font-family（字体族）:“Arial”、“Times New Roman”、“宋体”、“黑体”等;
}

 

顺序：font-style | font-variant | font-weight | font-size | line-height | font-family

 

font的简写注意事项

1、简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。

2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值（默认选项）

为body设置字体大小，再使用em或者百分数设置元素大小。是跟着body对应的。比如h1设置为150% 就是body字体的1.5倍大。body字体如果改动，它也会跟着改动。没有设置font-size值的元素，默认继承body字体大小。

 

 

 这种效果是monospace字体

background知识

background-color

web颜色是由红绿蓝三个分量所占数量来指定的，指定颜色可以用 background-color：rgb（（red green blue开头）80% 80% 80%）指定分别百分比，也可以用0-255来指定 255的80%就是204（204 204 204）

十六进制表示颜色

例子

红色：

1. background-color: #ff0000;

所有用#开头的值，都是16进制的。

16进制中的基本数字（一共16个）:

0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

a b c d e f表示10 11 12 13 14 15

而十六进制换算成颜色 根据位权来算  开头表示多少个16 末尾这位表示多少个1  比如ff 就是15个16,+15个1等于255

ff0000 就是等于rgb（255,0,0）

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;

常用16进制 颜色表示

1. #000   黑
2. #fff    白
3. #f00   红
4. #333   灰
5. #222   深灰
6. #ccc   浅灰

background-img

用于给盒子加上背景图片：

1. background-image:url(images/wuyifan.jpg);

url()表示网址，uniform resouces locator 同意资源定位符，background-img的url（）里面不加引号

images/wuyifan.jpg 就是相对路径。

background-img 会平铺填满整个区域

可以使用background-repeat属性，有三种值：

1. background-repeat:no-repeat;   不重复
2. background-repeat:repeat-x;    横向重复
3. background-repeat:repeat-y;    纵向重复

 

background-position

position就是“位置”的意思。background-position就是背景定位属性。

background-position：向右移动量，向下移动量，可以为负数

1. background-position: 描述左右的词儿  描述上下的词儿;

描述左右的词儿： left、 center、right  左右中

描述上下的词儿： top 、center、bottom  上下中

例子

background-position：right bottom 右下角

 

media属性 可用于多个样式表，根据设备不同使用不同样式表，还会根据媒体类型，分辨率来确定不同样式,媒体属性依赖于设备实际屏幕，而不是浏览器窗口宽度。设备像素1920X1080的意思是 横1920像素，列1080像素。 

background-attachment

可能的值

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

 

background-size

background-size 属性规定背景图像的尺寸。

background-size: length|percentage|cover|contain;

值	描述	测试
length	设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。	测试
percentage	以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。	测试
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。	测试
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。	测试

 

background简写

background属性和border一样，是一个综合属性：

1. background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

1. background-color:red;
2. background-image:url(1.jpg);
3. background-repeat:no-repeat;
4. background-position:100px 100px;
5. background-attachment:fixed;

background简写 没有强制顺序，并且可以省略任意的属性

 

CSS Sprites原理

Css sprites是将多张零散的背景图片整合到一张背景图上，然后通过background-position来调整背景的位置，这个时候你必须确保使用该张精灵图的容器要比背景图片小才是OK的，不然很容易漏出其他的背景图片，所以尤其要控制好盒子的大小；其次，你还需要注意书写背景定位的时候极大多数都是负的，水平为负数，图片才会往左侧平移，所以才会显示出你需要的那部分背景图，垂直方向也是同理。当多个盒子引用一张背景图时，只需要改变背景定位就可以改变页面中的显示部分为哪一部分背景图，这样做的目的就是为了降低浏览器向服务器的请求次数，这样一来可以大大提高网页的加载速度。比如

background: url(../img/1.png) 0px -25px no-repeat;   0px表示的离左顶点的宽度， -25px表示离左顶点的高度

 

文本和容器级

在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd

 

CSS的分类和上面的很像，就p不一样：

所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。

所有的容器级标签都是块级元素。

​

容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素

 对于行内元素来说margin只有margin-left和margin-right有效，padding只有padding-left和padding-right有效，

 

block元素

 

　　​

 

　　为何默认情况下p、h1、ul、div都是block显示，就是这里定义的。所以，不要再说div天生就是block——这句话应该换成：浏览器默认样式天生规定了div是block——所以才导致了div是block！是默认样式规定的，不是浏览器的内核规定的。

 

　　没有设置block的元素，默认为inline显示。

 

inline-block

　　​

 

　　初学者对于inline-block可能比较陌生，没关系，一步一步来。首先，你应该知道inline是什么样子的，就是一般的文字、图片；其次，你应该知道block是什么样子的，一般的div就是；最后，inline-block顾名思义，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什么样子的。

　　那button举例子。我们在页面中输入若干个<button>，发现它们是“流”式排列的（可以对比一下若干个<div>的排列方式）。但是针对一个button，我们还可以自定义修改它的形状，这样就有“块”的特征。

      ​

　　因此，inline-block的特点可以总结为：外部看来是“流”，但是自身确实一个“块”。

　　inline-block能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行……——这就是inline-block——记得这是浏览器默认样式告诉你的。

display

display 属性规定元素应该生成的框的类型。

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。

默认值：	inline
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.display="inline"

display值

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

常用的inline(内联元素）就是文字和图片，其实inline真没什么好说的，大家可以把它想象成一个杯子里的水，它是“流”，是没有大小和形状的，它的宽度取决于父容器的宽度。

　　因此，针对inline的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto，并不是我们设定的值。

把inline元素变成块元素的几种方法

1、设置display              2、把inline元素设置成浮动，float          3、对元素进行position:absolute/fixed

css个人总结重点

样式

overflow :scroll 修剪，显示滚动条，overflow:auto 如果被修剪，则出现滚动条

英文太长换行，word-break：break-all;截断单词  word-wrap:break-word 把单词放去下一行

text-indent属性，规定文字块首行文本缩进  text-indent:-999em 可以隐藏文字

background 

background-img 设置背景图片  background-position设置背景定位 background-size：背景图片尺寸

background缩写 没有强制顺序 

所有文本级标签都是行内元素，所有容器级标签都是块级元素，除了p是文本级，但是是块级元素

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd   

容器级标签里面可以让任何东西，文本级只能放文字，图片，表单元素等

 

行高，居中，字体

行高  文字是在自己行中居中的，行高字号一般都是偶数，单行在盒子中居中，把行高=盒子高，多行垂直居中，需要设置盒子的padding-top,算好多行的行高和，再把盒子高度减去行高和 除2 就是padding-top值

文本居中 text-align:center 是直接加给盒子的，不是用在文本上的，它的意思是让我们内部文本居中

块级元素垂直居中 position 或者flex布局，然后移动自身一半距离。还有就是设置display:table和table-cell

把容器设为display：table 子元素设置display：table-cell 再给子元素一个vertical-align:middle就行了

fonts缩写顺序：font-style | font-variant | font-weight | font-size | line-height | font-family

没有赋值的 按默认值 font-size和ling-height 只能通过斜杠组成一个值，不能分开。

对于行内元素 margin和padding的top bottom属性都没效，设置宽度高度也无效

把行内元素变成块级元素 几种方法 display float position:absolute/fixed

选择器

属性选择器a[href=“www.baidu.com”]{color:red}  

多标签选择器 直属节点 div>p 紧挨的兄弟节点 li+li 同胞节点 span~a  序选择器ul li:first-child  ul li:last-child 

选择器优先级 id:100 class :10 elment:1   !important最高  *最低

 

用JS获取样式表中的规则。

document.styleSheets就是当前页面所有的样式表。
任意一个表里又由若干规则组成，这些规则在document.styleSheets[idx].cssRules里。
cssRules里的每条规则都可以读取出CSS样式文本。比如当前页面的某一条CSSrule的样式文本可以这么获取：document.styleSheets[0].cssRules[0].cssText
输出值为：
"svg:not(:root).svg-inline--fa { overflow: visible; }"

可以搜索一下MDN文档相关部分。
当然如果远程的CSS表可能并不能直接获取。