HTML5+CSS3基础学习笔记(五)

浮动和定位

一、浮动

传统网页布局的三种方式:普通流、浮动、定位

1.标准流

1.1.标签按照规定好默认方式排列
标准流是最基本的布局方式

2.选择器{ float:属性值;}

2.1.

  • 浮动可以让多个块级元素一行内排列显示
  • 块级元素纵向排列:标准流
  • 块级元素横向排列:浮动

2.2.用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及另一个浮动框的边缘

2.3.

  • none:不浮动(默认值)
  • left:左浮动
  • right:右浮动

3.浮动的特性

3.1.浮动元素会脱离标准流

  • 脱离标准普通流的控制以便移动到指定位置
  • 浮动的盒子 不再保留原先的位置
  • 也就是说原位置会被浮动覆盖

3.2.浮动的元素会一行内显示并且元素顶部对齐

  • 如果多个盒子都设置了浮动,这多个盒子会一行内显示并且元素顶部对齐
  • 父级宽度装不下的话,多出的盒子会另起一行

3.3.浮动的元素会具有行内块元素的特性

  • 行内元素设置了浮动,则直接变成了行内块元素
  • 浮动的盒子中间没有缝隙,紧挨一起

4.浮动元素和标准流父级搭配使用

4.1.

  • 用标准流的父元素排列上下位置
  • 内部子元素采取浮动排列左右位置
  • 盒子和盒子嵌套
  • 利用外边距margin:0 auto; / margin-right:10px;来设置每个小盒子之间的距离
  • 总之,盒子与盒子之间的距离都是用margin来设置

二、常见网页布局

HTML5+CSS3基础学习笔记(五)
HTML5+CSS3基础学习笔记(五)
这张图的大概代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .top {
            height: 50px;
            background-color: gray;
        }
        
        li {
            list-style: none;
        }
        
        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 0 auto;
            margin-top: 10px;
        }
        
        .body4 {
            width: 980px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            margin-top: 10px;
        }
        
        .body4 li {
            width: 237px;
            height: 300px;
            float: left;
            margin-right: 10px;
            background-color: gray;
        }
        
        .body4 .teshu {
            margin-right: 0;
        }
        
        .footer {
            height: 185px;
            background-color: gray;
            margin: 0 auto;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">1</div>
    <div class="banner">2</div>
    <div class="body4">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="teshu">4</li>
        </ul>
    </div>
    <div class="footer">3</div>
</body>

</html>

1.浮动布局特点

1.1.浮动和标准流的父盒子搭配
先用标准流的父盒子上下位置,之后内部子元素采取浮动排列左右位置

1.2.一个元素浮动了,其余兄弟元素也要浮动

  • 一个盒子里面有多个盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防引起问题
  • 浮动的盒子只会影响后面盒子的标准流,不会影响前面的盒子,就像排队一样

三、清除浮动

父盒子有的时候不方便定义高度。不定义高度,因为浮动,下面的盒子又会被浮动的盒子给盖住,出问题。

1.清除浮动的本质

1.1.清除浮动元素造成的影响
只让浮动在父盒子内部影响,不会影响父盒子外面的其他盒子
1.2.选择器:{clear:属性值;}
选择器:{clear:both;}

2.清除浮动的方法

2.1.额外标签法

  • 也就是隔墙法,在浮动元素最末尾添加一个空的标签
  • 例:<div style="clear:both"></div>
  • 这个新添空标签一定要是块级元素
  • 通俗易懂,书写方便
  • 但是会添加许多无意义标签,结构化较差

2.2.父级添加 overflow元素

  • 直接在父元素中添加overflow:hidden属性

2.3.父级添加 after元素

  • 额外标签法的升级版

2.4.父级添加双伪元素

  • 给父元素添加一段代码
  • 然后在子元素里添加类名
.clearfix:before,.clearfix:after{
            content: "";
            display: table;
        }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            *zoom:1;
        }

CSS属性编写顺序

HTML5+CSS3基础学习笔记(五)

一、定位

  • 浮动让多个块级盒子一行没有缝隙排列显示,用来横向排列盒子
  • 定位让盒子*在某个盒子内移动,或固定在某个位置
  • 所以浮动定位互补完成需求

1.定位=定位模式+边偏移

将盒子在某一个位置

1.1.定位模式
position属性来设置

  • static 静态定位
  • relative 相对定位
  • absolute 绝对定位
  • fixed 固定定位

1.2.边偏移
top、bottom、left、right属性分别对应上下左右的距离

top:100px;

标准流和浮动不能使用这四个属性

2.静态定位 static

2.1.元素的默认定位方式,无定位的意思
选择器 { position: static; }

3.相对定位 relative(重要)

3.1.选择器 { position:relative; }

  • 元素移动的时候,以原位置为基础移动的距离,就是相对距离
  • 相对定位不脱标,原来位置不会被标准流占据
  • 也就是不会浮动起来

4.绝对定位 absolute (重要)

4.1.选择器 { position: absolute; left :50%;}

  • 以祖先元素为基准来移动
  • 若没有祖先元素或者祖先元素没有定位,则以浏览器为基准移动
  • 若祖先元素有定位,则以最近一级的祖先元素的定位为基准移动
  • 绝对定位是脱标的,原来位置会被标准流占据

4.2.让绝对定位的盒子居中显示

  • 先用left 50%(父容器宽度的一半)走到父盒子中线的右边HTML5+CSS3基础学习笔记(五)

  • 再用margin赋值往左边走该盒子宽度的一半

5.子绝父相

  • 子是绝对定位,则父一定要相对定位

  • 父级需要占有位置,所以要相对定位不脱标

  • 子级要放在父级的任何一个位置,也就是不需要占位置,那就绝对定位随便浮动、随便脱标吧

6.固定定位 fixed (重要)

6.1.选择器 { position: fixed ; }

  • 固定在可视区的位置,页面滚动时元素位置不改变
  • 总是以浏览器的可视窗口为基准移动
  • 和父元素没有任何关系。也不随滚动条滚动

7.粘性定位 sticky

7.1.选择器 { position: sticky ; top:10px }

  • 相对定位和固定定位的混合
  • 以可视窗口为基准移动元素 (固定定位)
  • 粘性定位占有原先的位置 (相对定位)
  • 必须添加top、left、right、bottom其中一个才有效
  • 滚动到了那个位置,就开始是固定定位

8.定位总结

HTML5+CSS3基础学习笔记(五)

9.定位叠放顺序 z-index

9.1选择器 {z-index:1;}

  • 数值可以是正整数、负数、0。默认是auto,不能加单位
  • 数值越大,盒子越靠上方,数值相同的话,书写顺序后来居上
  • 只有定位才有这个属性

10.定位的特殊性

10.1

  • 和添加了浮动一样,行内元素若绝对或固定定位了,则可以直接设置高度和宽度
  • 块级元素添加了绝对或固定定位,若没有设定高度宽度,则默认是内容的大小

10.2 设定浮动、定位的脱标的盒子不会外边距塌陷

10.3

  • 绝对定位会完全压住盒子里所有内容,浮动定位不会压住盒子里的文字和图片**(会直接露出来)**
  • 浮动的效果其实就是文字环绕图片的效果。因为图片不会盖住文字

二、网页布局总结

  • 页面布局第一准则:分析行模块,再分析每个列中的列模块
  • 第二准则:列模块基本上是浮动布局,先确定列的大小,再确定列的位置
  • 制作HTML结构。现有结构、后有样式,结构永远最重要。
  • 垂直的块级盒子用标准流
  • 多个块级盒子水平显示用浮动
  • 元素*在盒子移动用定位
  • 先理清楚布局结构,再写代码,熟能生巧
  • 必须先确定页面的版心(可视区)

三、元素的显示与隐藏

让一个元素在页面中隐藏或者显示出来

1.display属性

1.1.display:none; 隐藏对象
display:block; 转换为块级元素,显示元素

  • display属性用于设置一个元素如何显示
  • display隐藏元素后,不再占有原来的位置,会缩进去

2.visibility 可见性

2.1.visibility: visible; 元素可视 visibility: hidden; 元素隐藏

  • visibility 隐藏元素后,继续占有原来的位置

3.overflow 溢出

3.1.overflow: visible;

  • overflow属性指定了 如果内容溢出了元素的框解决方法
  • visible 不剪切内容也不添加滚动条
  • hidden 不显示超过对象尺寸的部分,超出部分隐藏
  • scroll 不管超出与否,总是显示滚动条
  • auto 超出自动有滚动条,不超过没有滚动条
  • 如果是有定位的盒子,慎用hidden,因为会隐藏多余部分
上一篇:前端Html5(12)


下一篇:表格、表单和H5