您的位置：首页 > 其它

盒子模型

2018-01-16 22:23 78 查看

1 边框（border）

Border-top-style: solid   实线 dotted 点线 dashed 虚线

Border-top-color   边框颜色

Border-top-width   边框粗细

边框属性的连写没有顺序要求，线型为必写项。

边框合并   border-collapse:collapse;用于细边框表格

2 获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.input1 {
border:0 none;
outline-style: none;
background: #eee;
border: 1px #666 dashed;
}
.input2 {
border:0 none;
outline-style: none;
border-bottom: 1px #f00 dotted;
}
.input3 {
background: url(../../04/练习/1.jpg) right no-repeat;
}
.input1:focus {
background-color: red;
}
</style>
</head>
<body>
<label for="input4">1</label> <input type="text" class="input1" id="input4"><br><br>
2<input type="text" class="input2"><br><br>
3<input type="text" class="input3"><br><br>
</body>
</html>结果就是当标签input4得到焦点时，input1也获得焦点，也就是可以输入文字。

3 内边距

◆内边距撑大盒子的问题

影响盒子宽度的因素（1）内边距影响盒子的宽度（2）边框影响盒子的宽度

盒子的宽度=定义的宽度+边框宽度+左右内边距

被撑大的区域会被背景填充，看起来就像被撑大，其中嵌套的控件会有间距，但是自身可以在内边距中写控件。

◆继承的盒子一般不会被撑大

包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。当控件宽度超过盒子的宽度会撑大。

高度同。

4 外边距

◆垂直方向外边距合并

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

◆嵌套的盒子外边距塌陷

解决方法: 1给父盒子设置边框

2给父盒子overflow:hidden; bfc 格式化上下文

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航