前端学习日志 Day 5

本文详细介绍了CSS中的样式继承机制,说明了哪些样式可以被继承,哪些不能。同时,讨论了样式冲突及其解决方式,包括选择器的权重计算和`!important`的使用。此外,还讲解了不同长度单位如像素、百分比、em和rem的用法,以及颜色单位如RGB、RGBA、十六进制和HSL的概念。最后,概述了文档流在网页布局中的作用,区分了块元素和行内元素的特点。
摘要由CSDN通过智能技术生成

样式的继承:我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后后代之间的继承的设计是为了方便我们的开发,
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,
这样只需设置一次即可让所有的元素都具有该样式
注意:并不是所有的样式都会被继承:
比如 背景相关的,布局相关等的这些样式都不会被继承。

样式的冲突:当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的),
选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
如果优先级计算后相同,此时则优先使用靠下的样式
可以在某一个样式的后边添加!important ,则此时该样式会获取到最高的优先级,甚至超过内联样式
注意:在开发中这个玩意一定要慎用!

长度单位:
像素
-屏幕(显示器)实际上是由一个一个的小点点构成的
-不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰所以同样的200px在不同的设备下显示效果不一样
百分比
也可以将属性值设置为相对于其父元素属性的百分比设置百分比可以使子元素跟随父元素的改变而改变

em
em是相对于元素的字体大小来计算的1em = 1font-size
em会根据字体大小的改变而改变

rem
-rem是相对于根元素的字体大小来计算

颜色单位:
在CSS中可以直接使用颜色名来设置各种颜色
比如:red、orange、yellow、blue、green但是在css中直接使用颜色名是非常的不方便
RGB值:
RGB通过三种颜色的不同浓度来调配出不同的颜色 -R red, G green ,B blue
-每一种颜色的范围在0-255(0%-100%)之间 - 语法:RGB(红色,绿色,蓝色)
RGBA:
就是在rgb的基础上增加了一个a表示不透明度
需要四个值,前三个和rgb一样,第四个表示不透明度
1表示完全不透明 0表示完全透明 .5半透明 
十六进制的RGB值:
- 语法:#红色绿色蓝色

-颜色浓度通 00-ff
如果颜色两位两位重复可以进行简写,如 #aabbcc -->#abc

HSL值 HSLA值

H  色相(0-360)

S 饱和度,颜色的浓度  0%-100%

L 亮度,颜色的亮度  0%-100%

文档流(normal flow)
网页是一个多层的结构,一层摞着一层通过css可以分别为每一层来设置样式作为用户来讲只能看到最顶上一层
这些层中,最底下的一层称为文档流,文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列.元素主要有两个状态在文档流中,不在文档流中(脱离文档流)
元素在文档流中有什么特点:

-块元素
- 块元素会在页面中独占一行(自上向下垂直排列)默认宽度是父元素的全部(会把父元素撑满)默认高度是被内容撑开(子元素)
行内元素
行内元素不会独占页面的一行,只占自身的大小
行内元素在页面中左向右水平排列,如果一行之中不能则元素会换到第二行继续自左向右排列(书写习惯行内元素的默认宽度和高度都是被内容撑开

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值