浮动、定位

奋飛

发布于 2021-08-30 11:30:30

2.1K0

发布于 2021-08-30 11:30:30

文章被收录于专栏：Super 前端

盒模型

盒模型默认指块级元素；行内元素默认不能设置width、height、margin 行内元素==>块级元素: display:block 块级元素==>行内元素: display:inline 注意： 1. disply:inline-block 行内块元素 2. position:absolute|fixed 会将元素变为行内块

使用盒模型

创建浮动盒

可以使用float属性创建浮动盒（脱离文本流），浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。

值	说明
left	移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界
right	移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的右边界
none	元素位置固定

注意事项：

同级的一个元素浮动其他的元素也要浮动
浮动脱离文本流，父元素的宽、高不会被撑开
子元素浮动父元素一定要清除浮动
浮动的行内元素可以设置宽、高

示例：父元素不设置高、宽

<div class="content">
    <div style="float: left;">div>
    <div style="float: right;">div>
div>

浮动产生负作用

边框不能撑开
背景不能显示：如果父级设置了背景，而父级不能被撑开，所以导致不能显示。
margin padding不能按设置值正常展示：

清除浮动方法

浮动元素的同级元素添加一个空标签

.clear{clear: both}
<div class="clear">div>

浮动元素的父级元素添加下述样式

overflow:hidden 或者 display:table

浮动元素的父级元素使用伪类属性（常用）

.clearfix:after{content:""; display:block; clear:both;}
.clearfix{zoom: 1;}

通过上述三种方法的任意一种，可展示正常

创建布局

定位属性

属性	说明
position	设置定位
left\|right\|top\|bottom	为定位元素设置偏移量
z-index	设置定位元素的层叠顺序

注意：“left”、”top”、”right”、”bottom”以及”z-index”属性只有设置了定位（除static）才生效。

定位类型

值	说明
static	默认值，元素为普通布局
relative	相对定位，元素位置相对于普通位置定位
absolute	绝对定位，元素相对于position值不为static的第一位祖先元素来定位（脱离文本流）
fixed	固定定位，元素相对于浏览器窗口来定位（脱离文本流）

<style type="text/css">
  .content {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    color: #fff;
  }
  .content div{
    width: 100px;
    height: 100px;
    border: 1px solid;
    text-align: center;
    line-height: 100px;
  }
style>

<style>
  .static {
    position: static;
    background: red;
  }
  .relative {
    position: relative;
    top: 50px;
    left: 50px;
    background: black;
  }
  .absolute {
    position: absolute;
    top: 50px;
    left: 50px;
    background: blue;
  }
  .fixed {
    position: fixed;
    top: 50px;
    left: 50px;
    background: blue;
  }
style>


<div id="content">div>
<div id="content">
    <div class="static">static-1div>
    <div class="static">static-2div>
    <div class="relative">relativediv>
    <div class="absolute">absolutediv>
    <div class="fixed">fixeddiv>
div>

相对定位（relative）：相对于自己原位置进行偏移，在文本流中的位置依然存在，不脱离文档流；