CSS入门常见的问题

CSS入门常见的问题

写在前面：本文简单介绍一下css的三大特性：层叠性、继承性、优先级。以及margin,padding,浮动，定位几个知识点。限于水平，不深入探讨，仅作为学习总结。

1，三特性

1）层叠性：同标签同权重下，样式冲突，后面的样式会覆盖前面的。

2）继承性： 给父元素设置样式的时候，子元素在默认没有样式的情况下会受父元素的样式影响。注意宽高不能继承。

 

可继承的属性：
◇文字颜色可以被继承 color
◇与文字相关的属性都可以被继承
◆行高（line-height） 可以被继承
◆text-align

特殊情况：

a 标签默认情况下不会受父级元素的颜色影响

常见的在制作nav 中给li 设置颜色a标签不起作用，原因是受到浏览器默认的样式影响 color: -webkit-link。

h1-h6 默认单位是em 具体大小要乘积运算

3）优先级：

标签选择器<类选择器 <ID选择器 < 行内样式 <! Important

2，Margin 的特点：

1）垂直外边距合并（取大的）

2）垂直外边距塌陷？

解决方法：

给父元素设置边框。
给父元素设置 overflow:hidden（触发bfc）

3,Padding值特殊性

在块级元素中，如果默认子元素没有设置宽度，给当前子元素设置padding值，不会影响当前子盒子的宽度。（“继承”的盒子padding值不会影响）

4,浮动

为什么用浮动？

开始是作为 图片文字环绕效果设计现在多用在布局和导航 制作

什么时候清理浮动？
1，父容器没有设置高度
2，父容器所有子元素都设置浮动

如何清理浮动？（这里介绍常见的4种）
1，clear：both;
2,给父元素设置overflow：hidden;(父元素没有定位)
3，使用伪元素

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix
:after{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom: 1;
/*兼容ie6*/
}
4,display: table;

 

1
2
3
4
5
6
7
8
9
10
.clearfix:before,
.clearfix:after{
clear: both;
display: table;
/*表格模式*/
}
.clearfix{
zoom: 1;
/*兼容ie6*/
}
　　

定位：

1，静态（static）标准流下的显示方式，可转换成其他定位方式
2，绝对 （absolute） ：
1）标准流下的盒子，设置绝对定位以body 为参照
2）除了父盒子设置static ，其他定位方式，子盒子以父盒子为参照
3）绝对定位的元素脱标
4）实现模式转换的效果
使用场景：1，盒子压盒子 2，绝对定位可以使用margin padding
3，相对（relative）：相对自己作为参照，不会脱标
使用子绝父相
4，固定（fixed）：
1）以body标签可视区域作为参照
2）脱标
3）实现模式转换的效果
层级：
1）定位的元素有层级关系
2）只有给定位的元素才能设z-index
特点：
1）元素设置定位后有个默认的z-index ：auto（除去static）
2）z-index 值相同 元素后来居上
3）z-index 值越大 当前的元素层级越高
4）父元素的z-index值越大 当前的元素层级越高简单

绝对定位如何居中？

◆通过设置left:50% ; 父元素宽度的一半
◆设置margin-left: -元素自己宽度一半；

 

 

双飞翼布局

目的：加载文档时先加载中间区域，再加载左右两边

特点：两侧固定，中间自适应

 

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
<div class="columns mainbox">
<div class="inner">
我看见个会计课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个会计课件发卡
机看见看见我看见个会计 课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个
会计课件发卡机看见看见我看见个会计课件发卡机看见看见
</div>

</div>
<div class="columns leftbox"></div>
<div class="columns rightbox"></div>
</div>

　　

1 <style>
2 body {
3 min-width: 1000px;
4 }
5
6 .columns {
7 height: 250px;
8 float: left;
9 }
10
11 .container {
12 height: 250px;
13 border: 1px solid red;
14 }
15
16 .mainbox {
17 width: 100%;
18 background: yellow;
19 }
20
21 .inner {
22 margin: 0 300px 0 250px;
23 word-break: break-all;
24 }
25
26 .leftbox {
27 width: 250px;
28 background: red;
29 margin-left: -100%;
30 }
31
32 .rightbox {
33 width: 300px;
34 background: blue;
35 margin-left: -300px;
36 }
37 </style>