html+css小技巧大用处

原创 2016年08月30日 13:56:40

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

版权声明:本文为博主原创文章,未经博主允许不得转载。本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。

关于js中变量作用于和变量提升的那些事

一个变量的作用域(scope)是程序源代码中定义这个变量的区域。 全局变量拥有全局作用域,在javaScript代码中任何地方都有定义的。 然而在函数内声明的变量只是在函数内部有定义,他们是局部变...

第15章 css样式设置小技巧

水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。 这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素...
  • dada678
  • dada678
  • 2016年06月20日 13:30
  • 145

一些常用的html/CSS效果---小技巧

我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} tabl...

HTML+CSS基础篇——小技巧集合

1、清除两个input之间空隙 a、设置两个input的父div的font-size=0 b、两个input都 float:left 浮动起来,然后设置父div宽度width,最后设置...
  • mqy1023
  • mqy1023
  • 2016年03月30日 20:22
  • 480

css,html,js/jQuery开发小技巧汇总-更新中~

1.怎样给超链取消下划线 A {text-decoration: NONE} 2.FF下使用background-image给body和div加背景图片 body直...

Firebug折腾记_(2)HTML&CSS定位及调试小技巧

题外话传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的; 而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果; 在调试中对代码的操作不会保存到本...
  • bomess
  • bomess
  • 2015年08月21日 12:16
  • 1992

网页代码小技术大用处

  • 2009年07月30日 18:00
  • 11KB
  • 下载

Oracle小函数大用处!

奋斗的脚本 2016-12-21 21:10 近几日较忙,一时忘记更新文章,实在抱歉。 如题 从今日起,给大家有序的介绍一些ORACLE数据库的知识,先从函数说起吧,后续会说一些...

Oracle小函数大用处!

奋斗的脚本 2016-12-21 21:10 近几日较忙,一时忘记更新文章,实在抱歉。 如题 从今日起,给大家有序的介绍一些ORACLE数据库的知识,先从函数说起吧,后续会说一些...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html+css小技巧大用处
举报原因:
原因补充:

(最多只允许输入30个字)