css与div专题

作者: Longwide | 来源:发表于2016-09-13 15:07 被阅读56次

为div设置样式

背景

颜色背景

//实现一
.bg0{
    background-color: #abcdef;/*或者 background: #abcdef;*/
        opacity: 0.2;/*透明度*/
}
//实现二
.bg0{
    background-color: rgba(100,200,100,0.5);
}
//颜色渐变
.bg{
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));
    background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);
    background:-ms-linear-gradient(top, #fff,  #0000ff); 
}

圆角背景 ie支持不是很好

.bg0{
    background-color: #abcdef;
    -moz-border-radius:20px;  /*firfox*/
    -webkit-border-radius:20px;  /* Safari 和 Chrome */
    border-radius:20px 15px 10px 0px; /*顺时针设置圆角 Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
}

边框背景

.bg0{
    background-color: #abcdef;
     border:5px solid #ccc;  
}

阴影背景 ie支持不是很好

.bg0{
    background-color: #abcdef;
     -webkit-box-shadow: 3px 10px 20px pink;  
    -moz-box-shadow: 3px 10px 20px pink;  
     box-shadow: 3px 10px 20px pink;  /*参数分别为x阴影偏移,y阴影偏移，模糊度，阴影颜色(默认黑色)*/
}

圆形背景 ie支持不是很好

.bg0{
    background-color: #abcdef;
      -moz-border-radius:100px;  /*firfox*/
     -webkit-border-radius:100px;  /*chrome与ie*/
    border-radius:100px;/*100px等于div的长和宽*/
    border:solid
}

引用图片

//实现一
//平铺(图片较小时会显示多个该图片，平铺主要用于画线,相当于低配.9)
background:url(../img/achor.png);
//不平铺，从原点开始显示1个图片
background: url(../img/achor.png) no-repeat;
//图片居中
background: url(../img/achor.png) no-repeat;
    background-position: center;
//图片居下和右
background: url(../img/achor.png) no-repeat;
background-position:right bottom;
//图片拉伸居中
background: url(../img/achor.png) no-repeat;
    background-size: 120px 120px;
    background-position: center center;
//实现二
background-image: url(../img/achor.png);
    background-repeat: no-repeat;
    background-position: center;

点击变色

//实现一
.dv{
    width: 300px;
    height: 300px;
}
.dv:hover{
    background-color: yellow;
}
.dv:active{
    background-color: orangered;
}
//实现二
<script>
            $('#div0').mousedown(function(){
                $(this).css("background-color","#00FFff");
            });
            $('#div0').mouseup(function(){
                $(this).css("background-color","#0000ff");
            });
        </script>

8.圆角渐变阴影边框背景

.bg2{
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));
    border:5px solid #ccc;  
    border-radius:20px 15px 10px 0px;
 box-shadow: 3px 3px 3px; 
}
9.动画背景 css3
//颜色变化
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
.bg5{
    animation: myfirst 5s;
}
//位移动画(需要position:relative)
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
.bg5{
    animation: myfirst 5s;
    float: left;
    width: 100px;
    height: 100px;
    position:relative;
}

表单元素样式

//圆角input并设置fockus样式与placeholder颜色
.search{
    border: 1px solid #666666;
    border-radius: 15px;
    height: 25px;
    padding: 0px 15px;
    outline:none
}
.search:focus{
    border: 1px solid crimson;
    border-radius: 15px;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #7FFF00;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #7FFF00;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #7FFF00;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #7FFF00;
}
//

display属性

/*
*不同标签自带不同的display属性
*h1、h2、div等的display默认为block
*input、a等标签默认inline
*/
//隐藏div(不占用位置)
display: none;
//块级元素(前面加换行符)
display:block;
//内联元素(前后都不加换行符)
display:inline;
//表格元素(可实现div的等高)
display:table;
display:table-cell;

兼容不同浏览器的属性

//!important本来的作用是提高样式的优先权然而
CSS中的!important一般都是用于对低版本的除了iE 6 ，用来做hack的
http://www.w3cn.org/article/tips/2004/91.html
在设计《网页设计师》页面的时候，有一个问题一直困扰着我，主菜单在IE和其他(Mozilla、Opera等)浏览器里显示的效果偏差2px。截图如下：
IE中的效果
![IE中的效果](https://img.haomeiwen.com/i720332/2def4adab0a681e3.gif?imageMogr2/auto-orient/strip)Mozilla Firefox中的效果
![Firefox中的效果](https://img.haomeiwen.com/i720332/4622302b05a32ee1.gif?imageMogr2/auto-orient/strip)这是因为IE对盒之间距离的解释的bug造成的(参考onestab的" [浮动模型的问题](http://www.onestab.net/a/pie/floatmodel.html) ")。我一直没有解决这个问题，直到我翻译 "[ 表格对决CSS--一场生死之战](http://www.w3cn.org/article/translate/2004/89.html) "时，作者的一个技巧提示帮我找到了解决的方法：用!important。
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：[W3.org的解释](http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules))。
//hack css 写法
对此，还有其他hack [css](https://www.baidu.com/s?wd=css&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dWnynzrHbYrADsuW--uyn30ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHRsPHR3rj6k)的写法。
如：color:red;
//一般浏览器识别，字体颜色为红color:blue \9;
//IE8,IE9及以上版本识别，字体颜色为蓝*color:orange;
//IE7识别，字体颜色为橘色_color:black;
//IE6识别，颜色为黑

布局

margin与padding

html的margin和padding与android的有一定差距！
html的margin-top，如果上边有元素则正常margin，如果没有则父元素实现该margin-top,且如果父元素也设置了margin-top，则取最大,且如果第一个元素设置了position则不会让父元素实现,不是很理解这个设计。
而android的只是相对于父元素margin,不会变成父元素margin,不过还有一点需要注意，html的margin-top如果是百分数时，则子元素取父元素的高度而父元素取他的父元素的高度。
html的padding会增加该元素的宽高，而android的不会

默认布局

//默认。位置设置为 static 的元素，它始终会处于页面流给予的位置
//（static 元素会忽略任何 top、bottom、left 或 right 声明）。

相对布局

相对布局使left、top、bottom、right有效,相对于自身,margin也有效,使用该样式不会影响其他div位置(没有任何效果意味着没用？)
实际上相对布局是配合绝对布局使用的
绝对布局的父元素如果没有设置position则相对于body
如果设置了position为reletive则相对于该元素
如果设置left:50%，则该值会取父元素的宽度计算

绝对布局

绝对布局使left、top、bottom、right有效,使margin无效
当父元素position为absolute或relative时，left:50%计算回去父元素的width。
当父元素没有设置position时left:50%则会获取浏览器的宽度
当position设置为absolute时，不设置top则top和原来一致

水平居中

//div在div中横向居中(对没有初始宽度的div或其他标签无效,意思是文字居中无法使用该样式)
.h_center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
//文字在div中横向居中
.tv_center{
text-align: center;
display: block;//非块级元素需加上这行
}

垂直居中

//单行文本垂直居中
.tv_v_center{
    line-height: 100px;
    height: 100px;/*行高与高度和div的高度一致*/
    overflow: hidden;
}
//多行文本父元素固定高度的垂直居中
.p_tv_v_center{/*父div使用*/
    display: table;
}
.tv_v_center2{/*子元素使用*/
     vertical-align:middle;/*利用table中的tr、td有vertical-align的属性实现居中*/
    display:table-cell;   
}
//固定宽高的div垂直居中
//实现一  纯css实现 (需要知道宽高)
.dv_center{
position: absolute;/*父元素需要设置position为relative*/
 left: 50%;
 top: 50%;
margin-left:-25px;/*为子div宽度的一半*/
margin-top:-25px;/*为子div高度的一半*/
}
//实现二  jquery实现(无需知道元素宽高)
var arr = $(".jquery_div_center");
for(var i = 0;i<arr.length;i++){
    var dv = arr.eq(i);
    var p = dv.parent();
    dv.css("position","absolute");
    dv.css("left","50%");
    dv.css("top","50%");
    dv.css("margin-left",-dv.innerWidth()/2);
    dv.css("margin-top",-dv.innerHeight()/2);
    p.css("position","relative");
}

android版layout.css与layout.js

利用css与js轻松实现各种布局

layout.css

.horizontal{
}
.center_vertical{
    top: 50%;
    position: absolute;
    /*margin-top:-height/2*/    
}
.center_horizontal{
    left: 50%;
    position: absolute;
    /*margin-left:-width/2*/    
}
.text_center{
    text-align: center;
    vertical-align:middle;   
    display:table-cell;   
    overflow: hidden;
}
.text_center_vertical{
    vertical-align:middle;   
    display:table-cell;   
    overflow: hidden;
}
.text_center_horizontal{
    text-align: center;
}
.center{
    top: 50%;
    left: 50%;
    position: absolute;
    /*margin-top:-height/2*/    
    /*margin-left:-width/2*/    
}
.gravity{
    /*position: relative;*/
}
.left{
    left: 0px;
    position: absolute;
}
.right{
    right: 0px;
    position: absolute;
}
.bottom{
    bottom: 0px;
    position: absolute;
}
.top{
    top: 0px;
    position: absolute;
}

layout.js

var layout = $(".gravity");
for(var i = 0; i < layout.length; i++) {
    var dv = layout.eq(i);
    var cs = dv.css("position");
    if(cs == "absolute" || cs == "relative") {

    } else {
        dv.css("position", "relative");
    }
}
var childs = layout.find(".center_vertical");
for(var i = 0; i < childs.length; i++) {
    var dv = childs.eq(i);
    dv.css("margin-top", -dv.innerHeight() / 2);
}
childs = layout.find(".center_horizontal");
for(var i = 0; i < childs.length; i++) {
    var dv = childs.eq(i);
    dv.css("margin-left", -dv.innerWidth() / 2);
}
childs = layout.find(".center");
for(var i = 0; i < childs.length; i++) {
    var dv = childs.eq(i);
    dv.css("margin-top", -dv.innerHeight() / 2);
    dv.css("margin-left", -dv.innerWidth() / 2);
}
ll = $(".horizontal");
for(var i = 0; i < ll.length; i++) {
    var dv = ll.eq(i);
    dv.children().css('float', 'left');
    var bl = dv.children().eq(0).hasClass("float");
}
$(".text_center").parent().css("display", "table");
$("text_center_vertical").parent().css("display", "table");
$("text_center_horizontal").parent().css("display", "table");

css匹配规则与加载顺序

<style type="text/css">
        .rp0 {
            width: 50px;
            height: 50px;
            background: green;
        }
        .rp1 {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>

    <body>
        <div class="rp0 rp1"></div>//rp1起作用
        <div class="rp1 rp0"></div>//还是rp1起作用
    </body>
//因此class=""中的顺序并不能影响什么,而是css加载顺序会对样式产生影响
//根据加载顺序得到如下样式（css先加载的rp0，后加载的rp1）所以:
            width: 50px;
            height: 50px;
            background: #CCCC77;
            width: 100px;//覆盖50px
            height: 100px;//覆盖50px
            background: #57A957;//覆盖background
2.父子的顺序
<style type="text/css">
        .rp0 .rp1 {
            width: 50px;
            height: 50px;
            background: #CCCC77;
        }
        .rp0 .rp2{
            width: 100px;
            height: 100px;
            background: #CCCC77;
        }
    </style>

    <body>
        <div class="rp0">
            <div class="rp1 rp2">//显示为rp0 rp2
            </div>
        </div>
    </body>
3.多重父子顺序
<style type="text/css">
        .rp0 .rp1 .rp2{
            width: 50px;
            height: 50px;
            background: #CCCC77;
        }
        .rp0 .rp1{//后加载覆盖前面的,因此在定义父子css，最好将详细的放后面.rp0 .rp1 .rp2放.rp0 .rp1的后面
            width: 100px;
            height: 100px;
            background: #CCCC77;
        }
    </style>

    <body>
        <div class="rp0">
            <div class="rp1">//有效
                <div class="rp2"></div>//无效
            </div>
        </div>
    </body>
4.id选择器顺序
<style type="text/css">
        #id0 .rp1 {
            width: 50px;
            height: 50px;
            background: red;
        }
        .rp0 .rp1 {
            width: 50px;
            height: 50px;
            background: #CCCC77;
        }
        .rp0 #id1 {
            width: 50px;
            height: 50px;
            background: red;
        }
        .rp0 .rp1 {
            width: 50px;
            height: 50px;
            background: #CCCC77;
        }
    </style>

    <body>
        <div class="rp0" id="id0">//id0起作用
            <div class="rp1">
            </div>
        </div>
        <div class="rp0" >
            <div class="rp1" id="id1">//id1起作用
            </div>
        </div>
    </body>

css选择规则

<style type="text/css">
        .rp0 .rp1{//该选择器为父子选择器，父元素为rp0，子元素为rp1才生效且严格按照顺序rp0为rp1的父(3个同理)
            width: 50px;
            height: 50px;
            background: #CCCC77;
        }
    </style>

    <body>
        <div class="rp0"></div>//无效
        <div class="rp1"></div>//无效
        <div class="rp0 rp1"></div>//无效
        <div class="rp0">//有效
            <div class="rp1"></div>
        </div>
<div class="rp0">//有效(中间虽然有rp2但是因为rp1为rp0的子,这一点需要特别注意)
            <div class="rp2">
                <div class="rp1"></div>
            </div>
        </div>
    </body>

CSS3 Flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html