HTML和CSS的一些易错点和技巧

最新推荐文章于 2021-06-21 18:55:26 发布

原创最新推荐文章于 2021-06-21 18:55:26 发布 · 270 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

一些坑专栏收录该内容

12 篇文章

订阅专栏

本文总结了HTML和CSS在实际应用中的一些易错点和实用技巧，包括清除浮动、文本溢出处理、居中布局、行内元素间距、等宽布局、轮播图实现、图片100%宽度、进度条样式、层级关系、绝对定位元素的宽高处理、表格线制作等，帮助开发者提升网页样式设计能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，清楚浮动的方法

.clearfix::after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  line-height: 0;
}
.clearfix {
  *zoom: 1;
}

 .clearfix::before,
 .clearfix::after{
     content: '';
     display: table;
 }
 .clearfix::after {
     clear: both;
 }

2，文本溢出处理

<!--这是一个装载文本的块级元素-->
<!--文本可以装载用行内元素包裹-->
<div class="container">
    <span>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 		    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 		 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 		  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
</div>

 /* 处理溢出文本时必须对装载文本的块级元素进行处理，超出部分会被替换成'...' */
.container {
    width:100px;
    height:100px;
    white-space:nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

3，子绝父相的居中问题

.father {
    height:1000px;
    width:1000px;
    position: relative;
}
.son {
    position: absolute;
    height:100px;
    width:50px;
    /* 垂直居中 */
    top:50%;
    margin-top:-50px;
    /* 水平居中 */
    left:50%;
    margin-left:-25px;
}

4，包含垂直合并问题

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

.father {
  height:100px;
  width:100px;
}
.son {
  height:50px;
  width:50px
  /* 子元素设置上边距时，这个边距不会使子元素下移，而是让父元素下移 */
  /* 
      1，给父元素设置边框
      2，给父元素设置overflow:hidden
      3，给子元素设置浮动（需要清浮动）
  */    
      
  margin-top:50px;
}

5，行内元素(包含行内块)换行空格问题


<!-- 第一个box里的a标签有换行，页面在两个a标签之间解析出一个&nbsp; -->
<!-- 第二个box里的a标签没换行，页面在两个a标签之间不会解析出一个&nbsp; -->
<div class="box1">
   <a href="#" class="a1">link</a>
   <a href="#" class="a2">link</a>
</div>
<div class="box2">
   <a href="#" class="a1">link</a><a href="#" class="a2">link</a>
</div>

  a {
        text-decoration:none;
        color:#111;
      }
      [class^="box"] {
        width:100px;
        height:50px
      }
      .box1 {
        background:rgba(52, 162, 252, 0.63);
      }
      .box2 {
        background:rgb(224, 198, 77);
    }

6，多个元素等宽并列显示

<ul class="box clearfix">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


.box {
    /* 盒子宽度固定 */
    width: 1200px;
}
.box li{
    float:left;
    /* 给每个元素设置百分比就行，而不用去测量 */
    width: 20%;
}

7，轮播图实现样式结构

<div class="slide">
    <ul class="clearfix">
      <li><img src="" alt=""></li>
      <li><img src="" alt=""></li>
      <li><img src="" alt=""></li>
    </ul>  
</div>

/* first用溢出处理， */
.slide {
    width: 一张图片的宽度;
    overflow: hidden;
}
.slide ul {
    width: 300%;
}
.slide ul li {
    float:left;
}

/* second用绝对定位，改变层级来实现切换 */
.slide ul{
    position:relative;
   	width:一张图片的宽度;
    height:一张图片的高度;
}
.slide ul li{
    position:absolute;
    top:0;
    left:0;
}

8，图片100%

img {
    /* 图片宽度100%，不设置高度时，图片的比例不变的 */
    width:100%;  
}

9，进度条效果

<!--first-->
  <progress value="50" max="100">50%</progress>
  
<!--second-->
  <div class="box">
   	<div class="run">
      50%
    </div>
  </div>

  /* first */
  progress {
        width: 600px;
        height: 30px;
      }
 /* second */
 .box {
        box-sizing: border-box;
        width: 600px;
        height: 30px;
        border: 1px solid #ccc;
      }
 .box .run {
        height: 100%;
        width: 50%;
        background-color: rgba(238, 73, 140, 0.3);
        text-align: center;
        color: #fff;
     }

10，边框合并效果

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul{
     
}

ul li {
    float:left;
    height:300px;
    width:150px;
    border:2px solid #000; 
    margin-left:-2px;
}
ul li:hover {
    position:relative;  /* 让元素有层级，这时元素会覆盖其他元素 */
    border:2px solid #ccc; 
}

11，行内元素设置padding问题

a {
    padding:10px; 
    /* 给a设置padding后，padding确实存在，但是元素占文档流的位置大小还是元素内容那么大 */
}

a {
    /* 但是给a设置为块级或行内块级就没事了 */
    display:inline-block;
    padding:10px; 
}

12，图片元素下间隙问题

img标签总有一个下边距，这是因为图片其实是行内元素，并且行内元素是基于基线对齐的，不是基于底线对齐的，所以图片会有一个下边距（就如字母g，它的下部分的高度就是那个边距的高度）；

解决方法就是：

font-size:0px;
改变图片的显示方式为block；

注意：

行内元素是基于基线对齐的；
行内块级元素是基于顶线对齐的；

13，层级的关系

设置了transform: translate也会让层级提高

14，定义等比例缩放容器占位

这个用在移动端的容器用来占位上比较多，如下，想让.box容器的宽高始终保持2:1可以这样

.box {
  overflow: hidden;
  width:100%;
  height: 0;
  padding-bottom: 50%;  /* padding的百分比是相对于父容器的宽度而言的 */

15，绝对定位元素的宽高

绝对定位的元素可以用top:0,bottom:0,left:0和right:0来铺满定位框元素，也就是说绝对定位的元素，不设宽高时，我们可以通过各个方向的定位值来改变其大小

    .father {
      position:relative;
      background: rgb(249, 57, 98);
      width:300px;
      height:300px;
    }
    .sun {
        position: absolute;
        background-color: rgb(93, 155, 198);
        top: 0px;
        bottom: 0;
        left: 0;
        right: 0;
        /* width:100%; */
        /* height: 100%; */
    }

16，表格线的制作

可以利用ul的::before和::after，把伪元素做绝对定位，设置左边框或右边框

17，透过绝对定位的元素点击下面的链接

有时候我们的绝对定位的元素“浮”在上面，且透明的，盖住了下面的a标签等链接使其不能点击；这时可以用一个CSS3的属性使其可以被穿透，那就是pointer-events: none，把其加在绝对定位的元素上，这样就可以被穿透了；

关于pointer-events: none是个神奇的东西，只要加了这个，元素就好像幽灵一样，看得见，摸不着

18，三角形的制作

用CSS做三角形，可以把宽高都设置为0，然后通过加全边框，然后再把不要的位置的颜色设置为透明，如下

/* 做一个正红色三角形 */
.triangle {
	height: 0;
	width: 0;
	border: solid 30px;
	border-color: transparent transparent red transparent
}

19，窗口滚轮事件

为window对象添加

window.addEventListener('scroll', ()=>{
	console.log(window.pageYOffset)
})

试试做那种滚动越下，透明度越高的效果

20，HTML5不支持table的样式属性

不支持cellpadding和cellspacing

21，超链接伪类的顺序

link visted hover actived

22，flex中某个元素右对齐

<div class='w'>
	<div>1</div>
	<div>2</div>
	<div class='last'>3</div>
</div>
<style>
.w {
	display: flex
}
.w .last {
	margin-left: auto
}
</style>