CSS基本知识总结2

*此文档仅作为自己复习css时使用 将最基础的写在这 此次资料来源于pinkTc的video

DAY 2

day1 add-> background-position中 如果给定的值为名词值 那么两个互换效果都是一样的,如果给定的值为具体数值 那么第一个为x轴,第二个为y轴,如果省略其一,那么省略的默认为center,当两者混合时(数值+方位名词)也是遵循第一个为x轴 第二个为y轴的原则。

我们可以通过background-attachment(视差滚动具体应用):scroll  fixed --------》是否固定或者是随着页面的其余部分滚动

关于插入背景图片的相关问题

当我们插入的背景图片的大小高于我们当前屏幕的大小的时候,我们可以利用background-position 来移动当前的照片使其居中显示在屏幕上 当然这回使当前的图片不会完全显示 ,如果我们向要完全现实的话我们可以在利用background-size(当然如果强制拉大或缩小原有图片大小会导致失真)

背景半透明(只是盒子背景透明,具体内容不受影响)

background:rgba(r,g,b,a):a为透明度(取值为0~1,透明度从完全透明到完全不透明)

一: css的三大特性(层叠行、继承性、优先级)

 层叠性:主要解决样式冲突的问题

样式存在冲突时(选择器权值相同时)就近原则(浏览器自上而下解析)

继承性:子标签会继承父标签的某些样式(简化代码,会降低css样式的复杂性)

只会继承某些与文字相关的属性 (text、font、line、color等 盒模型相关属性值不会inherited)

行高的继承

当对行高进行简写时       ①font:12px/10px-->文字大小为12px,行高为10px 或者是②font:12px/1.5  1.5指的是当前元素文字大小的1.5倍

优先级:当同一个元素指定多个选择器时,就会有优先级产生

当优先级产生时,如果选择器相同则按层叠行来执行

如果选择器不同则根据选择器的相应权值来执行,权值最高的生效

!important  10000>内联 1000>id 100>class和伪类 10 >标签 1>继承/* 0

注意继承的权重为0 

二:盒模型

137

 

 

 

发布了4 篇原创文章 · 获赞 0 · 访问量 50

猜你喜欢

转载自blog.csdn.net/weixin_41175251/article/details/105318265