XZ_CSS之CSS布局- float属性/position属性、标签的居中
来源:互联网 发布:网易公开课mac版 编辑:程序博客网 时间:2024/06/05 22:59
默认情况下,所有的网页标签都在标准流布局中
从上到下,从左往右
脱离标准流的方法有
float属性
position属性 和 left、right、top、bottom属性
CSS布局 - float属性
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
float属性的常用取值有:
值描述left脱离标准流,浮动在父标签的最左边right元素向右浮动。none默认值。元素不浮动,并会显示在其在文本中出现的位置。inherit规定应该从父元素继承 float 属性的值。 任何一种类型的标签,一旦脱离标准流,就会被强制转为行内-块级标签
<styletype="text/css">#main{
width:400px;
height:200px;background-color: red;
}
.test1{
background-color: green;
/*浮动*/
float:left;
width:80px;
height:50px;
}
.test2{
background-color: blueviolet;
float:right;
width:50px;
}
.test3{
background-color: powderblue;
}
</style>
<divid="main">
<divclass="test1">1</div>
<divclass="test2">2</div>
<divclass="test3">3</div>
</div>
CSS布局 - position属性
position 属性规定元素的定位类型。子标签相对于父标签的定位。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
值描述absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit规定应该从父元素继承 position 属性的值。/*子绝父相:子标签绝对定位,父标签相对定位*/
<style>
#main{
background-color: red;
margin:60px;
width:400px;
height:200px;
position:relative;
}
.test1{
background-color: greenyellow;
position:absolute;
/*子绝父相:子标签绝对定位,父标签相对定位*/
/*定位*/
/*left: 20px;
top: 20px;*/
right:0px;
bottom:0px;
}
</style>
<divid="main">
<divclass="test1">2121</div>
</div>
<style>
.test2{
background-color: paleturquoise;
/*停留在浏览器的底部*/
position:fixed;
bottom:0px;
width:100%;}
</style>
<divclass="test2">
相对浏览器进行定位
</div>
标签的居中
水平居中和垂直居中
1>所有的标签水平居中
行内标签和行内-块级标签:在父标签中设置text-align: center;
块级标签:在自身设置margin: auto;
2>所有的标签垂直居中
行内标签和行内-块级标签:在父标签中设置line-height: 父视图的高度;
块级标签:
父视图中设置position: relative;
自身中设置position: absolute;
left: 50%;
top: 50%;
<!--平移-->
transform: translate(-50%,-50%);
<style>
#main{
width:500px;
height:200px;
background-color: palevioletred;
/*让内容居中:不能作用到块级标签上*/
text-align:center;
/*
垂直居中:如果不设置行高,默认是内容的高度,如果设置了行高等于父标签自身的高度,里面的内容始终都是垂直居中的
*/
line-height:200px;
position:relative;
}
span{
background-color: palegreen;
}
.test{
width:200px;
height:100px;
/*垂直居中*/
line-height:100px;
background-color: palegoldenrod;
/*margin-left: auto;
margin-right: auto;*/
margin:0auto;
position:absolute;
left:50%;
top:50%;
/*平移*/
transform: translate(-50%,-50%);
}
</style>
<divid="main">
<!--行内标签-->
<span>行内标签</span>
<!--行内-块级标签-->
<!--<button>行内-块级标签</button>-->
<!--块级标签-->
<divclass="test">块级标签</div>
</div>
阅读全文
0 0
- XZ_CSS之CSS布局- float属性/position属性、标签的居中
- CSS布局---display position float属性谈起
- CSS布局display,position, float属性
- CSS布局-----display,position, float属性
- CSS布局之【Position】属性
- css的float,position属性详解
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- css布局-从display,position,float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- CSS布局 ——从display,position, float属性谈起
- html5中新增两个表单属性,分别autocomplete和novalidate属性
- jmeter 请求发送加密参数(其中包含Json嵌套)
- $.post()方法
- nginx安装以及注意事项
- 【USACO TRAINING】货币系统
- XZ_CSS之CSS布局- float属性/position属性、标签的居中
- hadoop数据类型与java 数据类型的转换
- bind&call&apply
- webstom新增vue模板
- 最新Android Glide4.0加载Gif图片到ImageView
- 华为2018校招第二题 求去重后的最大整数
- $.ajax()方法
- 方法注释模板
- Vue使用经验小结