【前端--CSS】知识点（七）—— 给男朋友总结的CSS知识点（一）

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

最近在写css样式时候，很多属性和知识点有些想不起来，刚好男朋友最近在学习前端的css，就抽空顺手整理一下css常见的知识点。

css的盒子模型

• 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
• IE盒子模型：宽度=内容宽度（content + border + padding）+ margin

box-sizing属性

• context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
• border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

css选择器以及优先级

• id选择器(#myid)
• 类选择器(.myclassname)
• 标签选择器(div, h1, p)
• 相邻选择器(h1 + p)
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（*）
• 属性选择器（a[rel="eee"]）
• 伪类选择器（a:hover, li:nth-child）

优先级（就近原则）：!important > id > class > tag

css可继承的属性

• font-size
• font-family
• color

不可继承的样式：border, padding, margin, width, height

CSS3新增伪类

• p:first-of-type 选择属于其父元素的首个元素
• p:last-of-type 选择属于其父元素的最后元素 - p:only-of-type 选择属于其父元素唯一的元素 -p:only-child选择属于其父元素的唯一子元素
• p:nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态。
• :checked 单选框或复选框被选中。

display的值以及作用

• inline（默认）–内联
• none–隐藏
• block–块显示
• table–表格显示
• list-item–项目列表

position的值以及作用

• static（默认）：按照正常文档流进行排列；
• relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
• absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
• fixed(固定定位)：所固定的参照对像是可视窗口。

z-index的含义

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：z-index 仅能在定位元素上奏效！

• auto——默认。堆叠顺序与父元素相等。
• number——设置元素的堆叠顺序。
• inherit——规定应该从父元素继承z-index属性的值。

CSS3有哪些新特性

• RGBA和透明度
• background-image
• background-origin(content-box/padding-box/border-box)
• background-size
• background-repeat
• word-wrap（对长的不可分割单词换行 word-wrap：break-word;
• 文字阴影：text-shadow：5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
• font-face属性：定义自己的字体
• 圆角（边框半径）：border-radius 属性用于创建圆角
• 边框图片：border-image: url(border.png) 30 30 round;
• 盒阴影：box-shadow: 10px 10px 5px #000;
• 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性。