HTML常用小技能（自用，不定期更新）

最新推荐文章于 2022-11-14 20:37:24 发布

SadItch

最新推荐文章于 2022-11-14 20:37:24 发布

阅读量201

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/zhang338448/article/details/105121927

版权

1、文本溢出显示…

CSS3新增了text-overflow属性，该属性可以设置超长文本省略显示。text-overflow属性的基本语法如下：text-overflow:clip | ellipsis | ellipsis-word;

<!--CSS代码-->
p{
   width:100px;
   text-overflow:ellipsis;
   white-space:nowrap;
   overflow:hidden;
}

注意：想要实现…，必须强制文本在一行内显示(white-space:nowrap)和溢出内容隐藏(overflow:hidden)

2、一个HTML页面没添加任何样式的时候，body有默认的margin是8px。

3、绝对定位是根据最近的、有定位的父级进行定位，如果没有则相对文档进行定位。

4、相对定位是相对自己原来的位置进行定位。

5、父子元素margin塌陷问题处理方法： BFC 全称为块格式化上下文 (Block Formatting Context) ，常用的CSS解决办法有：

display:absolute;
overflow:hidden;
display:inline-block;
float:right;
float:left;

5、浮动元素产生浮动流，所有产生浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类元素能够看到他们。

6、清除浮动支队块级元素生效，通常采用伪元素来清除浮动，伪元素默认是行内元素，需将伪元素转化为块级元素或将父元素触发BFC也可以解决。例如：div::after{content:"";display:inline-block;clear:both;}

7、凡是CSS设置成position:absolute;或者float:left/right;的元素，系统会在内部自动把这些元素转化成inline-block。

8、前端页面文字或图片不能被选中

-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select：none;

其中：

9、div的position属性设置成absolute之后，怎么把div在屏幕上下左右居中显示

div{
    position:absolute;
    width:200px;
    height:200px;
    background:red;
    top:50%;
    left:50%; 
    transform:translate(-50%,-50%);
}

10、Jquery通过append动态生成表格之后样式不生效（已解决）

自己写的项目中通过jquery的append()方法动态生成表格。生成之后表格的样式都不生效，找了很久，找到了原因$(“table”).css(“display”,”none”);导致，修改为 $(“table”).css(“display”,”table”);解决。

11、怎么设置网页图标

<link rel="icon" href="images/shout.ico">

关注