丸子小姐学前端__第二周(下)

一、CSS三大特性

1. css层叠性： 指多种CSS样式的叠加
2. css继承性： 指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。
   想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是： 子承父业。
3. css优先级： 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

二、CSS权重

• 使用!important声明权重最大
• 继承样式的权重为0
• 行内样式优先
• 权重相同时，CSS遵循就近原则

三、盒子模型

CSS三大模块： 盒子模型 、浮动 、定位

盒子模型：就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
盒子边框(border)

语法：border : border-width || border-style || border-color
常用属性值：none：没有边框即忽略所有边框的宽度（默认值）、solid线(单实线)、dashed(虚线)、
dotted(点线)、double(双实线)

四、实现居中

外边距实现盒子居中，需要满足两个条件

• 必须是块级元素
• 盒子必须制定了宽度

五、盒子阴影

语法： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

六、浮动

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

• 浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程
• 语法：选择器{float:属性值;} 属性值可以是left，right，both，none。
• 目的：为了让多个块级元素在同一行上显示

七、定位

position 属性值分为四种：

• static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。
• relative：相对定位，相对定位是将元素相对于它在标准流中的位置进行定位
• absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
• fixed：固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器；完全脱标，不占有位置，不随着滚动条滚动。

叠放次序 z-index的特点：

• z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
• 如果取值相同，则根据书写顺序，后来居上。
• 后面数字一定不能加单位。
• 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性