关于css布局、居中的问题以及一些小技巧
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布局、居中的问题以及一些小技巧的更多相关文章
- CSS布局——居中
参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...
- css学习の第六弹—样式设置小技巧
一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...
- CSS布局---居中方法
在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...
- CSS布局居中
1.把margin设置为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效.
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
- CSS 布局实例系列(一)总结CSS居中的多种方法
使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...
- css布局之居中
CSS布局之居中 本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法 水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设 ...
- 主流 CSS 布局(水平居中、垂直居中、居中 )
什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...
随机推荐
- 深入Mybatis框架
深入Mybatis框架 学习了Spring之后,我们已经了解如何将一个类作为Bean交由IoC容器管理,也就是说,现在我们可以通过更方便的方式来使用Mybatis框架,我们可以直接把SqlSessio ...
- C语言刷二叉树(一)基础部分
二叉树基础部分 144. 二叉树的前序遍历 方法一:递归 /** * Definition for a binary tree node. * struct TreeNode { * int val; ...
- k8s 中 nfs作为存储的三种方式
1.安装nfs服务.直接给命令 yum install nfs-utils vim /etc/exports /data/k8s/ 172.16.1.0/24(sync,rw,no_root_squa ...
- 操作系统以及python的简介
今日笔记 操作系统 文件的概念 编程语言的发展史 编程语言的分类 python简介 python解释器的版本说明 内容详细 操作系统 操作系统(Operating System,简称OS),是管理 ...
- CSS样式下划线
样式之文字下划线 第一 text-decoration: underline; 缺点是不好修改颜色 不要修改下划线的位置,优点就是一行代码解决 可以使用line-height: 20px; 也能调整位 ...
- Kubernetes系列(三) Deployment
作者: LemonNan 原文地址: https://juejin.im/post/6865672466939150349/ Kubernetes 系列 Kubernetes系列(一) Pod Kub ...
- 翻译 | Kubernetes 将改变数据库的管理方式
作者:Álvaro Hernández 当技术决策人考虑在 Kubernetes 上部署数据库时,面临的第一个问题就是:"Kubernetes 有应对有状态服务的能力吗?"多年来的 ...
- c++ set与unordered set的区别
c++ std中set与unordered_set区别和map与unordered_map区别类似,其底层的数据结构说明如下: 1.set基于红黑树实现,红黑树具有自动排序的功能,因此map内部所有的 ...
- C++ 接口的实现方式
一.接口的定义 有时候,我们得提供一些接口给别人使用.接口的作用,就是提供一个与其他系统交互的方法.其他系统无需了解你内部细节,并且也无法了解内部细节,只能通过你提供 给外部的接口来与你进行通信.根据 ...
- Java基础——ArrayList
Java基础--ArrayList 作用:提供一个可变长度的集合,底层实际上是一个可变长度的数组 格式:ArrayList <E> arr=new ArrayList<>(); ...