CSS的两种经典布局

  • 左右布局

  • 一栏定宽,一栏自适应
    <!-- html -->
<div class="left">定宽</div>
<div class="right">自适应</div>
<!-- css -->
.left{
width: 200px;
height: 600px;
float: left;
display: table;
text-align: center;
line-height: 600px;
}
.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}

  • 利用绝对定位实现
    <!-- html -->
<div class= "left">
</div>
<div class= "right">
</div>
<!-- css-->
.left{
position:absolute;
left:0;
width:200px;
}
.right{
margin-left:200px;
}

  • 左中右布局

  • 利用绝对定位实现
    <!-- html-->
<div class= "left">
</div>
<div class= "main">
</div>
<div class= "right">
</div>
<!-- css-->
.left{
width:200px;
background-color:yellow;
position:absolute;
top:0;
left:0;
}
.main{
margin-left:200px;
margin-right:300px;
}
.right{
width:300px;
background-color:orange;
position:absolute;
top:0;
right:0;
}

  • 利用浮动定位实现
    <!-- html-->
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
<!-- css-->
.left{
width:300px;
background-color:yellow;
float:left;
}
.right{
width:200px;
background-color:orange;
float:right;
}
.main{
margin-left:300px;
margin-right:200px;
}

  • 圣杯布局,两边定宽,中间自适应
    <!-- html-->
<div class="container">
<div class="main col">Main</div>
<div class="left col">Left</div>
<div class="right col">Right</div>
</div>
<!-- css-->
.col{
float: left;
position:relative;
}
.container{
padding:0 200px 0 100px;
}
.left{
left:-100px;
width: 100px;
height:100%;
margin-left: -100%;
background: red;
}
.main{
width:100%;
height: 100%;
}
.right{
right:-200px;
width:200px;
height:100%;
margin-left: -200px;
background: yellow;
}

  • 双飞翼布局
    <!-- html-->
<div class="container">
<div class="left col ">Left</div>
<div class="main col ">
<div class="main_inner">Main</div>
</div>
<div class="right col ">Right</div>
</div>
<!-- css-->
.col{
float: left;
}
.main{
width:100%;
height:100%;
}
.main_inner{
margin:0 200px 0 100px;
}
.left{
width: 100px;
height: 100%;
margin-left: -100%;
background: red;
}
.right{
height:100%;
width:200px;
margin-left: -200px;
background: yellow;
}

CSS居中问题

  • 水平居中

  • 对于行内元素(inline):text-align: center;
    <!-- html -->
<div>
<span >kaka</span>
</div>
<!-- css -->
div {
text-align:center
}

  • 对于块级元素(block):
    1.给此块级元素设置宽度
    2.margin:0 auto;
    <!-- html -->
<div class="parent">
<div class="child">kaka</div>
</div>
<!-- css -->
.parent {
width:1002px;
}
.child {
width:50%;//也可以是固定像素
margin:0 auto;
}

  • 垂直居中

  • 行高与高度一致使其居中,适用于只有一行文字的情况
    <!-- html -->
<div class="parent">
<div class="child">kaka</div>
</div>
<!-- css -->
.parent {
height:1002px;
line-height:1002px;
}

  • 水平垂直均居中

  • 已知宽高,给负margin
    <!-- html -->
<div class="parent">
<div class="child">kaka</div>
</div>
<!-- css -->
.parent {
position: relative;
}
.child {
position: absolute;
width:1002px;
height:828px;
top: 50%;
left: 50%;
margin-top:-414px;
margin-left:-501px;
}

  • 未知宽高,transform方案
    <!-- html -->
<div class="parent">
<div class="child">kaka</div>
</div>
<!-- css -->
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

CSS的一些小技巧

  • 请写出「姓名」与「联系方式」两端对齐的例子
<!-- html -->
<span>姓名</span>
<span>联系方式</span>
<!-- css -->
span{
line-height:20px;
font-size:20px;
height:20px;
overflow:hidden;
}
span::after{
content: '';
display: inline-block;
width: 100%;
}
  • 文本内容过长如何变成省略号?
    1 一行文本过长,只需要对该div作以下操作:
<!-- css -->
div{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
2 多行文本超出,如:在第二行后省略:
<!-- css -->
div{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
  • 如何使固定高度的div里面的文字垂直居中?

1.先确定行高 2.再用padding补全高度。这种写法的好处是在文字增减过程中不会出现bug。
例:一个高 40px 的 div,里面的文字垂直居中

<!-- css -->
div{
line-height:20px;
padding:10px 0;
}
  • 使该元素变大1.2倍
    transform: scale(1.2);
  • 动画过渡效果
    transition: all 0.3s;

关于css布局、居中的问题以及一些小技巧的更多相关文章

  1. CSS布局——居中

    参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...

  2. css学习の第六弹—样式设置小技巧

    一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...

  3. CSS布局---居中方法

    在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...

  4. CSS布局居中

    1.把margin设置为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效.

  5. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  6. CSS中的一下小技巧2之CSS3动画勾选运用

    使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...

  7. CSS 布局实例系列(一)总结CSS居中的多种方法

    使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...

  8. css布局之居中

    CSS布局之居中 本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法 水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设 ...

  9. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

随机推荐

  1. 简单认识java enum枚举

    什么是枚举 枚举是java5中新增的特性,他是一个特殊的数据类型,他的特殊性在于他既是一种类类型,又比类类型多了安全性,简洁性,便捷性.java枚举类型是功能十分强大齐全的类,功能比其他语言中的对等物 ...

  2. Springboot循环依赖实践纪实

    测试的Springboot版本: 2.6.4,禁止了循环依赖,但是可以通过application.yml开启(哈哈) @Lazy注解解决循环依赖 情况一:只有简单属性关系的循环依赖 涉及的Bean: ...

  3. linux下的硬盘分区、格式化、挂载

    linux下的MBR(msdos)分区.格式化.挂载 在linux下,需要使用一块硬盘. 需要进行以下四步: 识别硬盘-----分区规划-----格式化-----挂载 步骤一:分区规划 MBR模式分区 ...

  4. Sublime Text 3 build 3103 注册码

    分享几个ST3的注册码,第一个我注册到自己电脑上,亲测可用,剩余几个没有测试.→原文链接 -– BEGIN LICENSE -–Michael BarnesSingle User LicenseEA7 ...

  5. OpenCascade极简环境搭建(QT环境)

    现在网上关于OpenCascade(OCCT)的环境搭建几乎都是下载源码,然后实时MinGW来编译生成源码.但是,官方有提供Windows平台下的可执行文件,如果想快速了解OpenCascade(OC ...

  6. LGP3703题解

    不会数据结构石锤了/kk 题意清晰. 我们看到 \(1\) 操作比较奇怪,考虑从 \(1\) 操作入手. 设 \(f_u\) 为 \(u\) 到根节点一共有多少种颜色,我们使用树剖来维护这个东西. 考 ...

  7. 【工程应用五】 opencv中linemod模板匹配算法诸多疑惑和自我解读。

    研究这个前前后后也有快两三个月了,因为之前也一直在弄模板匹配方面的东西,所以偶尔还是有不少朋友咨询或者问你有没有研究过linemod这个算法啊,那个效率啥的还不错啊,有段时间一直不以为然,觉得我现在用 ...

  8. Linux 查询文件内容重复数 uniq、sort命令

    前提:uniq只能查询数据相邻的重复次数,而sort可以查询乱序的重复次数. 原谅我,以下内容都是复制菜鸟驿站的!!! Linux uniq 命令用于检查及删除文本文件中重复出现的行列,一般与 sor ...

  9. 使用数据库连接工具DBeaver连接H2数据库

    H2数据库第一次听说,学习了. H2数据库自带了一个浏览器web操作,但是非常的不好用,用DBeaver看着好用多了. 1.点击带+的连接图标 2.选择ALL点击H2 Embedded.(如果本地没有 ...

  10. KestrelServer详解[2]: 网络链接的创建

    <注册监听终结点(Endpoint)>已经详细讲述了如何使用KestrelServer,现在我们来简单聊聊这种处理器的总体设计和实现原理.当KestrelServer启动的时候,注册的每个 ...