7.行高、边框、边距

最新推荐文章于 2023-11-01 17:21:58 发布

121689Stone

最新推荐文章于 2023-11-01 17:21:58 发布

阅读量721

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_37993288/article/details/77413761

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

行高

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>

这里写图片描述

121689Stone

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
7.行高、边框、边距

行高1.浏览器默认文字大小：16px , 默认行高为18px 2.行高为基线与基线的距离 3.行高=文字高度+上下边距 ※一行文字行高和父元素高度一致的时候，文字垂直居中显示。<head> <style type="text/css"> a{ display:inline-block; width:120px;
复制链接

扫一扫

专栏目录