CSS基础知识.docx

CSS 基础知识总结 一、CSS 盒子模型 CSS 盒子模型是指浏览器对 HTML 元素进行渲染和布局的方式。主要有两种盒子模型，即 W3C 盒子模型和 IE 盒子模型。 1. W3C 盒子模型（标准盒子模型）：盒子实际内容（content）的 width/height=我们设置的 width/height；盒子总宽度/高度 = width/height+padding+border+margin。 2. IE 盒子模型（怪异盒模型）：浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和，content+padding+border=我们设置的 width/height；盒子总宽度/高度 = 我们设置的 width/height + margin=(content+border+padding) + margin box-sizing 属性用于控制元素的盒子模型的解析模式，默认为 content-box。 * box-sizing: content-box; W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽 * box-sizing: border-box; IE 传统盒子模型，设置元素的 height/width 属性指的是 border + padding + content 部分的高/宽 * box-sizing: inherit; 规定应从父元素继承 box-sizing 属性的值 二、CSS 选择器 CSS 选择器用于选择 HTML 元素以应用样式。常见的选择器包括： 1. id 选择器（#myid） 2. 类选择器（.myclassname） 3. 标签选择器（div, h1, p） 4. 相邻选择器（h1 + p） 5. 子选择器（ul > li） 6. 后代选择器（li a） 7. 通配符选择器（*） 8. 属性选择器（a[rel = "external"]) 9. 伪类选择器（a:hover, li:nth-child） 继承问题： * 可继承的样式：font-size, font-family, color, ul, li, dl, dd, dt * 不可继承的样式：border, padding, margin, width, height 三、CSS 优先级算法 CSS 优先级算法用于确定样式的优先级。优先级规则如下： 1. !important 声明的样式优先级最高 2. 如果优先级相同，则选择最后出现的样式 3. 继承得到的样式的优先级最低 四、CSS3 新增伪类 CSS3 中新增了许多伪类选择器，例如： * p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素 * p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素 * p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素 * p:only-child 选择属于其父元素的唯一子元素的每个<p>元素 * p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素 * :enabled 控制表单控件的禁用状态 * :checked 单选框或复选框被选中 五、display 属性 display 属性用于设置元素的显示方式。常见的 display 属性值包括： * None 元素不会显示，而且改元素现实的空间也不会保留 * block 块元素类型，默认宽度为父元素宽度，可设置宽高，换行显示 * inline 行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示 * inline-block 行内块元素，默认宽度为内容宽度，可以设置宽高，同行显示 * list-item 象块类型元素一样显示，并添加样式列表标记 * table 此元素会作为块级表格来显示 * inherit 规定应该从父元素继承 display 属性的值 六、position 属性 position 属性用于设置元素的定位方式。常见的 position 属性值包括： * static（默认）：按照正常文档流进行排列 * relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位 * absolute（绝对定位）：参考距其最近一个不为 static 的父级元素通过 top, bottom, left, right 定位 * fixed（固定定位）：所固定的参照对像是可视窗口 七、CSS3 新特性 CSS3 中新增了许多新特性，例如： * 旋转、缩放、定位、倾斜：transform：rotate(90deg) scale(0.85,0.90) translate(0px, 100px)