css与div专题

为div设置样式

背景

  1. 颜色背景
//实现一
.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); 
}
  1. 圆角背景 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浏览器 */
}
  1. 边框背景
.bg0{
    background-color: #abcdef;
     border:5px solid #ccc;  
}
  1. 阴影背景 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阴影偏移，模糊度，阴影颜色(默认黑色)*/
}
  1. 圆形背景 ie支持不是很好
.bg0{
    background-color: #abcdef;
      -moz-border-radius:100px;  /*firfox*/
     -webkit-border-radius:100px;  /*chrome与ie*/
    border-radius:100px;/*100px等于div的长和宽*/
    border:solid
}
  1. 引用图片
//实现一
//平铺(图片较小时会显示多个该图片，平铺主要用于画线,相当于低配.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;
  1. 点击变色
//实现一
.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中的效果](http://upload-images.jianshu.io/upload_images/720332-2def4adab0a681e3.gif?imageMogr2/auto-orient/strip)Mozilla Firefox中的效果
![Firefox中的效果](http://upload-images.jianshu.io/upload_images/720332-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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,457评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,837评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,696评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,183评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,057评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,105评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,520评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,211评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,482评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2赞 335

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1赞 92
  • Web端---常用的特效
    1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 1,797评论 0赞 1
  • （完结）《半片世界》【10】
    回顾上章节【9】 21.《出院》 既然这么快就到了春节，我也不想在医院过，我的脚也差不多可以走路了，我真是笨拙。...
    半片世界阅读 155评论 0赞 0
  • 美好的未来属于一直坚持的人
    上周和班上的两个孩子打了个赌：从当天起，到小考那天，刚好十五天的时间，选择一件事坚持做，做十五天。 当时，他们雄赳...
    彩凤知音阅读 223评论 0赞 0
  • 我想请个假
    我想请个假，不是因为世界那么大！ 我想请个假，不是说走就走全放下！ 春天的花开，笑我总是在这屋檐下， 夏天的柳絮，...
    本心草木阅读 506评论 0赞 0