常用css基础总结

a img 去掉蓝色边框  

border:none; 

清除浮动

clear:both;

加边框线

border-style:solid;border-width:1px;

模块化

display: block;

 

1.让一个div水平垂直居中

position:absolute; <!--这个属性是设置div以绝对位置显示-->
top:50%;           <!--在离顶部50%的位置显示-->
left:50%;          <!--在离左边50%的位置显示-->
margin:-150px 0 0 -100px;    <!-- -150 -100 是长宽的一般-->
width:300px;
height:200px;

2.水平居中

margin-left:auto;

margin-right:auto;

 

 

jquery 让div居中

//定义div位置到正中心
        center : function($div,settings){
            var cssStr = {position:'absolute'};
            //div居中的css position:'absolute' top: 1 px left: 1px;
            //取到top值
            var $top = ($(settings.container).height() - $div.outerHeight()) / 2;
            var $left = ($(settings.container).width() - $div.outerWidth()) / 2;
            //如果是带滚动条的
            if(settings.scrolling){
                $top += $(settings.container).scrollTop()||0;
                $left += $(settings.container).scrollLeft()||0;
            }
            $top = $top > settings.minY ? $top : settings.minY;
            $left = $left > settings.minX ? $left : settings.minX;
            $.extend(cssStr,{top : $top});
            $.extend(cssStr,{left : $left});
            $div.css(cssStr);
        }

 

settings的值

//默认值
        var settings={
            width         :  500,
            height        :  300,
            scrolling     :  true,
            container     :  window,//弹出框所在的容器
            minX          :  20,//靠左边最小位置
            minY          :  20,//靠上边最小位置
            bgcolor       :  '#FFFFE1'//背景颜色
        };

$div就是指定的div

 

<div>控制换行问题只要加入样式

 word-break:break-all;

 word-wrap:break-word;

<span>换行的话要先把span块化设置宽度 类似div

 width:100px;

 display:block;

 word-break:break-all;

 word-wrap:break-word;