CSS注意问题

时间:2021-10-09
本文章向大家介绍CSS注意问题,主要包括CSS注意问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1. 图像变形:

<img src="./images/jd.jpg" width="100" height="100">

注意: 会导致图像变形。一般要么只修改宽度,要么只修改高度,只修改其一,另外一个会自动等比缩放,就不会出现图像变形的情况了。

2. 下载链接:

<a href="a.zip">下载文件</a>

3. 转义字符:

字符 含义
&nbsp; 空格
&lt; <
&gt; >
&copy; ©

4. 设置整体的超链接打开状态:

<base target="_blank">

注意: 在head中,添加base,该标签可以设置整体链接的打开状态。之后在局部的a标签中可以设置为target="_self"。

5. 表格css:

html:

table>tr*3>td*3

css:

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

注意: 此时在单元格之间有空隙。
html:

<table cellpadding="0" cellspacing="0">

注意: 此时边框不会重叠,而是累加。
合并相邻边框代码:

table{border-collapse: collapse;}

注意: 可以省略cellpadding="0" cellspacing="0"

6. 外边距合并:

<div class="xiongda">1</div>
<div class="xionger">2</div>
div{
    width: 300px;
    height: 200px;
    background-color: blue;
}
.xionger{
    background-color: red;
}
.xiongda{
    margin-bottom: 100px;
}

此时如果再给xionger一个上外边距:

.xionger{
    margin-top: 50px;
}

两个盒子的距离还是100px。
注意: 上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中较大者,这种现象被称为相邻块元素垂直外边距的合并。
解决办法: 只给其中一个盒子的外边距即可。

7. 使用垂直外边距移动子块元素:

<div class="father">
        <div class="son"></div>
</div>
.father{
    width: 500px;
    height: 500px;
    background-color: blue;
}
.son{
    width: 200px;
    height: 200px;
    background-color: red;
}

现在让son向下移动一点:

  • 给father加:padding-top: 50px;(需要做减法)
  • 给son加:margin-top: 50px;

注意: 如果给son加:margin-top: 50px; 会发现小盒子son非但没有下来,而且让father和son一起下移50px。这种情况只会出现在嵌套块元素且为垂直外边距(即margin-top、margin-bottom)
解决办法:

  • 为父元素father定义1像素的上边框或上内边距,相当于砌了一堵墙
border-top: 1px solid blue;
padding-top: 1px;

但用这中方法的缺点是会撑大盒子,要减去。

.father{overflow: hidden;}

推荐使用这种方法,并不会撑大盒子,所以不用做减法。

8. 浮动有隐藏模式转换属性:

<div>哒哒哒</div>
div{
    height: 100px;
    background-color: blue;
    float: left;
}

注意: 块元素没有给宽时,如果此时加了浮动,则默认让块元素转换为了行内块,其大小取决于内容多少或定义的大小。

<span></span>
span{
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
}

注意: 如果给行内元素添加了浮动,此时就不需要用display转换模式了,这个元素也可以有宽高了。

9. 清除浮动:


这是一种很常见的布局,要给两个盒子一个父盒子,且这个父盒子一定要有高,但是这个高给多少合适?很难去控制。比如有一个新闻网页,文章中的内容一定是用盒子包裹的,但是这个盒子高度多少,是依据文字的多少来给的,那文字又是多少,很难去确定,所以盒子高度就很难确定。所以在很多情况下,父盒子是不方便给高度的。

<div class="father">
        <div class="big"></div>
        <div class="small"></div>
</div>
<div class="footer"></div>
.father{
    width: 300px;
    border: 1px solid red;
}

.big{
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
}

.small{
    width: 80px;
    height: 80px;
    background-color: green;
    float: left;
}

.footer{
    width: 400px;
    height: 100px;
    background-color: yellow;
}

此时由于big和small两个盒子设置了浮动,且父盒子father又没给高度,所以出现footer被压到big和small两个盒子的底下。

当容器高度为0(或auto)时,且容器内中有浮动的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象叫做浮动溢出,为了防止这个现象的出现而进行的css处理就叫做清除浮动。
清除浮动的本质:清除浮动主要为解决父级元素因为子级浮动而引起内部高度为0的问题。

固定的css代码:

/* 使用after伪元素清除浮动 */
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* IE6、IE7专用 */
.clearfix{
    *zoom: 1;
}

在父级中调用:

<div class="father clearfix"></div>

10. 固定定位和绝对定位也有隐式转换:

<div class="top"></div>
.top{
    height: 44px;
    background: url(../images/jd.jpg) no-repeat blue top center;
}

此时如果给top一个position: fixed;/position: absolute;后,这个盒子就看不到了,因为此时已经转换为了行内块。
解决办法: 手动给宽:width:100%

11.文本在一个元素内部居中 :

<div>用尿素袋子装行李不丢人,感觉丢人才丢人</div>
div{
    display:inline-block;   /*将块元素转换为inline-block元素*/
    padding:40px 80px;   /*此时padding就是盒子宽高了*/
    margin:40px;
    border:2px solid red;
    background-color:#FFDEAD;
}

注意: 如果想要让文本在一个元素内部居中,可以使用padding来实现,就像这个例子一样。如果一个盒子给了宽高,则用text-align、line-height使文本在元素中居中显示。

12. text-align:center

注意: 只针对于行内、行内块元素。即当内盒子为行内或行内块元素时,可以给外盒子指定text-align:center,可以让内盒子居中。但当内盒子为块元素时,这个方法不会生效。

原文地址:https://www.cnblogs.com/Mocode/p/15386939.html