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. LoadRunner参数化使用mysql数据源

    因为默认是没有mysql驱动的,因此需要在网上下载一个mysql驱动 1. 在网上下载一个是MYSQL数据库的ODBC驱动程序:mysql-connector-odbc-3.51.20-win32.e ...

  2. Selenium 2自动化测试实战7(定位元素)

    一.xpath定位 1. 绝对定位 举例用百度输入框和搜索按钮 eg:find_element_by_xpath("/html/body/div/div[2]/div/div/div/fro ...

  3. Linq之旅:Linq入门详解(Linq to Objects)(转)

    http://www.cnblogs.com/heyuquan/p/Linq-to-Objects.html 示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细 ...

  4. MySQL MGR 5.7.22 on centos 6.3 单主/多主搭建测试

    搭建Mysql Group Replication本次搭建采用3个实例,三个服务器,同一个网段,MGR的参数配置在配置文件中添加.注意通讯端口号的配置,它用于组成员之间的通讯使用请确定当前MySQL版 ...

  5. 人工智能AI------有限状态机、分层状态机、行为树

    https://www.cnblogs.com/zhanlang96/p/4793511.html 人工智能遵循着:感知->思考->行动决策方法:有限状态机(Finite-State Ma ...

  6. nginx配置thinkphp项目(nginx下去掉index.php)

    server { listen 80; server_name xxxxx; root "/www/public"; location / { index index.html i ...

  7. js中dom选择器

    document,getElementById("demo");    //通过id查询节点 . document.getElementsByTagName("div&q ...

  8. aliyun搭博客从零到一

    一.基础环境 lnmp      1台负载均衡SLB     2台ECS    1台 RDS  二.lnmp搭建 1.#配置nginx的yum仓库 2.#yum install  -y  nginx ...

  9. word2vec高效训练方法

    在word2vec原理中讲到如果每个词向量由300个元素组成,并且一个单词表中包含了10000个单词.回想神经网络中有两个权重矩阵——一个在隐藏层,一个在输出层.这两层都具有300 x 10000 = ...

  10. USACO刷题索引

    序 在距离CSP2019还有41天的国庆备战中,考了一场画风非常奇特的六校联赛,然后被教练建议刷一下这个巩固代码实现能力,然后就来了||ヽ(* ̄▽ ̄*)ノミ|Ю. 这个网站还是挺好玩儿的吧,刚开始各种 ...