03.盒子模型、层模型、浮动模型

已于 2022-09-24 21:39:09 修改
阅读量126 收藏
点赞数 1
文章标签： html css css3
于 2022-09-24 17:33:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40637729/article/details/127028109
版权
本文详细介绍了CSS中的盒子模型，包括内容、内边距、边框和外边距的组成及计算方法。接着讲解了层模型，区分了绝对定位和相对定位的差异，并展示了如何实现元素的相对定位和固定定位。此外，还探讨了浮动模型，包括浮动流、清除浮动的方法以及浮动在布局中的应用场景。最后，提到了一些常见的CSS问题，如margin塌陷和BFC（块级格式化上下文）。
摘要由CSDN通过智能技术生成

盒子模型、层模型、浮动模型

文章目录

盒子模型

盒子模型详解

盒子模型=margin + border + padding + content (content = width + height)

盒子模型图1

盒子模型

盒子的组成部分

盒子壁 border
内边距 padding

padding:10px是四个方向

padding:10px 20px 30px 三个的时候是中间的20px代表左右边距

border-width:10px 和padding一样 也可以四个方向

盒子内容 width + height
<div>
    盒子模型
</div>

div {
    width:100px;
    height:100px;
    background:gray;
    border-left:10px dashed black;
    padding:10px;
    margin:100px;
}

外边距margin

margin不是盒子范围内

盒子真正的宽高(margin不是盒子范围内)

/*练习一*/
div {
    width:100px;
    height:100px;
    background:gray;
    border:10px dashed black;
    padding:10px 20px 30px;
    margin:10px 20px; /*外边距不是盒子范围内的*/
}
realWidth=100+10*2+20*2=160px
realHeight=100+10*2+10+30=160px

/*练习二*/
div {
    width:100px;
    height:100px;
    background:gray;
    border:1px dashed black;
    padding:0px 100px;
    margin:10px 20px 30px 40px; /*外边距不是盒子范围内的*/
}
realWidth=100+100*2+1*2=302px
realHeight=100+1*2=102px

<!--练习三:远视图-->
<div class="wrapper">
    <div class="box">
        <div class="content">
            <div class="content1"></div>
        </div>
    </div>
</div>

.content1 {
    height:10px;
    width:10px;
    background-color:#fff;
}

.content {
    height:10px;
    width:10px;
    padding:10px;
    background-color:#000;
}

.box {
    height:30px;
    width:30px;
    padding:10px;
    background-color:#fff;
}

.wrapper {
    height:50px;
    width:50px;
    padding:10px;
    background-color:#0f0;
}

层模型

绝对定位absolute

定义：脱离原来位置进行定位，释放位置，所以可以被别的元素覆盖，跟楼房上下楼一样，重叠。

  1. 结合left、right、top、bottom使用
  2. left和right只能选一个设置
  3. top和bottom只能选一个设置
<div></div>

div {
    position:absolute;
    left:100px;  /*距离左边多远距离*/
    top:100px;   /*距离顶部多远距离*/
    width:100px;
    height:100px;
    background-color:red;
}

body自带有margin:8px,所以浏览器看到的效果不是置顶。

body的边距

脱离原来位置进行定位，元素重叠覆盖。

<div class="demo"></div>
<div class="box"></div>

* {
    margin:0px;
    padding:0px;
}

.demo {
    position:absolute; /*添加绝对路径*/
    left:100px;
    top:100px;
    width:100px;
    height:100px;
    background-color:red;
    opacity:0.5;  /*透明度*/
}

.box {
    width:150px;
    height:150px;
    background-color:green;
}

绝对定位

相对定位relative

保留原来位置进行定位，哪怕自己的位置发生改变，原来的位置依旧保留。

<div class="demo"></div>
<div class="box"></div>

* {
    margin:0px;
    padding:0px;
}

.demo {
    position:relative; /*添加相对路径*/
    left:100px;
    top:100px;
    width:100px;
    height:100px;
    background-color:red;
}

.box {
    width:150px;
    height:150px;
    background-color:green;
}

相对位置

绝对定位和相对定位的区别

开发中一般使用relative作为参照物，absolute进行定位。

absolute相对于最近的有定位的父级进行定位，如果没父级有定位那就相对于文档(浏览器)进行定位。

绝对定位元素是脱离原来位置定位的，可以理解为是浮动的，根本不占地方。

<div class="wrapper">
    <div class="content">
        <div class="box"></div>
    </div>
</div>

* {
    margin:0px;
    padding:0px;
}
.wrapper {
    position:relative; /*如果父级没有定位 爷爷级有定位 box就会相对于这个元素定位*/
    height:200px;
    width:200px;
    background-color:orange;
    margin-left:100px;
}

.content {
    position:relative; /*父级有定位 box就会相对于这个元素定位*/
    height:100px;
    width:100px;
    background-color:black;
    margin-left:100px;
}

.box {
    position:absolute; /*绝对定位*/
    left:50px;
    height:50px;
    width:50px;
    background-color:yellow;
}

relative是相对于自己原来出生的位置进行定位

<div class="wrapper">
    <div class="content">
        <div class="box"></div>
    </div>
</div>

* {
    margin:0px;
    padding:0px;
}
.wrapper {
    height:200px;
    width:200px;
    background-color:orange;
    margin-left:100px;
}

.content {
    height:100px;
    width:100px;
    background-color:black;
    margin-left:100px;
}

.box {
    position:relative; /*相对于自己原来的位置进行定位*/
    left:50px;
    height:50px;
    width:50px;
    background-color:yellow;
}

相对文档定位fixed

固定在页面的那种悬浮窗

<div>好好学习，天天向上。</div>

* {
    margin:0px;
    padding:0px; 
}
    
div {
    position:fixed;  /*固定在网页的位置 滚动页面但是位置不变*/
    left:0px;
    top:300px;
    height:200px;
    width:50px;
    background-color:red;
    color:#fff;
}

* {
    margin:0px;
    padding:0px; 
}
    
div {
    position:absolute;  /*网页居中 但是这个居中是按照左顶点居中的 如果想相对当前窗口居中 那就是fixed*/
    left:50%;
    top:50%;
    height:100px;
    width:100px;
    background-color:red;
    color:#fff;
    margin-left:-50px; /*往左挪50px  水平居中*/
    margin-top:-50px; /*往上挪50px  垂直居中*/
}

网页居中

作业

1.写一个五环，并且让五环网页居中。

作业

<div class="box">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>
</div>

* {
    margin:0px;
    padding:0px;
}

.plat {
    position:absolute; /*父级当参照物 保证对其他元素不影响 但是relative没办法居中 所以需要改成absolute*/
    left:50%;
    top:50%;
    margin-top:-93px;
    margin-left:-190px;
    /*border:1px solid black; 会发现这个容器就是一条线  因为其他元素都是绝对定位 是浮动的  不占地方*/
    height:185px;
    width:380px;
}

.circle1,.circle2,.circle3,.circle4,.circle5 {
    position:absolute; /*absolute都重叠在一起了*/
    width:100px;
    height:100px;
    border:10px solid black;
    border-radius:50%;
}
.circle1 {
    border-color:red;
    left:0;
    top:0;
}

.circle2 {
    border-color:red;
    left:130px; /*左边距130px  因为圆宽100 加20solid 加10距离*/
    top:0;
    z-index:3;
}

.circle3 {
    border-color:gray;
    left:260px;
    top:0;
}

.circle4 {
    border-color:yellow;
    left:65px;
    top:60px;
}

.circle5 {
    border-color:blue;
    left:195px;
    top:60px;
}

在这里插入图片描述

2.实现两栏布局：让两个div并排(块级元素独占一行)

两栏布局：

  1. 一个元素让出另一边区域。
  2. 另一个元素定位到那里去。
<!--必须是先写浮动的那个元素 因为浮动的元素出生的时候就是第二行的话 是不会跑去第一行的-->
<div class="right"></div>
<div class="left"></div>

<!--如果两个盒子顺序调换 粉色元素就会在第二行 不会跑去第一行 因为出生在第二行  除非把left改成绝对定位 去除right的绝对定位  互相换一下-->
<div class="left"></div>
<div class="right"></div>

* {
    margin:0px;
    padding:0px;
}
.right {
    position:absolute; /*添加绝对定位 让它可以浮动在另一个元素上*/
    right:0px;
    width:100px;
    height:100px;
    background-color:#fcc;
    opacity:0.5;
}

.left {
    margin-right:100px;/*让出右边距离用于展示另一个元素 准确的说是把被另一个元素盖住的部分去掉*/
    height:100px;
    background-color:#123;
}

两个经典的bug

bug一:margin塌陷

垂直方向的margin,父子元素是结合在一起的，会取最大的值。

解决方法：

给父元素加上border-top(这种解法不合适)
<div class="wrapper">
    <div class="content"></div>
</div>

* {
    margin:0px;
    padding:0px;
}

.wrapper {
    margin-left:100px;
    margin-top:100px;
    width:100px;
    height:100px;
    background-color:balck；
    border-top:1px solid red; /*给父级加上棚顶之后 子元素的margin-top才会相对父级变化*/
}

.content {
    margin-left:50px;
    margin-top:150px;/*bug就在于子元素的margin-top只有在大于父元素的margin-top才会生效 并且是和父元素一起动 但是子元素在父元素中的位置并不会改变 就好比父级是没有棚顶的*/
    width:50px;
    height:150px;
    background-color:green；
}
bfc (block format content 块级格式化上下文)
正常规则：

正常来说每个盒子里面的渲染规则都是一定的，就像每个细胞的DNA都是一样的道理，定义了100宽高的盒子必然会渲染出100宽高的方块。

特殊规则：

触发BFC语法，让这个盒子所符合的语法规则和原来的不一样。BFC设置完之后，特定的盒子会遵循另一套语法规则。

比如:定义了100宽高的盒子渲染出50宽高的方块。

如何触发一个盒子的bfc
<div class="wrapper">
    <div class="content"></div>
</div>
position:absolute;
display:inline-block;
overflow:hidden;

隐藏意义：溢出盒子的部分要隐藏展示

这三种方法虽然都能解决margin塌陷的问题，但是会有新的问题出来，所以也不是很好。

* {
    margin:0px;
    padding:0px;
}

.wrapper {
    margin-left:100px;
    margin-top:100px;
    width:100px;
    height:100px;
    background-color:balck；
    /*display:inline-block;*/
    /* position:absolute;*/  
    overflow:hidden;/*溢出盒子的部分要隐藏展示*/
}

.content {
    /*margin-left:75px; 与父元素左边距是75 但是自身宽是50 父元素宽是100  所以会溢出父元素的盒子  溢出部分隐藏*/
    margin-left:50px; 
    margin-top:50px;/*加上overflow之后 margin塌陷问题就解决了*/
    width:50px;
    height:150px;
    background-color:green；
}

浮动模型

float:left/right;

站队规则：

站队边界就是父级的边界，也就是一行上能站多少个就站多少个，站不下了才换行。

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
    <div class="content">6</div>
    <div class="content">7</div>
    <div class="content">8</div>
    <div class="content">9</div>    
</div>

* {
    margin:0px;
    padding:0px;
}

.wrapper {
    width:350px;
    height:350px;
    borde:1px solid balck；
}

.content {
    float:left; /*会把块元素排列好*/
    width:100px;
    height:100px;
    margin-left:10px;
    margin-bottom:10px;
    background-color:balck；
    color:#fff;
}

float:left 左边站队 从左往右 站队边界就是父级的边界
在这里插入图片描述

float:right效果 右边站队 从右往左

在这里插入图片描述

加上margin之后的效果，可用于水平/功能排布功能块

在这里插入图片描述

探究浮动元素

浮动元素产生了浮动流

所有产生了浮动流的元素，块级元素看不到他们。

产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素。

<div class="box"></div>123
<div class="demo"></div>

* {
    margin:0;
    padding:0;
}
.box {
    float:left;  /*给box加浮动*/
    width:100px;
    height:100px;
    background-color:balck；
    opacity:0.5;
}

.demo {
    float:left; /*两个块级元素都加效果*/
    width:150px;
    height:150px;
    background-color:green；
}

块级元素看不到浮动流，所以会有层叠效果。

在这里插入图片描述

文字能看到浮动元素，所以并不会重叠。

在这里插入图片描述

两个块级都加浮动，也是有规则的。

在这里插入图片描述

float的浮动流
<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

* {
    margin:0px;
    padding:0px;
}

.wrapper {  /*没定义宽高 就会变成一个自适应容器 宽度没限制 高度由内容撑起来*/
    borde:1px solid balck；
}

.content {
    float:left; /*给子级加float 然后子级就会水平排布 而父级是块元素 所以看不见浮动流  形成重叠效果*/
    width:100px;
    height:100px;
    background-color:balck；
    color:#fff;
}

父级包不住子级，怎么解决？

在这里插入图片描述

清除浮动流方法一

父级元素看不到子元素的原因是浮动流，那就想办法去掉浮动流。

clear 属性值有left right both 分别是清除左边 右边 两边的浮动流

<div class="wrapper">
    <div class="content">1</div>
    <!--第一个元素产生的浮动流会对它后面的元素产生影响-->
    <div class="content">2</div>
    <!--第二个元素产生的浮动流会对它后面的元素产生影响-->
    <div class="content">3</div>
    <!--第三个元素产生的浮动流会对它后面的元素产生影响-->
    <p></p>  <!--如果添加一个p元素 会发现p元素也是受浮动流影响 和块元素重叠-->
</div>

* {
    margin:0px;
    padding:0px;
}

.wrapper { 
    borde:1px solid balck；
}

.content {
    float:left; 
    width:100px;
    height:100px;
    background-color:balck；
    color:#fff;
}
p {
    border-top:10px solid green; /*设置成0px就可以清除的看到wrapper的边界*/
    clear:bothh; /*清除浮动流 然后p属性就会在块元素下方出生  那p元素在下方出生 父级的宽度就会到p 因为p也是子级  把父级撑开*/
}

在这里插入图片描述

清除浮动流方法二

方法一中在html中加结构虽然能解决问题，但是不科学，所以使用伪元素处理。

伪元素会伴随标签出生，标签的前后各生成一个伪元素。

<span>很帅</span>

/*伪元素  就是一个正常的元素  可以使用所有属性*/
span::before { /* ::before选出最前面的伪元素*/
    content:"张杰"; /*伪元素必须有的属性content*/
    position:absolute;
    left:0;
    top:100px;
    display:inline-block;  /*伪元素天生是行元素 所以需要更改为块或行级块元素之后才能定义宽高*/
    width:100px;
    height:100px;
    background-color:red;
}

span::after { /* ::after选出最后面的伪元素*/
    content:",没毛病!"; 
}

通过伪元素清除浮动,clear只对块级元素生效！！！

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

* {
    margin:0px;
    padding:0px;
}
.wrapper::after { /*在wrapper后面的伪元素清除浮动*/ 
    content:"";
    clear:both;  /*只能清除块级元素*/
    display:block;  /*伪元素天生是行级元素  需要改为块级元素*/
}

.wrapper { 
    borde:1px solid balck；
}

.content {
    float:left; 
    width:100px;
    height:100px;
    background-color:balck；
    color:#fff;
}
清除浮动流方法三

凡是设置了position:absolute; float:left/right;的元素

系统内部会把元素转换成inline-block，所以定义的宽高无效，宽高完全由内容决定。

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

* {
    margin:0px;
    padding:0px;
}

.wrapper { 
    /*触发了BFC的元素和文本元素都能看到浮动元素 宽高没有设置那么多了  是因为系统内部会把元素转换成inline-block 所以定义的宽高无效 宽高完全由内容决定*/
    float:left;  /*第一个是让父级元素也变成浮动元素*/
    display:inline-block; /*第二个是让父级变成行级块元素*/
    position:absolute; /*第三是给父级增加绝对定位*/
    borde:20px solid red；
}

.content {
    float:left; 
    width:100px;
    height:100px;
    background-color:balck；
    color:#fff;
}

float的应用场景

场景一：文字环绕效果
<img class="img1" src="wh.png">啊，啊，啊，五环你比四环多一环,<img class="img2" src="wh.png">啊，啊，啊五环,你比六环少一环 终于有一天呐，你会修到七环 修完七环再修八环，修完八环修九环。
<img class="img1" src="wh.png">你会修到七环 修完八环修九环。
<img class="img2" src="wh.png">你会修到七环 修完八环修九环。

.img1 {
    margin-right:10px;
	width:100px;
    float:left;  /*添加浮动效果，就会实现文字顶格环绕图片效果*/
}

.img2 {
    margin-right:10px;
	width:150px;
    float:right;  /*向右浮动*/
}
场景二:标准导航栏
<ul class="nav">
    <li class="list-item">
        <a href="#">天猫</a>
    </li>
    <li class="list-item">
        <a href="#">聚划算</a>
    </li>
    <li class="list-item">
        <a href="#">天猫超市</a>
    </li>
</ul>

* {
    margin:0;
    padding:0;
    color:#424242; /*所有字体初始化  都是标准的黑色*/
    font-family:ariail; /*初始化字体 都为arial*/
}

a {
    text-decoration:none; /*去除a标签的下划线*/
}

.nav::after {
    content:"";
    display:block;
    clear:both;
}

.list-item {
    list-style:none;  /*去除小圆点●*/
}

.nav .list-item {
    float:left;  /*横向排布●*/
    margin:0 10px;  /*上下为0 左右为10*/
    height:30px;
    line-height:30px; /*文字高度和容器高度一样就是垂直居中*/
}

.nav .list-item a {
    padding:0 5px; /*加宽度是为了设置圆角(不然占用文字宽度了)*/
    color:#f40;
    font-weight:bold; /*字体加粗*/
    hight:30px;
    display:inline-block;
    border-radius:15px
}

.nav .list-item a:hover {
    background-color:#f40;
    color:#fff;
}

文字溢出处理

溢出容器，要打点展示。

单行文本(溢出部分打点展示)
<p>张杰（Jason Zhang），1982年12月20日出生于四川省成都市，中国流行男歌手。2004年参加歌唱类选秀《我型我秀》，获得全国总冠军并出道。2007年参加歌唱类选秀《快乐男声》，获得总决赛第四名；随后发行的EP《最美的太阳》拿下亚马逊年度唱片销量冠军。2008年担任北京奥运会火炬手；同年发行专辑《明天过后》。2010年发行专辑《这，就是爱》；同年获得韩国MAMA亚洲最佳歌手奖。</p>

p {
    width:300px;
    height:20px;
    line-height:20px;
    white-space:nowrap; /*文字取消换行 超出部分横向展示*/
    overflow:hidden; /*溢出部分内容隐藏*/
    text-overflow:ellipsis; /*超出文本打点展示*/
}
多行文本(溢出部分隐藏，只做截断不做隐藏)
<p>张杰（Jason Zhang），1982年12月20日出生于四川省成都市，中国流行男歌手。2004年参加歌唱类选秀《我型我秀》，获得全国总冠军并出道。2007年参加歌唱类选秀《快乐男声》，获得总决赛第四名；随后发行的EP《最美的太阳》拿下亚马逊年度唱片销量冠军。2008年担任北京奥运会火炬手；同年发行专辑《明天过后》。2010年发行专辑《这，就是爱》；同年获得韩国MAMA亚洲最佳歌手奖。</p>

p {
    /*算好容器内能站几行 高度是行高的几倍*/
    width:300px;
    height:40px;
    line-height:20px;
    overflow:hidden; /*溢出部分内容隐藏*/
}

背景图片处理

background-repeat
  1. background-repeat:repeat; /repeat当一张图片铺不满容器的话 默认重复出现/
  2. background-repeat:no-repeat; /no-repeat 图片铺不满容器也只铺一张/
  3. background-repeat:repeat-x; /repeat当一张图片铺不满容器 x轴重复出现/
  4. `background-repeat:repeat-y; /repeat当一张图片铺不满容器 y轴重复出现/
ackground-position
定位

left top 左上 left center 左中 left bottom 左下 top center 上中 center center 居中 bottom center 下中 right top 右上 right center 右中 right bottom 右下

像素

background-position:100px 100px; 代表在宽高一百的位置出现(依左上角为判断点)

百分比

background-position:0% 0%; 在左上角显示

background-position:50% 50%; 居中位置 相当于center center 可以理解为是除了图片之外的部分的50%的位置 所以是居中

<div></div>

div {
    width:200px;
    height:200px;
    border:1px solid black;
    background-image:url(photo.jpg);
    background-sizi:200px 200px; /*背景图片有两个尺寸  第一个是宽 第二个是高*/
    background-sizi:100px 100px;
    /*background-repeat:repeat; repeat当一张图片铺不满容器的话 默认重复出现*/
    background-repeat:no-repeat; /*no-repeat 图片铺不满容器也只铺一张*/
    background-position:100px 100px; /*图片位置 属性值也可以用left top等表示*/
}
好好学习_fighting
关注
html5盒子模型作业,HTML5盒子模型。
weixin_34526152的博客
06-05 2044
盒子模型。盒子由 margin、border、padding、content 四部分组成。margin ：外边距border：边框padding：内边距 (内容与边框的距离)content：内容* {margin: 0;padding: 0;}div {/*设置背景颜色*/background-color: blue;/*设置宽高*/width: 250px;height: 250px;/*设置外...
DIV CSS 盒子模型PPT演讲.zip
02-27
**DIV CSS 盒子模型详解** ...而"盒子模型.ppt"无疑是本次演讲的主体，详细阐述了盒子模型的概念、属性以及实际操作技巧。对于想要深入学习DIV CSS和网页设计的同学来说，这些资源无疑是一份宝贵的学习资料。
CSS_Day_4：盒子模型、层模型、浮动模型
Brandon_的博客
07-30 139
一、盒子模型 外边距(margin)+盒子壁(border)+内边距(padding)+内容元素(content = width + height)   二、层模型
CSS学习19：网页布局模型之流动模型、浮动模型
Blog of Lytracy
07-20 1076
文章目录1、流动模型2、浮动模型设置左浮动脱标清除浮动 清楚了 CSS 盒模型的基本概念，接下来将会探讨网页布局的基本模型。 布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。但布局模型是建立在盒模型基础之上，CSS 三种基本网页布局模型：流动模型（Flow）、浮动模型（Float）、层模型（Layer）。 1、流动模型 流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有 2 个比较典型的特征： 块状元素都会在所
玩转页面布局与CSS盒子模型解析
涤生大数据
07-22 1136
1.页面布局概述 布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种： 1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。 2、HTML+CSS布局(DIV+CSS)：主要...
CSS盒子模型
屈帅波的技术博客
05-23 1150
页面布局要学习三大核心：盒子模型、浮动和定位。 学习好盒子模型能非常好的帮助我们布局页面。 一、看透网页布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 利用 CSS 设置好盒子样式，然后摆放到相应位置 往盒子里面装内容 网页布局的核心本质： 就是利用 CSS 摆盒子！ 二、盒子模型（Box Model）组成 所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元.
CSS（盒子模型，定位，浮动，扩展）
m0_57463864的博客
06-04 1391
*绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移*/绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移。设置外边距 - 下边距。设置外边距 - 右边距。设置外边距 - 左边距。设置外边距 - 上边距。
html盒子模型的实例,CSS使用盒模型实例
weixin_39804641的博客
06-10 977
下面为大家带来一篇CSS使用盒模型实例分析。内容挺不错的，现在就分享给大家，也给大家做个参考。盒子是CSS中的基础概念，我们需要使用它来配置元素的外观以及文档的整体布局。1. 为元素应用内边距应用内边距会在元素内容和边距之间添加空白。我们可以为内容盒的每个边界单独设置内边距，或者使用 padding 简写属性在一条声明中设置所有的值。如果使用百分数值指定内边距，百分数总是根包含块的宽度相关，高度不...
盒子模型的基本概念
weixin_45746803的博客
11-07 4152
简介 CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通...
css盒子模型 浮动
weixin_46589981的博客
02-24 1345
1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 盒子模型之边框 边框就是那层皮。 语法：border : border-width || border-style || border-color (1)、边框的风格样式 边框属性—设置边框样式（border-style） 边框样式用于定义页面中边框的风格，常用属性值如下： none：没有边框即忽略所有边框
CSS面试须知盒子模型、浮动及定位.docx
07-08
"CSS盒子模型、浮动及定位" CSS盒子模型是指将HTML页面中的布局元素看作是一个矩形的盒子，一个CSS盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。盒子的...
CSS下盒子模型定位浅析.pdf
10-04
【CSS盒子模型定位浅析】 CSS（层叠样式表）是一种强大的样式控制工具，它使得网页设计者可以精细地控制页面元素的外观和布局。盒子模型是CSS布局的核心概念，它将HTML元素视为一个个具有内容(content)、内边距...
CSS盒子模型的应用
08-22
- **盒模型与浮动元素**：在使用float属性时，盒子模型可以帮助我们控制元素间的间距和排列。 - **盒模型与定位**：在使用position属性（如absolute或fixed）时，盒子模型可以帮助我们精确地定位元素。 **5. 盒阴影...
html实现黑白棋
woshiyaozhenyang的博客
09-23 531
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑白棋</title> <style> body { display: flex; flex-direction: column; align-items: center;
web基础：域名、网页、HTML、web版本
最新发布
shyuu的博客
09-23 1386
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
HTML中的表单（超详细）
qq_63946637的博客
09-20 1795
本文旨在帮助大家学习HTML中有关表单的知识
html,js,react三种方法编写helloworld理解virtual dom
09-23 494
学习任何一个新语言，好像都从helloworld开始。：）。
html，css基础知识点笔记（二）
Zwwxd666的博客
09-18 1086
本文主要教列表的样式设计。
HTML网页设计基础：盒子模型原理与应用
HTML网页设计基础笔记 • ...本章总结了盒子模型的概念和应用，包括盒子的大小、标准文档流、盒子浮动和盒子定位等。这些概念和技术都是网页设计的基础知识，理解和掌握这些知识点对于网页设计的学习和应用非常重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好好学习_fighting

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值