浮动 :就是使用float样式,使元素脱离文档流
可选值:
none 默认值,不设置浮动
left 向左浮动
right 向右浮动
设置浮动特点
1、一旦元素设置了浮动,元素就会脱离文档流,它原来在文档流得位置,
就会被它下面的元素挤上来
2、如果浮动元素它上面的元素不浮动,则浮动元素无法上移
3、浮动元素也不会超过它前面浮动元素
4、浮动元素不会超出它的父元素
当浮动元素遇到了文字,浮动元素不会覆盖文字,
文字会环绕在浮动元素的周围,从而有文字环绕图片的效果
这也是设置浮动最开始的想要的效果
当元素设置浮动以后,会完全脱离文档流,元素脱离文档流后,
元素原来在文档流得特点,就都没有了,也就是说不再区分块,行内,行内块
数据展示效果比较好
1、用table创建表格
2、tr表示行,一个tr表示一行
3、用td表示单元格,一个td表示一格
4、th特指表头单元格内容
5、rowspan 用来设置行合并
6、colspan 用来设置列合并
样式:
1、自带属性 border="1" align="center" width='50%' height='400px'
2、css设置 比较常用
可以使用th标签来表示表头中的内容,
它的用法和td一样,不同的是它会有一些默认效果加粗
需求一、设置表格的宽度,表格居中,加边框 */
table {
需求三:设置背景色样式
background-color: orange;
width: 50%;
margin: 50px auto;
border: 5px solid red;
方法一:border-spacing:0px ;
方法二:border-collapse [kə'læps] 可以用来设置表格的边框合并
如果设置了边框合并,则border-spacing自动失效
边框线间距变为0,双线变单线
border-spacing: 0;
设置单线
border-collapse: collapse;
}
需求二: 设置表格的边框,要单线边框
th,
td {
border: 1px solid black;
}
或
tr {
height: 50px;
}
需求四:设置隔行变色
tr:nth-child(2n + 1) {
background-color: pink;
}
需求五: 鼠标移入到tr以后,改变颜色
tr:hover {
background-color: cornflowerblue;
}
需求六:调整td文字在表格中的位置 vertical-align、text-align
th,
td {
text-align: center;
vertical-align: middle;
}
有一些情况下表格是非常的长的,
这时就需要将表格分为三个部分,表头,表格的主体,表格底部
在HTML中为我们提供了三个标签:的中间
如果表格中没有写tbody,浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
概念
一般情况下,我们是不给父元素设置高度的,
让其内部的子元素自动撑开父元素的高度,
这样父元素的高度就可以随着子元素高度的变化而变化 ,.
然而子元素若设置浮动,就会脱离文档流,也就撑不开父元素的高度
从而导致父元素的高度丢失,影响整个页面布局,这就叫高度塌陷
解决方案
给父元素设置自己的高度, 但不推荐使用
clear可以用来清除其他浮动元素对当前元素的影响
可选值:
none,默认值,不清除浮动
left,清除左侧浮动元素对当前元素的影响
right,清除右侧浮动元素对当前元素的影响
both,清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动
可以在浮动元素下面添加一个空白的块元素,由于这个块元素没有浮动,还在文档流中
可以给这个块元素设置清楚浮动,让其撑开父元素的高度
缺点是页面多了一个空白的结构
可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动,
这样做和添加一个div的原理一样,可以达到一个相同的效果,
而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用
页面元素中的隐含属性:Block Formatting Context 即块格式化上下文,简称BFC
当开启元素的BFC以后,元素会变成一个独立的布局区域,不会在布局上影响到外面的元素
BFC 理解为一个封闭的大箱子,箱子内部的元素不会影响到外部。
开启BFC后,元素将会具有如下的特性:
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素(可解决高度塌陷)
BFC是元素自带的一个属性,默认是关闭的状态,一旦开启了,这个元素就会成为一个独立区块
具有一些特点,这些特点,可以帮助我们解决一些问题
1、开启BFC的元素,垂直方向外边距不会重叠
2、开启BFC的元素,不会被浮动元素覆盖
3、开启BFC的元素,会包含住浮动元素,可以解决高度塌陷问题
如何开启BFC
1、设置浮动
可以解决高度塌陷问题,但宽度会丢失,且页面布局依然影响
2、将元素转成行内块
可以解决高度塌陷,但宽度会丢失,且有三像素问题
3、overflow属性 非visible值
副作用最小,建议使用
4、开启绝对定位
可以解决高度塌陷问题,但宽度会丢失,且页面布局依然影响
1.设置元素浮动(不推荐)
- 使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移,不能解决问题
2.设置元素为inline-block(不推荐)
- 可以解决问题,但是会导致宽度丢失,不推荐使用这种方式
3.将元素的overflow设置为一个非visible的值
4.设置元素绝对定位(暂时没学习)
元素也会脱离文档流,虽然可以撑开父元素,但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移,不能解决问题
推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式。