CSS的重点
- 盒子模型
- 浮动
- 定位
盒子模型
- 边框
- 内边距
- 外边距
边框
border: border-width || border-style || border-color
div{
width:200px;
height:200px;
border-width:1px;
border-color:red;
border-style:none /solid/dashed(虚线)/dotted(点线)
border:1px red solid;
//上边框
border-top: 1px green dotted;
//左边框
border-left: 1px green solid;
}
<div>
</div>
//修改input的边框
input{
border:0;
border-bottom: 1px red dashed;
}
<input type="text">
表格细线边框
table,td{
border-collapse:collapse;//合并相邻边框
}
内边距
padding: 0px 18px; 上下 左右
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下 左
padding 会撑开带有 height和width的盒子。
1.我们要求盒子是200200
2.但是padding会撑开盒子
3.那么怎么保证盒子是200200呢？
4.答 做减法
盒子水平居中
文本 行内元素 行内块元素 都可以通过 text-align:center
margin: 0 auto; //上下为0 ， 左右居中
margin-left:auto;
margin-right:auto; //auto 表示 自动充满
//注意 必须是块元素，且有宽度
清楚内外边距
* {
padding:0;
margin:0;
}
外边距合并
当两个块都分别 设置里 margin-bottom ， margin-top， 则两个块的间距不叠加，以最大的为准。
嵌套元素的垂直外边距塌陷问题
1. 增加border-top 或者padding-top
2. overflow:hidden
padding不会影响盒子大小的情况
当盒子没有指明宽度
圆角边框（CSS3）
border-radius:50%;
border-radius: 10px 0
盒子阴影 （CSS3）
box-shadow: h-shadow v-shadow blur spread color
transition : all 1s //动画
浮动
体会浮动
标准流： 块元素独占一行，自上而下 依次排开。
浮动：是的标签元素层级发生了变化
<style>
.up{
width:200px;
height:200px;
float:left;
}
.down{
width:300px;
height:300px;
float:left;
}
</style>
<div class = "up"> </div>
<div class = "down"> </div>
浮动最大的意义，在于使得div 能够水平排列。方便布局
浮动的特性
1，浮动脱离了标准流，不占位置（影响其后面的兄弟的布局）
2. 浮动不能越过其父容器的padding和border
3. float:left ; 显示默认转换为 行内块 的特性
版心和布局流程
版心（可视区）
布局流程：
1.确定版心大小
2.确定行块
3.确定html布局
项目注意点
li{
list-style:none;
}
清楚浮动
-
为什么要清楚浮动？
当父亲没有高度，且儿子浮动，则父亲的高度为0；清除浮动的目的就是 让父亲包围着孩子
-
清除浮动的方法
a. 额外标签法
.father{
width:300px;
background-color:pink;
border: 1px solid red;
}
.big{
height:200px;
width:400px;
background-color:green;
float:left;
}
.small{
height:200px;
width:400px;
background-color:green;
float:left;
}
.footer{
width:300px;
background-color:yellow;
}
.clear{
clear:both; //left,right 或者 both
}
<div class="father">
<div class="big"> </div>
<div class="small"> </div>
<div class="clear"> </div> //额外标签法清除浮动
</div>
<div class="footer"> </div>
b.给父标签增加 overflow属性
.father{
width:300px;
background-color:pink;
border: 1px solid red;
overflow:hidden; //hidden auto scroll
}
c.伪元素清除浮动
.clearfix:after{ //正常浏览器清楚浮动
content:"";
display:block;
height:0;
clear:both;
visability:hidden;
}
.clearfix{ //ie6 ie7清除浮动
*zoom:1;
}
<div class="father clearfix">
<div class="big"> </div>
<div class="small"> </div>
</div>
d 双伪元素清除法
.clearfix:before,.clearfix:after{
content:""; //伪元素必备属性
display:table; //css3中的属性
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
定位
background-position //背景定位
-
为什么学习定位？
悬浮，且可以排版到任何位置
-
属性
定位模式和边偏移
上下左右
static relative abslute fixed；
static 定位： 默认；唯一的作用：取消定位 relative 定位：以自己的位置为基础，进行移动；但是原理的位置继续占有 Absolute 绝对定位 不占位置， （若父亲没有定位）以当前屏幕的位置为基准。（若父亲有定位），则以最近的父辈为基准。
子绝父相
通常的最佳实践就是：子是绝对位置，父亲是相对位置。
两个问题
浮动不是完全 调标，因为字体不会被遮盖住，需要使用定位。
定位的盒子居中对齐
加了定位或者浮动的盒子，margin auto就失效了
.center{
position:absolute;
left:50%;
margin-left: -100px;
}
固定定位
在浏览器窗体中，不受父亲约束
固定定位于模式转换
当盒子有浮动或者定位（absolute fixed），其显示模式会转换为行内块
层叠层次（z-index）
只有定位盒子，才有该属性
总结
