2-1CSS布局的补充
居中
居中
行内标签
从2013年开始创新互联专注于”帮助中小企业+互联网”, 也是目前成都地区具有实力的互联网服务商。团队致力于为企业提供--站式网站建设、移动端应用( H5手机营销、成都app软件开发、微信开发)、软件开发、信息化解决方案等服务。
上图:行内标签在剧中的位置显示
上图:行内-块级标签也是可以被居中的
居中
块级标签
代码:新增块级标签测试居中
上图:块级标签因为是占据整行的特性,会根据设计的宽度从最左边适应,没有被居中。
居中
块级标签
代码:p标签设计新增外边距 margin: 0 auto; 表示上下距离为0,左右的宽度为auto。
上图:这样p标签根据父级标签(div)来自动适应左右两边的距离。
居中
行内标签
代码:div设计新增line-height: 250px; 与height 250px相同; 默认标签垂直的距离是字体本身的距离,所以我们将标签的行高(line-height)与height同样高,span标签就居中了(字体居中)
居中
块级标签
代码:块级标签使用line-height: 250px;
上图:
该块级标签优先使用了p标签的设计,背景颜色为金色;
宽度为200px(如果没设置会继承父集标签的宽度);
高度默认为字体的高度(不会继承父级标签的高度height: 250px;),但是却继承了行高line-height: 250px;,所以跟红色部分一样高,这样实现了垂直居中的效果;
最后p标签又设计了外层边距margin: 0 auto;,实现了水平居中的效果。
line-heigth是行高的意思,它决定了元素中文本内容的高度,height则是定义元素自身的高度,行高等于元素高,可将文本内容垂直居中。
居中
块级标签
代码:p标签设计中新增height: 40px;(元素高度)
上图:元素的高度改变了,文本的高度没有改变。
p{
background-color: goldenrod;
width: 200px;
height: 40px;
line-height: 40px;
margin: 0 auto;
}
代码:在p标签设计中新增line-height: 40px;
上图:块级标签当前的元素和文本高度都一致了。
Title
代码:添加input行内-块级标签
上图:图中可以看到我们在输入框中输入内容后,内容与边框非常紧凑。
Title
代码:设计input标签的内边距
上图:明显的看到内容与边框之间的距离变大了。
input{
width: 500px;
height: 50px;
padding: 5px;
}
上图:当前的高度和宽度变大了
input{
width: 500px;
height: 50px;
padding: 5px;
box-sizing: border-box;
}
代码:新增box-sizing: border-box;
上图:可以看到盒子的内容尺寸变小了;在不改变盒子外边距的宽度和高度的情况,把空间往里挤。
浮动
默认情况下,所有的网页标签都在标准流布局中
从上到下,从左到右
脱离标准流的方法有
position属性 和 left、right、top、bottom属性
float属性
float属性的常用取值有
left:脱离标准流,浮动在父标签的最左边
right:脱离标准流,浮动在父标签的最右边
Title
- 123123123
- 123123123
- 123123123
- 123123123
上图:列表的默认样式
ul li{
float: left;
}
代码:让列表脱离标准布局,浮动在页面左边;(右边就改成:float: right;)
ul{
display: inline-block;
background-color: red;
}
ul li{
float: right;
}
代码:
将快标签li改成行内-块级标签display: inline-block;
将float: right;改成右侧浮动
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
position
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
Title
123123
代码:想让span标签浮动在父集标签(div)的left: 20px; top: 20px;位置。
上图:
因为margin: 50px;,我们红色的div标签位置变了;
然后想让span浮动在父标签(div)的left: 20px; top: 20px;位置,但是因为父标签默认position是static,字标签(span)无法定位父标签(div),需要将父标签的position改成relative才可以。
Title
123123
代码:修改为 position: relative;
上图:成功浮动到父标签的指定位置。
span{
background-color: green;
position: absolute;
right: 0;
bottom: 0;
}
代码:浮动到右下角
网站标题:2-1CSS布局的补充
本文路径:http://pwwzsj.com/article/iiosoj.html