CSS盒子模型与浮动定位

文章目录

      • 一.CSS盒子模型
        • 1.1 盒子模型的组成
        • 1.2 边框(border)
        • 1.3 内边距(padding)
        • 1.4 外边距(margin)
          • 1.4.1 设置盒子水平居中
          • 1.4.2 外边距合并
            • 1.4.2.1 相邻块元素垂直外边距的合并
            • 1.4.2.2 嵌套块元素垂直外边距的塌陷
            • 1.4.2.2 解决外边距塌陷的方法
          • 1.4.3 补充
      • 二.浮动
        • 2.1 标准流
        • 2.2 什么是浮动
        • 2.3 浮动的特性
        • 2.4 浮动布局注意点
        • 2.4 清除浮动
          • 2.4.1 为什么要清除浮动
          • 2.4.2 清除浮动的方法
            • 2.4.2.1 额外标签法
            • 2.4.2.2 父级添加overflow
            • 2.4.2.3 :after 伪元素法
            • 2.4.2.4 双伪元素清除浮动
            • 2.4.2.5 clear:both
        • 2.5 案例:导航栏
      • 三.定位
        • 3.1 相对定位 relative
        • 3.2 绝对定位 absolute
        • 3.3 固定定位:fixed
        • 3.4 粘性定位 sticky
        • 3.5定位拓展
            • 3.5.1 定位的叠放次序 z-index
            • 3.5.2 绝对定位的盒子的居中
            • 3.5.3 其他
        • 五:补充:元素的显示和隐藏
          • 5.1 display属性
          • 5.2 visbility 可见性
          • 5.3 总结
        • 6.案例

页面布局要学习三大核心是:盒子模型, 浮动 和 定位.

一.CSS盒子模型

1.1 盒子模型的组成

盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:元素内容(content),内边距(padding),边框(border)和外边距(margin)

  • 标准盒子模型

CSS盒子模型与浮动定位_第1张图片
注:
一个元素所占据的总宽度=width+padding(左右)+border(左右)+margin(左右)

  • IE盒模型
    IE 盒模型也称为怪异盒模型,IE6 之前的浏览器默认采用怪异盒模型。在怪异模式下,一个块元素的总宽度= width + margin(左右)(即 width 已经包含了 padding 和 border)
    CSS盒子模型与浮动定位_第2张图片
    注::标准盒模型设置的宽度只包含内容区域;而 IE 盒模型设置的宽高包
    含了内容区域+padding+border

在CSS 中可以设置 box-sizing 属性来规定使用哪种模型,属性值有两个。
(1)content-box:采用标准模式解析计算,也是默认模式。
(2)border-box:采用怪异模式解析计算

1.2 边框(border)

边框由三部分组成:边框粗细 边框样式 边框颜色

border : border-width || border-style || border-color

border-style的属性值

属性值 含义
none 没有边框即忽略所有边框的宽度(默认值)
solid 边框为单实线(最为常用的)
dashed 边框为虚线
dotted 边框为点线

单独设置一个边框
边框简写:

border:1px solid red;/*没有顺序*/

边框分开写法:

border-top:1px solid red;/*只设定上边框*/
border-color:red green blue yellow;/*分别设置四个边框的颜色*/

单独为一条边框设置颜色

border-top-color:red;/*设置上边框的颜色为红色*/

补充:表格细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse; /*表示相邻边框合并在一起*/

1.3 内边距(padding)

padding 属性用于设置内边距,即边框与内容之间的距离
padding 属性可以有一到四个值

值的个数 表达意思
padding:5px 1个值,代表上下左右都有5像素内边距
padding:5px 10px 2个值,代表上下内边距是5像素,左右内边距是10像素
padding:5px 10px 20px 3个值,代表上内边距是5像素,左右内边距是10像素,下内边距20像素
padding:5px 10px 20px 30px 4个值,代表上内边距是5像素,右内边距是10像素,下内边距20像素,左是30px 顺时针

还可以单独设置

padding-left:50px;

注:1)如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
CSS盒子模型与浮动定位_第3张图片
2)如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.

1.4 外边距(margin)

margin 属性用于设置外边距,即控制盒子和盒子之间的距离。

margin简写方式代表的意义跟padding一样,可参考padding

1.4.1 设置盒子水平居中

条件:
1)盒子必须指定宽度
2)盒子的左右边距都设置为auto

div{
width:100px;
height:100px;
margin:0 auto;/* 或margin:auto*/

注:以上方法只能让块级元素居中,行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
补充:使盒子居中的方法
1).text-align:center和padding结合(文字垂直居中)
2).text-align:center和line-height:等于盒子的高度(文字垂直居中)
3).除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中,先移动盒子宽度,高度的50%,再用transfrom:translate(-50%, -50%);(本身的)
4).margin:auto或margin:0px auto;

1.4.2 外边距合并
1.4.2.1 相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有
上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
CSS盒子模型与浮动定位_第4张图片

1.4.2.2 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
CSS盒子模型与浮动定位_第5张图片

1.4.2.2 解决外边距塌陷的方法
  • 可以为父元素定义边border
  • 给父元素定义内边距
  • 为父元素添加overflow:hidden
  • 加绝对定位
1.4.3 补充

1) 清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网
页元素的内外边距。

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }

2)overflow:内容溢出控制

属性值 含义
visible 内容不会被修剪,会呈现在元素框之外
auto 根据内容多少选择显示滚动条,文字多的时候显示滚动条
scroll 无论文字多少,都会显示垂直和水平两个滚动条,scroll-y,只在垂直方向显示
hidden 超出区域的文字直接隐藏,无法看到

3)box-shadow:盒子阴影
box-shadow 是给元素周围添加阴影效果,该属性有六个属性值。
1)X 轴阴影距离:必写,可正可负,正值右移,负值左移。
2)Y 轴阴影距离:必写,可正可负,正值下移,负值上移。
3)阴影模糊半径:可写,只能为正,默认值为 0。数值越大,阴影越模糊。
4)阴影扩展半径:可写,可正可负,默认值为 0。数值增大,阴影扩大;数值减小,
阴影缩小。
5)阴影颜色:可写,默认为黑色。
6)内外阴影:可写,可选值:inset(内阴影),不选默认为外阴影

<style>
        div {

            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            background-color: aqua;
            box-shadow: 5px 5px 20px yellow;
        }
 style>
<body>
    <div>div>
body>

CSS盒子模型与浮动定位_第6张图片
4)border-radius:边框圆角

border-radius:length; 
border-radius:20px;
  • 参数值可以为数值或百分比的形式
  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%
  • 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角

二.浮动

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):
 普通流(标准流/文档流)
 浮动
 定位

2.1 标准流

标准流:就是标签按照规定好默认方式排列
1)块级元素:独占一行,从上向下顺序排列
常用标签:
div、hr、p、h1~h6、ul、ol、dl、form、table
2)行内元素:按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
常用标签:
span、a、i、em,img,input

2.2 什么是浮动

float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

选择器{float:属性值;}
属性值 描述
none 元素不浮动(默认值)
left 元素向左浮动
right 元素向右浮动

2.3 浮动的特性

1)浮动元素会脱离标准流(脱标):脱离标准普通流的控制(浮) 移动到指定位置(动), (俗称脱标)
2)浮动的元素会一行内显示并且元素顶部对齐,而且浮动的元素会具有行内块元素的特性.
3)浮动的盒子不再保留原先的位置
1,2盒子都没加浮动
CSS盒子模型与浮动定位_第7张图片
给1号盒子加浮动
CSS盒子模型与浮动定位_第8张图片
注:1.如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
2.浮动的盒子中间是没有缝隙的,是紧挨着一起的,,如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐。
3,网页布局标准:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动

2.4 浮动布局注意点

1.浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2.一个元素浮动了,理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。
3.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

2.4 清除浮动

清除浮动的本质是清除浮动元素脱离标准流造成的影响

2.4.1 为什么要清除浮动

由于父级盒子很多情况下,不方便给高度, 但是子盒子浮动又不占位置,最后父级盒子高度将会塌陷为0,就会影响下面的标准流盒子(因为浮动元素不再占用原文的位置,所以他会对后面的元素排版产生影响)

2.4.2 清除浮动的方法
2.4.2.1 额外标签法

额外标签法会在浮动元素末尾添加一个空的标签(必须是块级元素)。例如

,或者其他标签如
等)。

2.4.2.2 父级添加overflow

可以给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll 。

2.4.2.3 :after 伪元素法

是给父元素添加

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */
*zoom: 1
}
2.4.2.4 双伪元素清除浮动
.clearfix:before,.clearfix:after {
 content:"";
 display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
} 

2.4.2.5 clear:both

在父元素中添加一个新的元素,为新元素设置 clear:both

<div class="outer">
<div class="div1">1div>
<div class="div2">2div>
<div class="div3">3div>
<div class="clear">div>
div>
.clear{
clear:both; 
height: 0;
}

CSS盒子模型与浮动定位_第9张图片

2.5 案例:导航栏

css

 * {
            margin: 0px;
            padding: 0px;
        }
        header {
            width: 100%;
            height: 50px;
            background-color: rgba(215, 242, 250, 0.452);
            box-shadow: 0px 10px 0px rgba(215, 242, 250, 0.034);
        }
        nav {
            width: 1200px;
            height: 50px;
            margin: auto;
            /* background-color: aqua; */
        }

        div {
            height: 50px;
            float: left;
        }
        .image {
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            /* background-color: aquamarine; */
            font-size: 30px;
        }
        a {
            text-decoration: none;
            color: black;
        }
        ul {
            float: left;
            margin-left: 100px;
        }
        li {
            height: 50px;
            float: left;
            padding: 0px 20px;
            list-style: none;
            line-height: 50px;
        }
        li:nth-of-type(1) {
            background-color: rgb(14, 187, 230);
        }
        li:not(.active):hover {
            background-color: rgb(105, 173, 219);
        }
        .search {
            height: 50px;
            float: left;
            margin-left: 100px;
            line-height: 50px;
        }
        input {
            width: 300px;
            height: 30px;
            outline: none;
        }

html

  

在这里插入图片描述

三.定位

定位与浮动一样,都是改变元素在正常文档流中的位置,对网页内容进行重新排版。
position 定位属性可选的属性值有 4 个。
1)relative:相对定位
2)absolute:绝对定位
3)fixed:固定定位
4)static:没有定位,默认值

3.1 相对定位 relative

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的

选择器{
position:relative;
}

相对定位的特点:
1)相对于自己原来在文档流中的位置定位,当不指定 top、left 等定位值时,不会改变元素位置
2)原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。

3.2 绝对定位 absolute

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的

选择器{
position:absolute;
}

绝对定位特点:
1) 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document 文档)
2)如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
3)绝对定位不再占有原先的位置。(脱标)
补充:
子绝父相:子级是绝对定位的话,父级要用相对定位
① 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时,需要占有位置,因此父亲只能是相对定位。

3.3 固定定位:fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。

选择器 { position: fixed; }

固定定位的特点:
1.是无论父元素是否定位,子元素如果采用固定定位,都将相对于浏览器左上角定位,且固定在指定位置,不随浏览器滚动条的滚动而滚动
2.固定定位不在占有原先的位置。
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。

3.4 粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

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

粘性定位的特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位占有原先的位置(相对定位特点)
  3. 必须添加 top 、left、right、bottom 其中一个才有效(当滚动到top值时会固定住)

总结:
CSS盒子模型与浮动定位_第10张图片

3.5定位拓展

3.5.1 定位的叠放次序 z-index

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)

选择器 { z-index: 1; }

数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
 数字后面不能加单位
 只有定位的盒子才有 z-index 属性

3.5.2 绝对定位的盒子的居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中

position:abusolute;
left:50%
transform:translate(-50%,-50%)
3.5.3 其他

1.脱标(浮动,绝对定位,固定定位)的盒子不会触发外边距塌陷
2.绝对定位(固定定位)会完全压住盒子, 浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)但是绝对定位(固定定位) 会压住下面标准流所有的内容。

五:补充:元素的显示和隐藏

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

  • display 显示隐藏
  • visibility 显示隐藏
  • overflow 溢出显示隐藏
5.1 display属性

display 属性用于设置一个元素应如何显示。
 display: none ;隐藏对象(隐藏后不再占有原来的位置)
 display:block ;除了转换为块级元素之外,同时还有显示元素的意思

5.2 visbility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

  • visibility:visible ; 元素可视
  • visibility:hidden; 元素隐藏
  • visibility 隐藏元素后,继续占有原来的位置。
5.3 总结
  1. display 显示隐藏元素 但是不保留位置
  2. visibility 显示隐藏元素 但是保留原来的位置
  3. overflow 溢出显示隐藏 但是只是对于溢出的部分处分(盒子模型处有介绍)

6.案例

要求:当鼠标经过视频盒子时,出现遮罩
css

 .box {
            position: relative;
            width: 300px;
            height: 200px;
        }

        .box>img {
            display: block;
            position: absolute;
            width: 300px;
            height: 200px;
            /* 浮动的盒子在shadow上面,降低层级,让shadow显示在上面 */
            z-index: -1;
        }

        .shadow {
            /* 隐藏 */
            display: none;
            width: 300px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.7);
            overflow: hidden;

        }

        .shadow img {
            display: block;
            width: 20px;
            height: 20px;
            margin: auto;
            margin-top: 90px;
        }

        .box:hover .shadow {
            /* 显现 */
            display: block;
        }

html

 <div class="box">
        <img src="../img/qiji1.jpg" alt="">
        <div class="shadow"><img src="../img/s.png" alt="">div>
    div>

鼠标没有移上去
CSS盒子模型与浮动定位_第11张图片
鼠标移上去
CSS盒子模型与浮动定位_第12张图片

参考资料:黑马程序员pink老师前端入门教程

你可能感兴趣的:(html+css,css)