CSS 有三个非常重要的三个特性:层圣性、继承性、优先级
相同选择器给设置相同的样式，此时一个样式就会覆盖(层曼)另一个冲突的样式。层曼性主要解决样式冲突的问题
层叠性原则:
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号，简单的理解就是;子承父业，
- 恰当地使用继承可以简化代码，降低C55 样式的复杂性
- 子元素可以继承父元素的样式(text-，font-，line-这些元素开头的可以继承，以及color属性)
行高的继承性
讯享网
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高为1.5
- 此时子元系的行高是:当前子元素的文字大小*1.5
选择器权重如下表所示
优先级注意点:
1.权重是有4组数字组成,但是不会有进位。
2.可以理解为类选择器永远大于元素选择器 id选择器永远大于类选择器,以此类推.
3.等级判断从左向右，如果某一位数值相同，则判断下一位数值。
4.可以简单记忆法: 通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器 100,行内样式表为1000,!immportant无穷大.
5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0.
所谓盒了模型:就是把 HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML元素，它包括:边框、外边距、内边距、和实际内容
border可以设置元素的边框，边框有三部分组成:边框宽度(粗细)边框样式 边框颜色
语法:
讯享网
注：
solid 实线边框 dashed 虚线边框 dotted 点线边框
示例：
小说排行榜案例修改
讯享网
padding属性用于设置内边距，即边框与内容之间的距离
margin 属性用于设置外边距，即控制盒子和盒子之间的距离
外边距可以让块级盒子水平居中，但是必须满足两个条件:
盒子必须指定了宽度(width)。
盒子左右的外边距都设置为 auto，
讯享网
常见的写法，以下三种都可以:
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
嵌套块元素垂直外边距的塌陷
相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂声间距不是margin-bottom与margin-top之和。取两个值中的合并之前较大者这种现象被称为相邻块元素垂直外边距的合井。
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
- 可以为父元素定义上内边距。
- 可以为父元素添加 overflow:hidden
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要消除下网页元素的内外边距
注意:行内元素为了照顾兼容性，尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了
因为网页美工大部分效果图都是利用 PS(Photoshop)来做的，所以以后我们大部分切图工作都是在 PS 里面完成.
- 文件→打开:可以打开我们要测量的图片
- Ctr+R:可以打开标尺，或者视图→ 标尺
- 右击标尺，把里面的单位改为像素
- Ctrl+ 加号(+)可以放大视图，Ctr+减号(-)可以缩小视图
- 按住空格键，鼠标可以变成小手，拖动PS视图
- 用选区拖动 可以测量大小
- Ctrl+D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/145841.html