布局:
默认文档流:
从上到下从左到右的基础文档流
1.display:
inline:将块级元素转换为行内元素
block:将行内元素转换为块级元素
inline-block:将当前元素转换为兼具行内和块级元素特性的元素
2.浮动布局
1. float
含义:浮动布局,使用后会使元素向左或者向右移动
取值:
left 左浮动
right 右浮动
none 【默认】不浮动
浮动元素对于文字不会遮挡
块级元素设置了浮动属性之后失去了独占一行的特性
行内元素设置了浮动属性之后,可以设置宽高属性
中间的元素要写在最后面
**特点:**
1、使用浮动的元素会脱离文档流【置物架】
2、使用浮动的元素的宽、高度默认由内容决定,可设置宽、高
3、原先所在位置就会被其他块元素填充
4、浮动元素在一行中依次排列,当一行无法容纳的时候会自动换行
**浮动何时停止?**
1.遇到父级边框时停止浮动
2.遇到其他浮动元素时停止浮动
清除浮动:
clear:
left
right
both
1.在所有浮动元素之后添加一个块级元素
给块级元素设置清除浮动属性
2.给所有浮动元素的父元素添加::after{
content:'';
display:block;
clear:left
}
1) 七列布局
2) nav的伪元素竖线
拓展
如何让元素使用margin:0 auto,水平居中
只对块级元素生效,所以margin:0 auto的用法分为三种,分别为
块级元素:div、h1~h3、ul
/*对于块级元素,只需要设置width*/
div{
width: 200px;
background-color: #ccc;
margin:0 auto;
}
行内元素:span、a
/*对于行内元素,需要先设置为块级元素,再加宽度*/
span{
display: block;
width: 100px;
background-color: red;
margin:0 auto;
}
行内块元素:button、img、input、textarea
/*对于行内块级元素,需要设置为块级元素,可以不用设置宽度*/
input{
display: block;
margin:0 auto;
}