分类目录归档:CSS

CSS

css中如何绘制一条横线呢?


摘要:
下文讲述使用css脚本绘制横线的方法分享,如下所示;

方法1:使用DIV的下边框绘制横线

方法2:直接使用hr标签

例:


 <div style="width:600px;height:1px;margin:0px auto;padding:0px;background-color:red;overflow:hidden;"></div>

 <hr style="margin:0px;height:1px;border:0px;background-color:red;color:red;"/>
  

如何处理div中的图片溢出呢?


摘要:
下文讲述避免div中的图片溢出的处理方法分享,如下所示;

在网页设计时,当我们没有对图片进行宽度设置时,此时当图片过大时,
将会溢出div盒子,那么我们如何避免这种情况发生呢?
下文将讲述具体的实现方法:

实现思路:
    设置div下图片的width属性为百分之百,即可避免图片溢出

例:

 
<p>
maomao365.com<br />
图片溢出的处理方法分享
</p>
<hr />
<style>
div{
  width:200px;
  height:200px;
  border:1px solid green;
  margin:3px;
  padding:10px;
} 


/*避免图片溢出的css代码*/
#a img{ width:90%;}
  
</style>
<div id="a">
<img  alt=""
src ="http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png"
/>
 </div>
 
<div id="b">
<img  alt=""
src ="http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png"
/>
 </div>
css处理div中图片溢出的方法分享

css处理div中图片溢出的方法分享

如何使用css代码强制换行和禁止换行呢?


摘要:
下文讲述css代码强制换行和禁止换行的实现方法分享,如下所示;

  
   /*强制换行*/
   word-break: break-all; 只对英文起作用,以字母作为换行依据。
   word-wrap: break-word; 只对英文起作用,以单词作为换行依据。
   white-space: pre-wrap; 只对中文起作用,强制换行。

    /*禁止换行*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;