【不误正业】之前端CSS基础（二）

最新推荐文章于 2022-10-08 11:04:54 发布

原创最新推荐文章于 2022-10-08 11:04:54 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#行高 #padding #margin

前端专栏收录该内容

8 篇文章

订阅专栏

本文深入讲解CSS中的链接伪类、行高、盒模型、文档流和定位浮动等关键概念。探讨了行高与字体大小的关系，盒模型的边框、内边距、外边距属性及连写技巧，以及布局方式如浮动、清除浮动和定位的特点。

css离不开一些常用属性的书写，本章呢就从，链接伪类，行高，盒模型介绍，以及文档流和定位浮动的介绍。最近还是太忙了，已经好久没有去更行博客了，但凡有时间呢，JJ都会加以总结。对不务正业系列加以总结～

行高Lineheight

浏览器存在默认的字体大小16px，行高是基线与基线之间的距离。行高=文字高度+上下边距。单行文字行高和氟元素高度一致时，内容垂直居中显示。

行高单位

行高单位	文字大小	值
20px	20px	20px
2em	20px	40px
150%	20px	30px
2	20px	40px

行高的继承性

行高单位	父文字大小	子元素文字大小	行高
40px	20px	30px	40px
2em	20px	30px	40px
150%	20px	30px	40px
2	20px	30px	60px

盒子模型

边框 border

1、边框的常用属性

border-top-style: solid | dotted | dashed
border-top-color 边框颜色
border-top-width 边框粗细颜色

.eg1 {
    width: 300px;
    height: 390px;
    background: #999;
    border-top-style: solid; /*实线*/
    border-top-color: red;  /*边框颜色*/
    border-top-width: 5px;
    border-bottom-style: dashed;
    border-bottom-color: green;
    border-bottom-width: 10px;
}

2、border属性的连写

/*边框属性连写*/
border-top: red solid 5px;
/*四个边框值相同的写法*/
border: 12px solid red;

3、边框的合并 border-collapse: collapse;

    table{
        width: 300px;
        height: 500px;
        border: 1px solid red;
        border-collapse: collapse;
    }
    td{
        border: 1px solid red;
    }

内边距

padding-left | right | top | bottom

1、padding 连写

padding: 10px; //	上下左右间距为20px
padding: 10px 20px;	//	上下间距为10px，左右为20px
padding: 10px 20px 30px; //	上10px，左右20px 下30px
padding: 10px 20px 30px 40px;	// 上10px 右20px 下30px 左40px

2、内边距会撑大盒子
盒子宽度 = 定义的宽度 + 边框的宽度 + 左右边距

3、继承的盒子一般不会被撑大
嵌套的盒子，如果字盒子没有定义宽度，给子盒子设置左右边距一般不会撑大盒子。

外边距

1、外边距连写

/*上下左右外边距是20px*/
margin: 20px; 
/*上下20px 左右30px*/
margin: 20px 30px;
/*上20px 左右30px 下40px*/
margin: 20px 30px 40px;
/*上20px 右30px 下40px 左50px*/
margin: 20px 30px 40px 50px;

2、垂直方便外边距合并
两个盒子垂直，一个设置上外边距，一个设置下外边距，设置的值为较大值

3、嵌套的盒子外边距塌陷

给父盒子设置border
给父盒子overflow:hidden;

布局方式

文档流

元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父级元素的边框换行。

浮动布局

float: left | right
1、特点

元素脱标
浮动的盒子在一行显示
行内元素转换为快元素

2、清除浮动

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素位置放生错误

2.1 额外标签法（在最后一个浮动元素后添加标签）

<div class="main">
    <div class="content"></div>
    <div class="sidebar"></div>
    
    <!--额外标签法--->
    <div style="clear:both;"></div>
</div>

2.2 给父集元素使用overflow:hidden；

如果有内容出了盒子，不能使用这个方法/

<style type="text/css">
    .main{
        background: #eee;
        margin: 10px 0;
        overflow: hidden;
    }
</style>

2.3 伪元素清除浮动

    .clearfix:after{
        content:".";
        display: block;
        height: 0;
        line-height: 0;
        visibility: hidden;
        clear: both;
    }
    /*兼容ie浏览器*/
    .clearfix{
        zoom:1;
    }
 </style>
<head>
<body>
    <div class="header"></div>
    <div class="main clearfix"></div>
        <div class="left"></div>
        <div class="content">
            <div class="content-top"></div>
            <div class="content-bot"></div>
        </div>
        <div class="right"></div>
</body>

CSS 的初始化

Overflow

–	–
overflow:visible	默认值。内容不会被修剪，会呈现在元素框之外
overflow:hidden	内容会被修剪，并且其余内容是不可见的
overflow:scroll	内容会被修剪, 但是浏览器会显示滚动条以便查看其余内容
overflow:auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容