关闭

html+css小技巧大用处

标签: csshtml技巧
135人阅读 评论(0) 收藏 举报
分类:

1.用css border写下拉小三角:

<span class="sanjiao"></span>

.sanjiao{
    width:0;height:0;
    border-top:4px solid #ccc;
    border-right:2px solid transparent;
    border-left:2px solid transparent;}
  

2.图片设置右下边框,最外边框用外盒子边框

<div class="box">
    <ul>
        <li><a href="#" class="s_bor"></a></li>
        <li><a href="#" class="s_bor"></a></li>
        <li><a href="#" class="s_bor"></a></li>
        <li><a href="#" class="s_bor"></a></li>
    </ul>
  </div>

.box{width:500px;height:600px;overflow:hidden;}
  ul  {width:510px;height:610px;  }
.s_bor{display:block;border-right:10px solid green;border-bottom:10px solid green;

box设width,height为最终看到的宽高给设置border,把ul边上出来的一块设置隐藏,overflow:hidden;ul设置的宽高刚好多出s_bor的边框宽度。


3.4个条件同时存在,才有一行文本后面有省略号的效果:

a{widht:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-spacing:nowrap;
}

4.高度塌陷

块级元素(如盒子)如果没有设置高度,并在盒子内其他元素上用了float属性,就会发生高度塌陷,要在块级元素(父级)上设置overflow:hidden属性将盒子撑起来就解决了塌陷问题。


5.若三个盒子并排显示在一行病、并且两两之间有margin,讲margin或者padding设置在中间盒子上。

6.margin元素具有上下重合左右叠加的特点。

7.display的几个属性:

inline:加宽高无效,加padding border margin 竖直方向只有显示效果不占空间。

block:width height padding margin border都可设置

inline-block:可以设置宽高,多个可占一行,但是每个之间有一定的margin.只有inline-block属性可以设置vertical-algin属性。

inline:浮动后可以变成块级元素

8.同行元素要加浮动,就都要加浮动。

9.让导航居中,ul设置宽(否则他的宽默认为父级元素的宽)后设置margin:0 auto; a 标签中的内容垂直居中,a转成块级元素设置行高line-height;水平居中给li设text-align

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:22061次
    • 积分:654
    • 等级:
    • 排名:千里之外
    • 原创:43篇
    • 转载:3篇
    • 译文:0篇
    • 评论:3条
    最新评论