7.行高、边框、边距

来源：互联网发布：视倾角换算软件编辑：程序博客网时间：2024/06/06 01:32

行高

1.浏览器默认文字大小：16px , 默认行高为18px
2.行高为基线与基线的距离
3.行高=文字高度+上下边距
这里写图片描述
※一行文字行高和父元素高度一致的时候，文字垂直居中显示。

<head>    <style type="text/css">        a{            display:inline-block;            width:120px;            height:58px;            background:url("images/bg1.png");            text-align:center;            text-decoration:none;            color:white;            line-height:58px;        }    </style></head><body>    <a href="#">五彩导航</a>    <a href="#">五彩导航</a>    <a href="#">五彩导航</a>    <a href="#">五彩导航</a></body>

行高单位与行高值

单位文字大小显示的行高值 20px 20px 20px 2em 20px 40px 200% 20px 40px 2 20px 40px

※总结：行高单位除了像素以外，行高都是与文字大小的乘积。

(定义的行高)单位父元素文字大小子元素文字大小显示的行高值 40px 20px 30px 40px 2em 20px 30px 40px 150% 20px 30px 30px 2 20px 30px 60px

总结：不带单位单位时（最后一个）时，行高和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
※推荐行高以像素为单位，这样不会乱。

盒子模型

三大组成：盒子就是整个元素到网页或者到别的盒子的距离为外边距margin,内容到盒子边框的距离为内边距padding,盒子厚度为border.
这里写图片描述

1.边框：border

属性解释 border-top-style:solid;dotted;dashed; 实线；点线；虚线 border-top-color:red; 边框颜色 border-weight：5px; 边框宽度

※边框属性连写：border-top:red solid 5px;（没有顺序，线型为必写项，颜色不写则默认为黑色）；
四个边框值相同的写法：border:red solid 5px;（没有顺序，线型为必写项，颜色不写则默认为黑色）

表格边框合并
border-collapse:collapse;

<head><style type="text/css">    table{        width:300px;        height:500px;        border:1px solid red;        border-collapse:collapse;    }    td{        border:1px solid red;    }</style></head><body>    <table>        <tr>            <td></td>            <td></td>            <td></td>        </tr>        <tr>            <td></td>            <td></td>            <td></td>        </tr>    </table></body>

去掉表单默认边框
border:0 none; 去掉表单默认边框；
outline-style:none; 去掉表单鼠标放上时的默认轮廓线；

获取光标焦点
label标签：<label for="id名">
这里写图片描述

2.边距

内边距：padding

（1）定义：内容距离本身盒子的距离
（2）四个方位定义：

padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px;

（3）属性连写：

padding：20px;（上下左右） 只写一个值时，上下左右内边距都为20px;
padding:20px（上下） 30px（左右）;
padding:20px（上） 30px（左右） 40px（下）;
padding:20px（上） 30px（右） 40px（下） 50px（左）;

内边距撑大盒子
※内边距会把盒子整体的尺寸撑大
※影响盒子宽度的因素：

内边距padding影响盒子的宽度；
边框border影响盒子的宽度；
盒子的实际呈现的宽度=定义的宽度width+边框宽度border+左右内边距padding
eg:1.文字距离盒子内左边距为40px,边框为3px,当前盒子宽度怎么设置最后能保证盒子的最终宽度为200px?
答：设置的盒子宽度width=盒子最终宽度200-内左边距：padding-left:40px；-（左右边框border-width:3px；）*2=width:154px;

<head>    <style type="text/css">        .box{            width:300px;            height:150px;            background:pink;            padding:75px 100px;        }        .smallbox{            width:300px;            height:150;            background:red;        }    </style><head><body>    <div class="box">        <div class="smallbox"></div>    </div></body>

方法二：或者先定义父盒子和子盒子宽高相同，再设置需要的内边距大小。

※继承的盒子一般不会撑大父盒子宽度
解释：包含（嵌套）的盒子若不设置宽高，则宽度继承父盒子宽度，高度不会继承，高度为0，若给子盒子设置左右边距padding则不会撑大父盒子的宽度，除非设置子盒子的padding大于父盒子的宽度width.

<head>    <style type="text/css">        .father{            width:500px;            height:300px;            background:pink;        }        .son{            height:100;            background:red;            padding-left:400px;        }    </style><head><body>    <div class="father">        <div class="son"></div>    </div></body>

※居中：
子盒子在父盒子中的位置居中，则给子盒子一个margin:0 auto;
内容在盒子中水平居中：text-align:center;

外边距

margin盒子同其他盒子之间的距离。

margin-left:20px;margin-right:30px;margin-top:40px;margin-bottom:50px;

属性连写：

margin：20px;（上下左右） 只写一个值时，上下左右外边距都为20px;
margin:20px（上下） 30px（左右）;
margin:20px（上） 30px（左右） 40px（下）;
margin:20px（上） 30px（右） 40px（下） 50px（左）;

垂直方向外边距合并和塌陷
（1）垂直方向的两个盒子，如果都设置了外边距，那么两个盒子之间的距离取的是外边距数值较大的数字

（2）外边距塌陷：嵌套的盒子,如果给子盒子设置垂直方向的外边距时，会发生外边距塌陷也就是父盒子垂直距离会发生变化。

<head>    <style type="text/css">        .father{            width:500px;            height:400px;            background:#232323;        }        .son{            width:200px;            height:200px;            background:#eee;            margin-top:30px;        }    </style></head><body>    <div class="father">        <div class="son"></div>    </div></body>

这里写图片描述

※解决方法：

给父盒子设置边框border

<head>    <style type="text/css">        .father{            width:498px;            height:400px;            background:#232323;            border:1px solid #232323;        }        .son{            width:200px;            height:200px;            background:#eee;        }    </style></head><body>    <div class="father">        <div class="son"></div>    </div></body>

这里写图片描述

给父盒子设置overflow：hidden；会触发bfc格式化上下文。
bfc详解:http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

<head>    <style type="text/css">        .father{            width:500px;            height:400px;            background:#232323;            overflow：hidden；        }        .son{            width:200px;            height:200px;            background:#eee;        }    </style></head><body>    <div class="father">        <div class="son"></div>    </div></body>

这里写图片描述

阅读全文

0 0