css float 布局以及其他小技巧总结

这篇博文 前面四个部分是关于css 经典布局 如果你已经知道了 可以直接跳过看第六部分 css 的其他小技巧

1.0 左右居中布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .parent {

            border: 1px solid green;

            margin-left: auto;

            margin-right: auto;

            width:100%;

        }

        .child:nth-child(1) {

            width: 30%;

            background-color: pink;

        }

        .child:nth-child(2) {

            width: 70%;

            background-color: crimson;

        }

        .clearfix:after {

            content: "";

            display: block;

            clear: both;

        }

    </style>

</head>

<body>

    <div class="parent clearfix">

        <div class="child" style="float:left">

            a1

        </div>

        <div class="child" style="float:left">a2</div>

    </div>

</body>

</html>

2.0 左中右布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body,

        html {

            height: 100%;

            padding: 0;

            margin: 0

        }

        .left {

            background: lightblue;

            width: 100px;

            float: left;

            height: 10%;

        }

        .main {

            background: pink;

            height: 10%;

            margin: 0px 100px 0px 100px;

        }

        .right {

            background: lightgreen;

            width: 100px;

            float: right;

            height: 10%;

        }

    </style>

</head>

<body>

    <div class="left">Left</div>

    <div class="right">Right</div>

    <div class="main">Main</div>

</body>

</html>```

3.0 水平居中

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            border: 1px solid red;

            line-height: 24px;

            padding: 8px 0;

        }

    </style>

</head>

<body>

    <div>

    水平居中

    </div>

</body>

</html>

4.0 垂直居中 （两种方法）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>垂直居中第一种方法table自带</title>

    <style>

        .parent {

            border: 1px solid red;

            height: 600px;

        }

        .child {

            border: 1px solid green;

        }

    </style>

</head>

<body>

    <table class="parent">

        <tr>

            <td class="child">

                垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中

            </td>

        </tr>

    </table>

</body>

</html>```


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>垂直居中第二种方法marginautoabsolute</title>

    <style>

        .parent {

            height: 600px;

            border: 1px solid red;

            position: relative;

        }

        .child {

            border: 1px solid green;

            width: 300px;

            position: absolute;

            top: 50%;

            left: 50%;

            margin-left: -150px;

            height: 100px;

            margin-top: -50px;

        }

    </style>

</head>

<body>

    <div class="parent">

    <div class="child">

                垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直

        </div>

    </div>

</body>

</html>

5.0 水平垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            border: 1px solid red;

            line-height: 24px;

            padding: 8px 0;

            text-align: center;

        }

    </style>

</head>

<body>

    <div>

        水平垂直居中

    </div>

</body>

</html>

6.0 其他小技巧

6.1 css 有类似javascript 的console.log 的工具吗？

//用border

div{

border: 1px solid red;

}

6.2 为什么明明在数字1和2之间敲两个空格 但是网页显示出来它们之间 只有一个空格 ？ 那是因为你没有添加 &nbsp (no break space)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>你写的bug</title>

</head>

<body>

    <div>

    1&nbsp;&nbsp;2

   </div>

</body>

</html>

6.3 为什么只有一个阿拉伯数字且已经设定了 字体大小是20 px 但一旦打开开发者工具：显示的字体大小是 28px ？
因为每一种字体被设计时，为了【好看】设计师会给每一种字体一个好看系数 eg：默认的字体时pingfang 那么28px /20px =1.4 这个1.4 就是【好看（字体）系数 】每一种字体都有自己的 【好看系数】
如果不想使用字体设计师给你的【好看系数】一定要用自己的 可以添加一行

line-height： 20px；

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

        div{

            border: 1px solid red;

            font-size: 20px;

        }

    </style>

</head>

<body>

    <div>

        1

    </div>

</body>

</html>

6.4 为什么分别两个span元素之间 看似什么都没有 但游览器 1 和 2 之间确有空隙 ？
  span元素 之间有tab 有回车等都会造成有空格的情况

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        span{

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div>

       <span>1</span>

       <span>2</span>

    </div>

</body>

</html>

6.5 块级元素的高度怎么确定？

    如果div 里 只有一个内联元素  那么div 的高度是由这个内联元素的行高所决定。

    如果div 里有多行，那么就把每一行的行高加起来算。

6.6 姓名怎么和联系方式对齐 ？
    其他的方法：直接用&nbsp ？可以的，不过会受到字体的影响。字体一变， 加的&nbsp 就会变。
     代码解释：代码如果是内联元素要被改变宽度的话， 一定要先写上display：inline-block 。

  text-align: justify; 当有多行字体时，这句话会让强迫症看了之后 非（两）常（边）舒（对）心 （齐）。

    那只有一行的时候 怎么对齐？看上去是多添加了一行。代码
     如下：
     

  span:after{

        content:"";

        display: inline-block;

        width: 100%;

        border: 1px solid pink;

    }
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JS Bin</title>

</head>

<style>

    div {

        border: 1px solid red;

        font-size: 20px;

    }

    span {

        border: 1px solid green;

        display: inline-block;

        width: 4em;

        text-align: justify;

        line-height: 20px;

        height: 20px;

        overflow: hidden;

    }

   span:after{

        content:"";

        display: inline-block;

        width: 100%;

        border: 1px solid pink;

    }

</style>

<body>

    <div>

        <span>姓名</span><br>

        <span>联系方式</span>

    </div>

</body>

</html>

6.7 六个内联元素 怎么写才能没有空隙 ？

    添加 float：left

             clearFix


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        ul{

            margin:0; padding: 0; list-style: none;

        }

        ul > li{

            border: 1px solid red;

            float: left;

        }

        .clearfix :after{

            content: "";

            display:  block;

            clear: both;

        }

    </style>

</head>

<body>

 <ul class= "clearfix">

     <li>选项1</li>

     <li>选项2</li>

     <li>选项3</li>

     <li>选项4</li>

     <li>选项5</li>

     <li>选项6</li>

 </ul>

</body>

</html>

6.8 怎么做 一行和多行文本过长变省略号？

//一行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            border: 1px solid red;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

    </style>

</head>

<body>

    <div>

        s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f

     </div>

</body>

</html>
// css multi line text ellipsis

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            border: 1px solid red;

            display: -webkit-box;

            -webkit-line-clamp:2;

            -webkit-box-orient: vertical;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <div>

        s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f

     </div>

</body>

</html>

6.9 什么情况下margin 会合并以及怎么修改使其正常化？

   如果父元素没有什么东西挡住子元素   那么子元素的边距就会父合并起来 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

          .son {

            border: 15px solid red;

            padding: 10px;

            margin: 10px;

            }

        .dad {

          outline: 1px solid green;

           margin: 15px;

          }

    </style>

</head>

<body>

    <div class="dad">

        <div class="son">

            111

        </div>

    </div>

</body>

怎么修改 ：

第一种添加： 在父元素里添加border -top 和 border - bottom ；
第二种添加： 同样是在 父元素里添加 padding-top

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body {

            border: 1px solid black;

        }

        .son {

            border: 15px solid yellow;

            padding: 10px;

            margin: 10px;

           }

        .dad {

            outline: 1px solid green;

            margin: 15px;

            border-top: 11px solid pink;

            border-bottom: 11px solid pink;

          }

    </style>

</head>

<body>

    <div class="dad">

        <div class="son">

            111

        </div>

    </div>

</body>

</html>

6.10 怎么break out words？
添加一行代码： word-break: break-all;



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>JS Bin</title>

</head>

<style>

    div {

        border: 1px solid red;

        word-break: break-all;

    }

</style>

<body>

    <div>

        1 apppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppple

    </div>

</body>

</html>

6.11 怎么脱离文档流 ？
三种方法：

position：absolute；

float： left；

position：fixed；

cssfloat布局以及其他小技巧的更多相关文章

  1. CSS布局对齐的小技巧

    类似以上这种对齐怎么做? 很简单,上面是的污水开始的位置是由于被"能源种类"顶着,下面没有字怎么办?最差的办法就是用margin-left,因为在不同的机器上,可能会出现兼容性问题 ...

  2. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  3. 关于css布局、居中的问题以及一些小技巧

    CSS的两种经典布局 左右布局 一栏定宽,一栏自适应 <!-- html --> <div class="left">定宽</div> < ...

  4. iOS：小技巧（不断更新）

    记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...

  5. 最强 Android Studio 使用小技巧和快捷键

    写在前面 本文翻译自 Android Studio Tips by Philippe Breault,一共收集了62个 Android Studio 使用小技巧和快捷键. 根据这些小技巧的使用场景,本 ...

  6. 开发必备的Windows小技巧

    在Windows中我们经常会遇到各种小问题,而这些小问题又确实在影响着工作效率,如果能解决这些小问题,那么就能在一定程度上提高工作效率,保证心情愉悦.今天我就来分享一下几个自认为比较有用的小技巧. 保 ...

  7. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  8. html/css/js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

  9. Chrome 35个开发者工具的小技巧

    来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览 ...

随机推荐

  1. JavaScript日常学习6

    JavaScript的运算符.比较符.条件语句.循环语句.跳出循环(break.continue).标签 JavaScript的运算符.比较符.条件语句.循环语句.跳出循环(break.continu ...

  2. 阶段3 2.Spring_08.面向切面编程 AOP_7 通用化切入点表达式

    下面配置了通用的表达式,,上面的四个就不用再配置那么长 索罗的切入点表达式了. 节省了每次都要写一长段表达式的过程 写在一个aop:aspect这个切面下面就只能当前切面用 写在切面里面 运行测试 挪 ...

  3. 阶段3 2.Spring_03.Spring的 IOC 和 DI_12 注入集合数据

    再复制一份,改名3 常用的注入方式,这里选择set saveAccount方法输出所有的对象 map需要导包 配置xml 集合类型的值配置方式 在property标签里面再写标签 这里选择array. ...

  4. UniEAP Platform V5.0建库

    create tablespace platform datafile 'platform.dbf' size 100M reuse autoextend on next 50M; . . drop ...

  5. Kafka集群搭建和配置

    Kafka配置优化 https://www.jianshu.com/p/f62099d174d9 1.安装&配置 下载tar包 解压后即可使用 修改配置文件 将server.propertie ...

  6. 【VS开发】ActiveX开发注意事项

    [VS开发]ActiveX开发注意事项 标签:[VS开发] 注意:必须在工程的app文件的InitInstance()中加入如下代码,否则动态创建控件不会成功: AfxEnableControlCon ...

  7. 使用Spring Initializr初始化SpringBoot项目

    虽然SpringBoot CLI消除了不少设置工作,但如果你更倾向于传统的Java项目结构,那你应该看看Spring Initializr. Spring Initializr从本质上来说就是一个we ...

  8. Android自动化测试（UiAutomator）

    一.一个BUG引发的问题   如果研发过程中有一个BUG:“不断的切换手机语言出现花屏现象”.这个问题我们如何验证呢?我想,最好的方式应该是自动化测试.    那么,自动化测试可以完成哪些任务呢?  ...

  9. python 并发编程 同步调用和异步调用 回调函数

    提交任务的两张方式: 1.同步调用 2.异步调用 同步调用:提交完任务后,就在原地等待任务执行完后,拿到结果,再执行下一行代码 同步调用,导致程序串行执行 from concurrent.future ...

  10. xc语言l博客作业03

    问题 答案 这个作业属于那个课程 c语言程序设计ll 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/8719 我在 ...