当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 前端学习笔记(2)之CSS的零散知识总结

前端学习笔记(2)之CSS的零散知识总结

2020年07月24日  | 移动技术网IT编程  | 我要评论

link 和 import区别

  • link属于html @import 属于css
  • 加载顺序:link和html同时加载 而 @import 等待html记载完毕之后加载
  • 兼容性:link更好一些。
  • js操作dom样式的时候会有不同。

样式表的权重关系

css三种样式表:内联样式、内部样式表、外部样式表
内联样式权重最高。其次,外部样式表和内部样式表权重相等,
同时出现外部和内部样式表,谁在后边谁的权重更高。

样式表的层叠性

当同一个属性的属性值有冲突时(即有着来自多方的定义时),权重高的会覆盖权重低的。没有样式冲突时,就正常的继续执行下去。
只要产生权重关系,必然产生css的层叠性。
开发者样式>读者样式>浏览器样式。

导入外部样式表的两种方法

第一种:rel=‘stylesheet’ href=‘路径’
第二种:在style标签内写入 @import url(路径);

关于选择器和伪类

:hover能更改子元素的样式,但是不能更改父元素的样式。
层级选择器 .box div{} 和 包含选择器.box>div{}的区别,后者只选择第一层子元素。
相邻兄弟元素选择器 + 它只会匹配紧跟着的兄弟元素.
通用兄弟元素选择器 ~ 它会匹配所有的兄弟元素(不需要紧跟)

用通配符来消除默认外边距,性能消耗大,因为并不是所有的标签都有默认外边距,而是把所有标签都清除一遍,因此做了很多无用功。

关于div内元素居中和color属性继承性

让当前元素在父元素中左右居中 margin:0 auto ;
div中color具有继承性。

网页布局中的命名规划

版心区域命名: 类名 .xxxx-con{}
网页最外围结构: id 驼峰命名法||语义化{}
内容部分: 类名 .xxx_{}

文本大小fontsize

a:为了减少系统之间的字体差异,规定16px为标准字体大小。
b:PC端尽量不低于12px
c:设置文本大小一般用偶数
d:获取文本大小,直接从ps中量即可
e:顶线、中线。基线、底线
f:单位: px 像素 pt 磅 9pt==12px
em 默认1em == 16px
rem 根据html的font-size值确定大小

控制文本类型 font-family

a:设备默认字体:微软雅黑
b:web安全字体(系统或者设备能支持的字体)
c:设备默认的英文字体:Arial
d:如果有多个字体的时候,字体用逗号隔开
e:如果字体名称是中文或多个英文单词,需要放在引号里
f:先写英文字体后写中文字体**

控制文本的行高line-height

a:多行文本line-height:60px;让文本在60px的高度里上下居中
b:从px中获取line-height的高度,从第一行量到第二行的开始
c:让单行文本在容器内上下居中,让容器高度等于line-height高度
d:如果容器没有高度,靠单行文本撑开,为消除上下误差,把line-height设置为文本大小即可。

本文地址:https://blog.csdn.net/qq_42698576/article/details/107512568

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网