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

百年孤独html

2021-08-10 249 阅读3分钟

这是我参与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，当浏览器的尺寸变化时会采用不同的属性。

友情链接：