【前端基础篇】CSS

CSS样式

1、CSS语法格式
2、样式style 的三种创建方式：内部、外部、内联
外部样式两种情况：
link和@input区别：

差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的
CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom(document o bject model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

3、选择器
元素选择符、class选择符、id选择符、通配符、群组选择符器、包含选择器、伪类选择器(根据状态来选择)
4、选择器的权重
!important 可以使某个样式有最高的优先级
优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。
原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式后加载会覆盖先加载的同名样式

5、命名规则：

CSS样式属性

0、字体属性
字体大小：{font-size:value} 或者使用关键字
字体字体：{font-family:字体1,字体2,...}
文本加粗：{font-weight:bolder/bold/normal/100-900;}
文字倾斜：{font-style:italic/oblique/normal;}
font属性简写：顺序为：font-style font-weight font-size/line-height font-family font-size/line-height只能是一个值，不能分开写
1、文本属性
文本颜色：{color: 三种 ;}
文字行高：{line-height:normal/value;}
水平对齐：{text-align:left/right/center/justify;}
垂直对齐：{vertical-align:top/middle/buttom} 看用于图片和文字的对齐
文本修饰：{text-decoration:none/underline/overline/line-through;}
首行缩进：{text-indent:value只对第一行起作用，可是负值;}
字间距：{letter-spacing:value;}
text-transform控制文本的大小写:capitalize每个单词大写字母开头；uppercase 仅有大写字母；lowercase 仅有小写字母；none 默认
font-variant: normal 默认值 标准字体；small-caps 显示小型大写字母的字体
…

2、列表属性
定义列表符号样式：list-style-type:disc/circle/square/none(去掉小黑点)
使用图片作为列表符号：list-style-image:url
定义列表符号的位置：list-style-position:outside/inside
列表属性简写：list-style:type image position

3、背景属性
背景颜色：background-color: 颜色值;
背景图片：background-image:url;网上有两种图片形式：插入图片（属于网页内容）、背景图（属于网页表现，图片上面可以有其他的）；
背景图片平铺属性：background-repeat:no-repeat/repeat/repeat-x/repeat-y
背景图片的定位 background-position:left/center/right/数值 top/center/bottom/数值;
设置或检索背景图像是随对象内容滚动还是固定的：background-attachment:scroll/fixed;
background简写：background:url no-repeat center top #f00;
CSS雪碧图，即CSS Sprites,也称为CSS精灵,一种CSS图像合并技术

background-position的应用
CSS雪碧图，即CSS Sprites,也称为CSS精灵,一种CSS图像合并技术
含 义：将网页中许多非常小的图标/图片整合到一张大图中，当访问页面时只需要下载一次，可以减少访问服务器的次数，提高性能
原理：使用background-position移动背景图 只有负值和零，进行背景定位，使用坐标精确地定位出背景图片的位置

6、盒模型
是css布局的基石，包含边框、边界、补白、内容。即，width、height、border、padding、margin

7、边框属性
四个方向，三种样式(color\width\style)。
边框属性简写：border:边框宽度 边框风格 边框颜色；solid/dashed/dotted/double

8、盒模型的相关属性margin、padding
padding，在设定页面中一个元素内容到元素的边缘之间的距离，也称补白。
注意：padding是额外加在元素原有大小之上的，如想保证元素大小不变，需要从元素宽高上减掉添加的padding属性值。
属性值的4种方式：上 右 下 左、上 左右 下、上下 左右、4个方向
margin，在元素外边的空白区域，也称边距。属性值同上。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，分两种情况：上下合并，包含合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
盒子实际大小：
宽=左右margin+左右border+左右padding+width
高=上下margin+上下border+上下padding+width

注意：如果想保持宽度不变，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

盒子默认属性值，根据标签不同而不同，需要自己设置

页面布局的思路分析：先横向分割，再竖向分割

12、元素类型分类依据和元素类型分类
即标签的类型：大标签(独占一行，做父元素)、小标签(不换行，同为一行，挨着排序)、特殊标签(即，行内块）等。
根据css显示分类，XHTML元素被分为三种类型：块状元素(大标签)、内联元素(小标签)、可变元素(行内块)

13、元素类型转化display(是否显示，是否独占一行)
none、inline、block、inline-block
注意：
行级元素是无法设置宽度和高度的，可以为行级元素设置 display:inline-block ,然后就可以设置宽和高了

14、CSS继承
文本类型css、列表类型css、其他不行
不能继承的属性：

display：规定元素应该生成的框的类型 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果
white-space：空白符的处理 盒子模型的属性：width、height、margin 、border、padding
背景属性：background
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

9、浮动float属性
语法：float:none/left/right
浮动的排序规则：
清除浮动的关键字是clear：clear:none/left/right/both

注意：元素加了float，就可以不用写 display了，因为：**浮动本身给元素做了一个转化。**所以加float可以使其他不生效的，例如 使加了宽高生效。

10、定位position属性
四种定位方式：static、relative、absolute、fixed
设置定位后，需要设置定位偏移量：四个方向

绝对定位，需要先设置父标签为非static定位，然后元素本身设置为absolute，再设置偏移量。（如果父元素不是非static定位，则会相对于浏览器窗口进行定位）

注意：绝对定位，自己原来的位置不在占有了，该元素后面的元素会向前移动，占有。而相对定位，自己原来的位置还保持占有，后面的元素不会向前移动。

z-index，设置定位后，元素会浮动再页面上方，盒子堆叠的优先级。（数值越大优先级越高）

9、溢出属性
overflow:visible/hidden/scroll/auto/inherit; 有overflow-x overflow-y

9、空余空间
white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit

10、省略号显示
text-overflow:clip/ellipsis

1. 实现单行文本溢出时 产生省略号效果:

需要有容器宽度 weight:;
强制文本在一行内显示 white-space:nowrap;
溢出内容为隐藏 overflow:hidden;
溢出文本显示省略号 text-overflow:ellipsis

2. 实现多行文本溢出时产生省略号

webkit-line-clamp 用来限制在一个块元素显示文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：
display：-webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

使用Live Reload扩展程序
可以实现当保存页面文件时实时刷新浏览器

总结：
11、CSS可以被继承的属性有哪些？