css中的各类问题
1、水平垂直居中
一.水平居中
(1)行内元素解决方案
只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:
.parent {
text-align:center;
}
(2)块状元素解决方案
.item {
margin: 10px auto;
}
(3)多个块状元素解决方案
将元素的display属性设置为inline-block,并且把父元素的text-align属性设置为center即可:
.parent {
text-align:center;
}
(4)多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局,只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:
.parent {
display:flex;
justify-content:center;
}
二.垂直居中
(1)单行的行内元素解决方案
.parent {
background: #222;
height: 200px;
}
/* 以下代码中,将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a {
height: 200px;
line-height:200px;
color: #FFF;
}
(2)多行的行内元素解决方案
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果,如下:
.parent {
background: #222;
width: 300px;
height: 300px;
/* 以下属性垂直居中 */
display: table-cell;
vertical-align:middle;
}
(3)已知高度的块状元素解决方案
.item{
top: 50%;
margin-top: -50px; /* margin-top值为自身高度的一半 */
position: absolute;
padding:0;
}
三.水平垂直居中
(1)已知高度和宽度的元素解决方案1
这是一种不常见的居中方法,可自适应,比方案2更智能,如下:
.item{
position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}
(2)已知高度和宽度的元素解决方案2
.item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
}
(3)未知高度和宽度元素解决方案
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
}
(4)使用flex布局实现
.parent{
display: flex;
justify-content:center;
align-items: center;
/* 注意这里需要设置高度来查看垂直居中效果 */
background: #AAA;
height: 300px;
}
2、自适应
3、定位问题
4、清除浮动
(1).使用空标签清除浮动 clear:both(理论上能清楚任何标签,但是增加了无意义的标签)
添加新的节点,使用clear:both方法
选择符{
clear:both;
}
(2).使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
在父节点上设置一个新类名
选择符:{
overfloat:auto;
}
(3).是用afert伪元素清除浮动(用于非IE浏览器)
选择符:after{
content:" ";
clear:both;
height:0;
display:block;
visibility:hidden;
}
css中的各类问题的更多相关文章
- 讨论CSS中的各类居中方式
今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...
- CSS中的各类选择器
属性选择器 结构性伪类选择器 UI状态伪类选择器 CSS其他选择器
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- CSS中一些常见的兼容性问题
CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
随机推荐
- Cocos2d-x中锚点的介绍
什么是锚点? 只需要记住一句话就可以,锚点就是你指定的那个坐标究竟是图像的哪个点,也就是你setPosition的坐标 eg: 新建工程:在HelloWorld中写上如下代码: CCSprite * ...
- javascript(9)
js中访问函数 p1.abc() p1["abc"]; js中基于对象 == js面向对象
- JS事件派发器EventEmitter
原文地址:http://zhangyiheng.com/blog/articles/js_event_mitter.html 需求 随着Browser客户端JS越来越复杂,MVC(Client端)设计 ...
- 网络编程学习笔记-linux常用的网络命令
网络参数设置命令 所有时刻如果你想要做好自己的网络参数设置,包括IP参数.路由参数和无线网络等,就得要了解下面这些相关的命令才行.其中Route及ip这两条命令是比较重要的.当然,比较早期的用法,我们 ...
- 关于在linux python源文件头部添加 “#!/usr/bin/env python” 不能直接运行的问题
如果环境变量设置正确 如果文件是从windows拷贝到linux中的 可能是换行符造成的.试试dos2unix命令,或相似的命令,把dos格式的换行符转为unix格式.
- highcharts 图例全选按钮方法
$('#uncheckAll').click(function(){ var chart = $('#container').highcharts(); var series = chart.seri ...
- bzoj 4515: 游戏 树链剖分+线段树
题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=4515 题解: 先让我%一发lych大佬点我去看dalao的题解 讲的很详细. 这里纠正一 ...
- Spring 3.1新特性之三:Spring对声明式缓存的支持
一.概述: Spring 3.1 引入了激动人心的基于注释(annotation)的缓存(cache)技术,它本质上不是一个具体的缓存实现方案(例如EHCache 或者 OSCache),而是一个对缓 ...
- Redis多个数据库
注意:Redis支持多个数据库,并且每个数据库的数据是隔离的不能共享,并且基于单机才有,如果是集群就没有数据库的概念. Redis是一个字典结构的存储服务器,而实际上一个Redis实例提供了多个用来存 ...
- 11 Vue学习 headtop
1: HeaderTop.vue : 面包屑:el-breadcrumb 定义面包屑, separator是分隔符. el-breadcrumb-item: 是面包屑中用 分隔符 分开的多 ...