# CSS ## 相关概念 ### 盒子模型 1. 盒子模型中主要的属性有： - 内容(content) - 内边距(padding) - 边框(border) - 外边距(margin) - 宽度(width) - 高度(height)  2. 设置元素的盒子模型显示方式 可以通过 box-sizing(CSS3) 属性设置元素显示的盒子模型，可以选择的值有 content-box(default)、border-box、inherit。 - content-box, 设置的宽高应用于元素的内容 - border-box, 设置的宽高决定元素的边框和 - inherit, 继承父元素 ## 页面引入样式 ### link && @import 1. link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; 2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 3. import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; ### CSS选择器 - 通配符选择器（*） - 类选择器 - ID选择器 - 属性选择器（*[name]） - 后代选择器(.classname .otherclassname) - 子元素选择器（h1>strong) - 相邻兄弟选择器(.classname + .classname) - 伪类（button:active, p:first-child, q:lang(no),focus,hover,link,vistied,) - 伪元素（first-line, first-letter, :before, :after,) > 1.后代选择器和子元素选择器的区别是，后代选择器的两个元素的层次间隔可以是任意的，而子元素选择器只能选择前边元素的子元素。 > 2.相邻兄弟选择器，选择的是后边的元素。 ## CSS属性 ### Position - static: 默认值，没有定位，元素出现在正常流中，（忽略top、bottom、left、right、z-index） - relative: 生成相对定位的元素，可以通过top、bottom、left、right相对于正常位置进行定位，可以通过z-index分层。正常流中仍然有relative的位置，只是进行了偏移。定位总是相对于最近的父元素，无论其是何种定位方式。 - absolute: 生成绝对定位的元素，相对于static定位外的第一个元素进行定位，元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。正常流中不再有absolute的位置，相当于元素悬浮。离其最近的absolute或者relative层，没有的话就以body定位。margin也符号上述规则。 - fixed： 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。 ### border style |dotted |solid |double |dashed| |-------|------|-------|------| |点状 |实线 |双线 |虚线 | ### background-attachment 滚动视觉差。可以实现页面背景图固定的效果。 |可能的属性值 |效果 | |-------------|----------| |local |类似scroll | |scroll |背景随内容滚动而滚动| |fixed |背景固定于可视区域，不随内容的滚动而滚动| > 需要注意的是，此属性以 background-image 属性为前提。 1. local 背景图相对于元素内容固定。 2. scroll 默认值，背景图相对于元素固定，背景随页面滚动而滚动，可以理解为此时，元素内容于背景是绑定的。 3. fixed 背景图固定于可视区域，当前元素只要在可视区域内，则背景都是此元素的背景，不会随元素内容的滚动而滚动，知道遇到下一个元素的背景。 > 此时背景图的 z-index 相对较低，如果可视区域内同时存在了其他元素，其他元素的背景会遮盖住此元素的背景图。 ### visibility 用于设置 HTML 元素的可见性。 |可选值 |作用 | |-------|----------------------| |visible|默认值。元素是可见的| |hidden |元素是不可见的| |collapse|当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"| |inherit|规定应该从父元素继承 visibility 属性的值| > 注意与 display 区别，visibility 只是使元素不可见，该元素仍会占用空间。 ## CSS三大机制 ### 1、特殊性 `特殊性`：一个元素可以被多少个规则设置，但是最终只有一个规则会起作用，那么该规则的特殊性最高，特殊性即CSS优先级。 ### 2、继承 `CSS继承`：是从一个元素向其后代元素传递属性值所采用的机制。 - 继承是从父元素到子元素 - 所有关于文字图片大小样式的属性可以继承( 例如：letter-spacing、word-spacing、white-space、line-height、color、font ##### 无继承性的属性 1. display：规定元素应该生成的框的类型 2. 文本属性： |属性 |含义 | |---------------|----------------------| |vertical-align |垂直文本对齐 | |text-decoration|规定添加到文本的装饰 | |text-shadow |文本阴影效果 | |white-space |空白符的处理 | |unicode-bidi |设置文本的方向 | 3. 盒子模型的属性：width、height、margin及margin相关、border及boder相关、padding及padding相关 4. 背景属性：background（background-color、background-image、background-repeat、background-position、background-attachment） 5. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index 6. 生成内容属性：content、counter-reset、counter-increment 7. 轮廓样式属性：outline-style、outline-width、outline-color、outline 8. 页面样式属性：size、page-break-before、page-break-after 9. 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during #### 有继承性的属性 1. 字体系列属性：font及font相关、 2. 文本系列属性：text-indent：文本缩进、text-align、line-height、word-spacing：即字间隔、letter-spacing：字符间距、text-transform：控制文本大小写、direction：规定文本的书写方向、color 3. 元素可见性：visibility 4. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout 5. 列表布局属性：list-style-type、list-style-image、list-style-position、list-style 6. 生成内容属性：quotes 7. 光标属性：cursor 8. 页面样式属性：page、page-break-inside、windows、orphans 9. 声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation #### 所有元素可以继承的属性 1. 元素可见性：visibility 2. 光标属性：cursor #### 内联元素可以继承的属性 1. 字体系列属性 2. 除text-indent、text-align之外的文本系列属性 #### 块级元素可以继承的属性 1. text-indent、text-align ### 3、层叠 `层叠`：确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。 - 规则的权重（!important），加了权重的优先级最高 - 当权重相同的时候，会比较规则的特殊性，根据前面的优先级计算规则决定哪条规则起作用 - 当特殊性值也一样的时候，css规则会按顺序排序，后声明的规则优先级高， > 后声明的规则优先级高 ## 三、css优先级 ### 1、相关概念 `声明`：CSS选择器后边大括号里的样式叫做声明。 `声明块`： CSS选择器整个大括号叫做声明块。 ### 2、优先级的计算 选择器的特殊值用4位标识，0，0，0，0 ，不同选择器对特殊值的影响如下： |选择器 |影响 | |--------------------------|-----------| |通配选择器*对特殊性没有贡献 |即0,0,0,0 | |元素和伪元素 |加0,0,0,1 | |类选择器、属性选择器或伪类 |加0,0,1,0 | |ID选择器的特殊性值 |加0,1,0,0 | |!important（权重） |它没有特殊性值，但它的优先级是最高的，可以认为1,0,0,0,0| |继承的属性 |没有特殊值,0,0,0,0 | ## 四、CSS实例 ### 1. 纯CSS实现三角形 ```css .triangle{ width:0; height:0; border-width:20px; border-style:solid dashed dashed dashed; border-color:#e66161 transparent transparent transparent; } ``` > 利用了 CSS 中的 border 属性。 ### 2. 对话框下边的三角形 利用旋转操作将正方形旋转。 ### 3. 不定高元素垂直居中 - 使用：vertical-align:(对内部的文字起作用，内部不能是 div ) - 外层 div，display: table-cell => 对 div 中的文字设置垂直居中，。 - 外层 div，display: inline => 可以通过设置 line-height 改变 div 的高度。 - 外层 div, display: inline-block => 设置 line-height 和 height 相同的时候，vertical-align 作用才会显现出。 - 外层 div设置为 relative，内层div 设置为 left:50%, top:50%, absolute，transform：translate(-50%, -50%), 或者使用 transform: translate3d(-50%, -50%, 0) 一样道理。 - 外层 div，display: -webkit-box; -webkit-box-algin: center; -webkit-bok-pack: center;（外层 div 的内容可以是文字，也可以是div） > -webkit-box-glign 只有 chrome,oprate 支持)