关于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 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...
随机推荐
- 安装java环境与eclipse
一.今天安装了java环境和eclipse 二.大道至简学了前三章(前两章)问题不大还好理解 第三章有些东西很懵 1.进入网址www.oracle.com,点击resource(资源) 点击softw ...
- Qt:QNetworkAccessManager
0.说明 QNetworkAccessManager允许应用发送Request并接受回应. 网络访问API是围绕一个QNetworkAccessManager对象构建的,该对象保留了所有它发送的请求的 ...
- Java:List(一)——概述
说明 在集合类中,List是最基础的一种集合--有序List. List的行为和数组几乎相同:List内部按照放入元素先后顺序存放,每个元素都可以通过索引确定自己的位置,List的索引和数组相同,都是 ...
- 初识html及网络爬虫概念
网络爬虫 HTML超文本标记语言 HTTP协议 简单的网络请求 python模块模拟浏览器发送请求 爬虫小案例 爬虫简介 我们一般情况 都是通过浏览器正常访问服务端获取资源浏览器展示给用户看 爬虫 模 ...
- qyqt5(一)
一.PyQt窗口处理 1. 第一个PyQt窗口 from PyQt5.QtWidgets import QApplication,QWidget import sys # 1.创建应用程序 app = ...
- ubuntu 学习中的坑-2021-11-22
安装ssh-server服务 查看是否安装ssh服务 #dpkg -l | grep ssh 安装ssh-server服务 #sudo apt-get install openssh-server 然 ...
- Kubernetes系列(五) Ingress
作者: LemonNan 原文地址: https://juejin.im/post/6878269825639317517 Kubernetes 系列 Kubernetes系列(一) Pod Kube ...
- 使用flask进行mock接口
在测试日常过程中,我们经常会遇到因为环境问题,或者是因为上下游,前后端开发进度不一,提测时间不一等情况.这时候我们可以通过mock的方式去完成一些操作.今天给大家分享一个通过flask去mock接口, ...
- SpringBoot整合RabbitMQ-5.7-课堂笔记-02
- Jquery.Datatables dom表格定位 (转)
Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角. 这些控件在 ...