CSS 问题


相邻块元素外边距合并

当上下两个有上下外边距的元素相邻时,则被外边距较大者覆盖。也可称外边距塌陷。**遇见该问题经量避免

代码例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 100px;
        height: 100px;
    }
    /*上盒子*/
    .no1 {
        background-color: #b3d4fc;
        margin-bottom: 10px;
    }
    /*下盒子*/
    .no2 {
        background-color: hotpink;
        margin-top: 30px;
    }
    /*结果他们之间的距离为30px*/
</style>
</head>
<body>
    <div class="no1"></div>
    <div class="no2"></div>
</body>
</html>

嵌套块元素外边距合并

两个元素父子关系的块元素,父没有内边距、外边框的前提,父子的垂直外边距会被较大者覆盖,即使父元素的上外边距为0,也会发生合并。

代码例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    /*父盒子*/
    .no1 {
        width: 200px;
        height: 200px;
        background-color: #b3d4fc;
        margin-top: 10px;
    }
    /*子盒子*/
    .no2 {
        width: 100px;
        height: 100px;
        background-color: #fff;
        /*非子块级元素*/
        margin-top: 20px;
    }
    /*子块级元素的外边距控制父块级元素的外边距,子父外边距合并。*/
</style>
</head>
<body>
    <div class="no1">
        <div class="no2"></div>
    </div>
</body>
</html>

解决方案:

  1. 为父元素定义 1px 上边框或上内边距
  2. 为父元素添加 overflow: hidden ;(清除浮动)

盒子宽度和高度

盒子的大小进行控制。盒子模型的总宽度和总高度的计算原则是:

  /*外盒尺寸计算(元素空间尺寸)*/
  Element Height = content height + padding + border + margin
  Element Width = content width + padding + border + margin
  /*内盒尺寸计算(元素实际大小)*/
  Element Height = height + padding + border
  Element Width = width + padding + border
  1. width 和 height 仅适用于块级元素,对行内元素无效(img标签和input除外)
  2. 计算盒子模型的总高度时,还应考虑上下两个盒子垂直外边距合并
  3. 如果一个盒子没有给定宽高,则会和父盒子一样;
  4. 如果此盒子没有给定宽度则padding不会影响本盒子大小

盒子模型布局

按照优先使用 宽度 (width) 其次使用内边距 **(padding) 再次外边距 **(margin)
$$
width > padding > margin
$$

原因:

  1. margin会有外边距合并还有下面margin加倍的bug所以最后使用
  2. padding 会影响盒子大小,需要进行加减计算
  3. width没有问题,经常使用宽度剩余法 高度剩余法来做

绝对定位盒子居中

实现 绝对定位盒子 的居中问题!!

定位的盒子也可以水平垂直居中,的算法

  1. 首先left: 50% 父盒子的一半大小
  2. 然后减去自身的一半宽 margin-left。

代码示范:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: #666;
        position: absolute;
        /*水平居中*/
        left: 50%;
        margin-left: -100px;
        /*垂直居中*/
        top: 50%;
        margin-top: -100px;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

插入图片和背景的区别

  • 插入图片我们用的最多 ,比如产品展示类
  • 背景图片一般用于小图标背景或者超大背景图片

相邻块元素边框线叠加

以下是浮动div的盒子边框线5px

代码例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 100%;
            height: 250px;
            display: block;
            margin: 20px;
        }
        li {
            width: 200px;
            height: 250px;
            list-style: none;
            border: 5px solid #666666;
            float: left;
        }
        li:hover {
            border: 5px solid red;
        }
        /*修复代码 , 去除以下注释代码!!!*/
        /*
        .no2 li {
            position: relative;
            margin-left: -5px;
        }
        */
        .no2 li:hover {
            z-index: 1;
        }
    </style>
</head>
<body>
    <h2>无更改</h2>
    <ul class="no1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h2>以更改</h2>
    <ul class="no2">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

伪类高亮遮挡

解决方案:

  • 每个块元素添加外边距减回去 margin-left: -5px,-5是有由边框线的像素决定的
  • 每个块元素添加相对定位 position: relative;, 防止伪类高亮遮挡

基线对齐底线溢出

先说明字体线段基准!!!

在图片/表格与内容同行时底线会溢出,由于对齐时默认是基线对齐

更改后

解决方案:

  1. 图片img设置: vertical-align: bottom; (垂直对齐:底部对齐)
  2. 内容设置: border: 0; 盒子边框为零

标签递增添加样式

使集合中多个相同元素里的标签添加不用的样式,前提要同一子盒子内,如背景图片

[类名 | 选择器]:nth-of-type(n) {
    样式属性的空间
}
[类名 | 选择器]:nth-of-type(n+1) {
    样式属性的空间
}
···

n为相同标签的排列序号

例如:

代码整体:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畅销书</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            background-image: linear-gradient(to bottom, #f8fad0,#ffffff);
            border: 1px solid #eee;
            margin: 50px auto;
        }
        .box h2 {

            background: #518700 url("../img/bang.gif") no-repeat 130px 3px;
        }
        li {
            padding-left: 20px;
            margin: 10px 10px 10px 20px;
            list-style: none;
        }
        .box li:nth-of-type(1){
            background: url("../img/book_no01.gif") no-repeat 0px 1px;
        }
        .box li:nth-of-type(5){
            background: url("../img/book_no05.gif") no-repeat 0px 4px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>畅销书排行</h2>
        <ul>
            <li><a href="#">不抱怨的世界(..</a></li>
            <li><a href="#">具遇见未知的自己..</a></li>
            <li><a href="#">活法(季羡林、...</a></li>
            <li><a href="#">高效能人士的七个习惯</a></li>
            <li><a href="#">被迫强大 (北外女生香奈儿...</a></li>
            <li><a href="#">遇见心想事成的自己 (《遇...</a></li>
            <li><a href="#">世界上最伟大的推销员(..</a></li>
            <li><a href="#">我的成功可以复制 (唐骏亲...</a></li>
            <li><a href="#">少有人走的路:心智成熟的..</a></li>
        </ul>
    </div>
</body>
</html>

100%宽高的使用

100%宽高实现前提,父元素要 块级 且 大于 子盒子,否自填充父元素的内行大小。

以上图,因填充父类 h2 的内行元素

解决方案:直接填写与父盒子相同大小的像素


子绝父相

子绝父相,子级锁定父级基点问题,这导致 绝对定位子盒子 找不到 相对定位父盒子,则导致基点丢失,以浏览器为基点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            height: 140px;
            background: hotpink;
            /*修复代码,清除以下一行*/
            position: relative;
        }
        .w {
            width: 960px;
            height: 140px;
            margin: auto;
            background: #7c7b7b;
            /*修复代码,添加以下一行*/
           /*position: relative;*/
        }
        #nn {
            width: 100px;
            height: 100px;
            top: 10px;
            left: 20px;
            position: absolute;
            background: #FFFFFF;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="w">
            <div id="nn"></div>
        </div>
    </div>
</body>
</html>

解决方案:绝对定位的盒子的上一级盒子的定位必须为 相对定位,上上级则无效
以上解决:剪切 .box类position: relative; 样式到 .w ;


子级浮动

在一个盒子内子级浮动会造成父级盒子为0的问题,解决方法: 父盒子清除浮动
清除浮动的方法

额外标签法

通过在浮动元素末尾添加一个空的标签!
注意:是最后一个空的子标签

<div style=”clear:both”></div>

优点: 通俗易懂,书写方便

缺点: 添加许多无意义的标签,结构化较差


父级添加overflow属性方法

可以通过触发 BFC 的方式,可以实现清除浮动效果。给父盒子添加!!!

overflow: hidden | auto | scroll;

优点: 代码简洁

缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素

after伪元素清除浮动

:after 方式为空元素的升级版,好处是不用单独加标签了

.clearfix:after {  
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}
 .clearfix {
    *zoom: 1;
} 
/*zoom 1就是ie6清除浮动方式 * ie7以下的版本所识别* /

父盒子调用 clearfix 类使用即可

优点: 符合闭合浮动思想 结构语义化正确

缺点:低版本不支持

注意: content:”” ,尽量不要带点

使用before和after双伪元素清除浮动

.clearfix:before, .clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;
}

父盒子调用 clearfix 类使用即可
优点: 代码更简洁

缺点: 低版本不支持



文章作者: 柏竹
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 柏竹 !
评论
  目录