一、CSS三大特性
- css层叠性： 指多种CSS样式的叠加
-
css继承性： 指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是： 子承父业。 - 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，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性
网友评论