zoukankan      html  css  js  c++  java
  • 布局技巧

    布局技巧

    1.只要是块元素想到宽高

    2.div默认的宽100%,高度为零。(块元素都这样)

    3.盒子中有文字,想到文字的水平(text-align)、垂直(line-height)的位置

    4.看到a标签就想到下划线、颜色、修改颜色去除下划线

    5.a链接修饰小技巧

    让一个行内行内块元素在元素中居中:给大的块元素加上text-align:center;

    (1)伪类a:hover{

    background:#eee;鼠标放上去背景色变为#eee;

    color:orange;鼠标放上去字体变色

    }

    (2)a{

    text-align:center;整体居中

    text-decoration:none;取消下划线

    display:inline-block;/*转为块元素*/

    175px;

    height:259px;

    }

    6.div盒子修饰小技巧

    div{200px;

    height:200px

    padding-top:30px;内填充填充了30px的空白,要在div减去30px=200-30=170px,否则会变形

    padding:50px;上下左右

    padding:50px  50xp;第一个值代表上下 、第二个值代表左右

    padding:50px  50xp  50px;上      左右      下

    padding:50px  50xp  50px  40px;上  ,右,下,左。顺时针

    margin-left:59px;

    margin-top:20px;

    margin-right:50px;

    margin-bottom:50px;(和padding用法相同)

    margin:0    auto;盒子居中·

    padding:0px;margin:0px;清除块元素间距、h1、body

     

    }

    7.边框

    粗细、颜色、样式。

    div{

    边框类型

    border-style:dashed;虚线

    边框颜色

    boder-color:#00f;

    边框宽度

    boder-10px;

    三元素连写

    boder:10px #000 solid;

    boder-top:10px #000 solid;上、left、right、bottom

    圆角boder-radius可设八个值

    boder-radius:20px;

    boder-radius:10px 20px 30px 40px;顺时针左上开始

    boder:no;

    }

    8.盒子模型bug

    1.两个盒子小盒子、大盒子上外边距margin-top合并。

    解决:a、padding。b、

    9.元素隐藏

    display:none;元素隐藏不占空间

    display:block;元素一块元素显示

    visibility:hidden;隐藏占空间

    visibility:visible;显示

    10.遇到列表ul{

    list-style:none;

    padding:0;margin:0;

    }

    li{

    float:left;//浮动多个元素排一行、块元素浮动后转为行内块

    }

     

    勤学似春起之苗,不见其增,日有所长; 辍学如磨刀之石,不见其损,日所有亏!
  • 相关阅读:
    oc对象的内存管理
    OC类的本质,深入探讨,load方法和initialize方法
    OC特有语法:分类category,给NSString增加方法计算字符串中数字的个数
    OC的类的构造方法
    OC的@property 和 @synthesize id
    HTML5 Canvas时间效果
    各浏览器的Hack写法【转】
    你自认为理解了JavaScript?【转】
    八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】
    一些达成共识的JavaScript编码风格约定【转】
  • 原文地址:https://www.cnblogs.com/qiaozhiming123/p/13129982.html
Copyright © 2011-2022 走看看