CSS的学习
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。
- 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
- 样式不冲突,不会层叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
color: skyblue;
font-size: 12px;
}
div {
color: hotpink;
}
</style>
</head>
<body>
<div> 王可可 是一条狗 </div>
1. 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
2. 样式不冲突,不会层叠
</body>
</html>
CSS继承性
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是: 子承父业。
注意:
恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
color: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>王思聪</p>
</div>
</body>
</html>
CSS优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:
继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* 0, 0 , 0 , 0 特殊性公式 */
div { /* 标签选择器 0,0,0,1*/
color: pink;
}
:first-child { /* 伪类选择器 0,0,1,0 */
color: green;
}
.king { /* 类选择器 0,0,1,0 */
color: blue;
}
#wang { /* id选择器 0,1,0,0 */
color: red;
}
/* 最大的 不是选择器 */
div {
color: orange!important; /* important就是重要的 级别最高 一旦出现优先执行*/
}
</style>
</head>
<body>
<div class="king" id="wang" style="color: skyblue"> 王者农药 </div>
</body>
</html>
盒子模型布局稳定性
什么时候用内边距,什么时候外边距
我的回答是,这两者可以混用,
width > padding > margin
1.margin外边距合并问题,ie6 margin加倍的bug,所以最后使用
2.padding会影响内盒的大小,经常使用加减法
3.width 宽度剩余法,高度剩余法
CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
1.content-box :盒子模型 width + padding + boder
2.border-box:/盒子模型即为宽度 padding 和boder 都包含再width/
1.默认设置,优先保证内部的内容所占区域不变
2.boder-box 优先保证自己盒子的所占区域不变,对内容进行压缩
盒子阴影
语法格式:
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
1.前两个属性一定要有,其他的可以省略
2.外阴影(outset默认值,内阴影inset
什么是浮动?
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
在CSS中,通过float属性来定义浮动,其基本语法格式如下:
选择器{float:属性值;}
属性值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动(默认值) |
清除浮动的方法
- 额外标签法
- 父级添加overflow属性方法
- 使用after伪元素清除浮动
- 使用before和after双伪元素清除浮动
额外标签法
w3c推荐的清除浮动方法
优点:通俗易懂,书写方便
缺点:添加了许多无意义的标签,结构化更差。
父级添加overflow属性方法
BFC(后面详细讲)
可以给父级添加overflow:hidden auto scroll
优点:代码简介
缺点:内容增多的时候,不会自动换行,无法显示溢出元素
使用after伪元素清除浮动
:after 的升级版
优点:符合闭合浮动的思想,结构语义化正确
缺点: ie6不支持after,
使用before和after双伪元素清除浮动
清除浮动:clear:both 块级元素下移,直到两边没有浮动元素
闭合浮动:使浮动元素闭合,使父元素能够包含浮动元素,从而减少浮动影响
CSS的元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
边偏移属性 | 描述 |
---|---|
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
也就说,以后定位要和这边偏移搭配使用了, 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分类)
在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下:
选择器{position:属性值;}
position属性的常用值
值 | 描述 |
---|---|
static | 自动定位(默认定位方式) |
relative | 相对定位,相对于其原文档流的位置进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
四种定位总结
定位模式 | 是否脱标(脱离标准流) | 是否使用偏移量 | 移动位置基准 |
---|---|---|---|
静态static | 不脱标,正常模式 | 不可以 | 正常 |
相对定位relative | 不脱标,占有位置 | 可以 | 相对与自己移动 |
绝对定位absolute | 脱标,不占位置 | 可以 | 相对于定位父级移动 |
固定定位fixed | 脱标,不占位置 | 可以 | 相对于浏览器移动 |
在网页设计中定位运用极为广泛
子级绝对定位,父级就用相对定位
称为子绝父相