1 内边距（padding）

内边距指的是边框与内容之间的距离

padding-top：上内边距
padding-bootom：下内边距
padding-left：左内边距
paddging-rigth：右内边距

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">#d1{width: 200px;height: 200px;background-color: pink;border:1px solid black;/*  一个值 上下左右 都是10px*//* 2个值  上下为第一个值  左右为第二个值 *//* 3个值 上为第一个值  左右为第二个值  下为第三个值 *//* 4个值  上 右 下 左 依次从左往右取值 */padding: 10px 20px 30px 40px;}#d2{width: 100px;height: 100px;background-color: chartreuse;border: 1px solid yellow;}</style>
</head>
<body><div id="d1"><div id="d2"></div></div>
</body>
</html>l

2 外边距（margin）

外边距表示的是元素之间的间隙。

margin-top
margin-bottom
margin-left
margin-rigth

<!DOCTYPE html>
<html lang="en">
<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 type="text/css">#d1{width: 200px;height: 200px;background-color: pink;border:1px solid black;/*  一个值 上下左右 都是10px*//* 2个值  上下为第一个值  左右为第二个值 *//* 3个值 上为第一个值  左右为第二个值  下为第三个值 *//* 4个值  上 右 下 左 依次从左往右取值 */padding: 10px 20px 30px 40px;/* 外边距 1个值    上下左右2个值  上下为第一个值  左右为第二个值3个值   上为第一个值  左右为第二个值 下为第三个值4个值 上 右 下 左 依次从左往右取值*/margin: 10px 20px 30px  40px;}#d2{width: 100px;height: 100px;background-color: chartreuse;border: 1px solid yellow;}</style>
</head>
<body><div id="d1"><div id="d2"></div></div>
</body>
</html>l

2.1 实现盒子居中

让一个盒子实现水平居中需要满足一下两个条件

1 必须是块级元素

2 盒子必须指定宽度，然后就给左右两边的外边距设置为auto 就可以是块级元素水平居中

margin: 0  auto;

使的盒子在他所在的容器内部左右水平居中

2.2. 在布局中清除元素的默认的内外边距

  *{padding: 0;margin: 0;}

3 盒子模型的布局（div+css）

网页布局特别是盒子模型的布局我们要分清楚内外边距。

为了是的盒子模型布局的稳定性，建议如下：

优先使用宽度其次使用内边距最后使用外边距

width > padding >margin

原因：

1 margin会有外边距合并

2 padding 会影响盒子的大小

3 width 没有问题经常我们会使用一种方式宽度剩余法和高度剩余法来计算盒子的布局的空间

盒子的大小：

1 box-sizing： border-box 盒子的大小为width

2 box-size： conten-box盒子的大小为width+ padding + border

4 版心和布局流程

版心是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示。常见的宽度值：960px 980px 1000px 1200px

4.1 布局流程

1 确定页面的版心

2 分析页面中的行模块以及每个行模块中的列模块

3 制作HTML页面 css文件

4 css初始化，运用盒子模型原理通过div+css布局来控制网页中的各个模块。

常见的布局：

一列固定宽度且居中（小米）

通栏平均分布（锤子）

4.2 浮动

确定盒子位置的机制：普通流（文档流）浮动定位

在HTML网页中，标签元素的把布局默认遵循从上到下从左至右的方式进行排布。

浮动就是设置元素的属性，使其脱离文档的标准流，移动到期父元素中指定的位置的过程。

float：left  | right

浮动使得元素脱离了标准流不占有位置（此时原来所占有的位置就空出了）

4.3 清除浮动

浮动使得元素脱离了标准流，不在占有原文档流的位置，所以他会对后边元素的排版产生影响，为了解决这个问题，此时我么那就需要在该元素中清除浮动。

清除浮动主要就是解决父级元素因为子级元素浮动引起的内部高度为0的问题

4.4 清除浮动的方法：

清除浮动又称为闭合浮动。

方式一：

选择器{clear:left | right | both}

left清除左侧元素的浮动

right 清除右侧元素的浮动

both 清除左右两侧的浮动

方式二：额外标签法

W3C推荐在浮动元素末尾添加一个空的标签

<body><div id="d1"><div id="d2"></div><div id="d3"></div><div style="clear:both;"></div></div>

方式三：父级添加overflow属性

overflow：hidden | auto |scroll

  #d1{width: 1200px;background-color: pink;/* display: none; */overflow: hidden;}

缺点：当内容增多的时候容易造成内容溢出

方式四：使用after伪元素来清除浮动（推荐）

        .clearfix:after{            content: ".";            display: block;            height: 0;            clear: both;            visibility: hidden;        }        .clearfix{            *zoom:1;        }

content里面的点不能省略

方式五：使用before 和after双伪元素（推荐）

     .clearfix:after,        .clearfix:before{            content: ".";            display: block;            visibility: hidden;            height: 0;         }        .clearfix:after{            clear: both;        }        .clearfix{            *zoom:1;        }

5 定位

5.1 元素的定位属性

1 边偏移

top 顶端偏移量
bottom 底部偏移量
left 左偏移量
right 右偏移量

2 定位模式：

position 表示元素的定位模式
static 自动定位（默认的定位方式）
relative 相对定位。相对于其所在的原文档里会的位置定位
absolute 绝对定位相对于期上一个已经定位的父元素进行定位
fixed 固定定位相对于浏览器窗口进行的定位

定位 = 定位模式 + 边偏移

5.2 static 静态定位/固定定位

是所有元素的默认的定位方式，当position’取值为static 可以将元素定位为静态位置。

所谓的静态定位就是各个元素在html文档中默认的位置。

在静态定位状态下无法通过偏移属性来改变元素的位置

作用就是清除定位使原来有定位的盒子消除定位

5.3 相对定位 relative

相对定位是元素相对于其在标准流中的位置进行定位。

但是元素在文档流中的位置仍然保留

<!DOCTYPE html><html lang="en"><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 type="text/css">        div:first-child{            width: 200px;            height: 200px;            background-color: pink;            /* 浮动不占有标准流的位置  */            float: left;            position: relative;            left: 20px;            top: 50px;        }        div:last-child{            width: 200px;            height: 200px;            background-color: blue;            /* 但是原来标准流的位置依然占有。 */            position: relative;            left: 50px;            top: 100px;        }    </style></head><body>    <div>    </div>    <div>    </div></body></html>

5.4 绝对定位

positon：absolute时此时的定位i模式为绝地定位

绝对定位可以通过偏移设置位置，但是他是脱离标准流不占有位置。

5.4.1 父级没有定位

父级没有定位以浏览器为标准进行偏移

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kHnkOyvU-1635835153162)(assest/image-20210811113257755.png)]

5.4.2 父级有定位

父级有定位元素将依据最近的定位的父级（绝对定位相对定位固定定位）元素进行定位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sdn6FAnB- 在这里插入图片描述

如果一个盒子只给了定位没有给偏移量则该盒子以标准流来排序和上一个盒子的底部对齐但是不占有位置

5.5 子绝父相

子元素采用绝对定位父元素采用相对定位

子元素采用绝对定位不会占有位置可以放到父元素的任意位置

父元素布局，需要占有位置，因此父元素采用相对定位。

5.6 盒子水平/垂直居中

    .outer{width: 100px;height: 100px;background-color: pink;position: absolute;left: 50%;top:50%;margin-left: -50px;margin-top: -50px;}

方式二：

     .outer{width: 100px;height: 100px;background-color: pink;position: absolute;left: 0;top:0;bottom: 0;right: 0;margin: auto;   }

5.7 固定定位（fixed）

固定定位是绝对定位的一种特殊形式，以浏览器为参考，他脱离标准流，始终以浏览窗口为自己的参考位置

5.8 元素的叠放次序

z-index 可以取值为整数值越大越靠上

6 1号店首页

6.1 完成头部

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWRXB6Id-1635835153172)(assest/image-20210811143908358.png)]

<!DOCTYPE html>
<html lang="en">
<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"><link rel="stylesheet" type="text/css" href="css/style.css"><title>1号店</title>
</head>
<body><!-- 网页的头部 --><header><div class="soubg"><div class="sou fl"><div class="s_city_b"><span>送货至：天津</span></div></div><div class="fr  top_right"><div class="fl">你好！请<a href="#">登录</a><a href="#" style="color:rgb(255,88,40)">免费注册</a>&nbsp; | &nbsp;<a href="#">我的订单</a>&nbsp;|</div><ul class="ss"><li class="ss_list"><a href="#">收藏夹</a></li><li class="ss_list"><a href="#">客户服务</a><div class="ss_list_bg"><div class="ss_list_c"><ul><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li></ul></div></div></li><li class="ss_list"><a href="#">网站导航</a></li></ul><span class="fl">&nbsp;&nbsp; | &nbsp;关注我们：</span><span class="s_sh"><a href="#" class="sh1"> </a><a href="#" class="sh2"> </a></span><span class="fr">&nbsp;&nbsp;| &nbsp;<a href="#">手机版</a><img src="imgs/s_tel.png" alt=""></span></div></div></header>
</body>
</html>

*{margin: 0;padding: 0;
}
body{font-size: 12px;line-height: 25px;color: #555555;margin: 0 auto;
}
a{color: #555555;text-decoration: none;
}
a:hover{color: #ff4e00;
}
img{border: 0;
}
ul,li,dl,dt,dd{list-style: none;
}
.fl{float: left;
}
.fr{float: right;
}
.clear:after{content: ".";display: block;clear: both;visibility: none;
}
/* 版心 */
.center{width: 1200px;margin: 0 auto;
}
/* ----------------------header样式开始------------------------------------------- */
.soubg{width: 100%;min-width: 1200px;height: 35px;line-height: 35px;background: linear-gradient(to bottom, rgb(214,214,214),rgb(244,244,244),rgb(245,245,245));
}
.sou{margin-left: 50px;
}
.s_city_b{width: 150px;height: 35px;float: left;
}
.top_right{margin-right: 50px;
}
.ss{height: 35px;float: left;
}
.ss_list{height: 35px;background: url(../imgs/t_arrow.gif) no-repeat right center;float: left;margin-left: 10px;padding-right: 15px;position: relative;
}
.ss_list:hover .ss_list_bg {display: block;
}
.ss_list_bg{width: 116px;overflow: hidden;position: absolute;left: 50%;top: 30px;margin-left: -55px;display: none;z-index: 900;}
.ss_list_c{overflow: hidden;background-color: #fff;margin-top: 5px;padding: 10px 0;border: 1px  solid #cdcdcd;
}
.ss_list_c ul li {height: 30px;line-height: 30px;text-align: center;overflow: hidden;
}
.s_sh{width: 55px;height: 35px;overflow: hidden;float: left;
}
.s_sh a{width: 20px;height: 35px;line-height: 35px;display: inline;float: left;margin: 0 3px;overflow: hidden;
}
.s_sh a.sh1{background: url(../imgs/sh1.png) no-repeat center 8px;
}
.s_sh a.sh2{background: url(../imgs/sh2.png) no-repeat center center;
}
/* ----------------------header样式结束------------------------------------------- */

logo 搜索框购物车

    <!-- 网页的顶部 --><div class="top"><div class="logo"><a href="#"><img src="imgs/logo.png" alt=""></a></div><div class="search"><form action=""><input type="search" name="" id="" value="" placeholder="请输入关键字" class="s_ipt"><input type="submit" value="搜索" class="s_btn"></form><div class="fl"><a href="#">咖啡</a><a href="#">iphone 6s</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a href="#">连衣裙</a></div></div><div class="i_car"><div class="car_t">购物车</div></div></div>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

斐波那契数列详解
目录 1.认识斐波那契数列 1.1 什么是斐波那契数列 1.2 斐波那契数列的规律 2.用代码的思维实现斐波那契数列 2.1 确定要查找第几个斐波那契数列 2.2 如何利用斐波那契数列规律 2.3 如何利用循环实现斐波那契数列 2.4 如何进入循环 2.5 如何跳出循环 1.认识斐波那契数列 …...
2024/5/2 11:59:00
动态生成表格
动态生成表格因为里面的学生数据都是动态的，我们需要js 动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。所有的数据都是放到tbody里面的行里面。因为行很多，我们需要循环创建多个行（对应多少人&#…...
2024/5/2 10:50:11
“21天好习惯”第一期-12
1. (程序题) 题目描述： 输入一个正整数a，输出从1到a的所有数的阶乘和。（1！ 2！3！...a!） 输入描述： 一行输入一个正整数a（1 < a < 20) 输出描述： 输出一…...
2024/4/20 13:15:10
Mybatis-Plus添加报错 org.mybatis.spring.MyBatisSystemException
org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.reflection.ReflectionException: Could not set property ‘id’ of ‘class com.example.demo.entity.User’ with value ‘1454753531283935233’ Cause: java.lang.IllegalArgumentExce…...
2024/4/15 8:20:23
UA OPTI512R 傅立叶光学导论15 2-D Fourier变换与Hankel变换
UA OPTI512R 傅立叶光学导论15 2-D Fourier变换与Hankel变换2-D Fourier变换的定义2-D Fourier变换的性质极坐标系中的2-D Fourier变换Hankel变换2-D Fourier变换的定义定义 2-D Fourier变换 F(ξ,η)F[f(x,y)]∫−∞∞f(x,y)e−j2π(ξxηy)dxdyF(\xi,\eta)\mathcal{F}[f(x,…...
2024/4/18 12:25:47
SpringBoot 的观察者模式
观察者模式属于行为型模式，也叫发布订阅模式，定义对象间的一种一对多的依赖的关系，当一个对象的状况发生改变时，所有的依赖就会对它的对象都得到一个通知并自动跟新。主要解决一个对象状态改变给其他对象的通知，缺点就…...
2024/4/27 9:53:58
算法开启栈转队列武魂
文章目录**栈接口见 [算法开启小码农栈血脉](https://blog.csdn.net/diandengren/article/details/121055584?spm1001.2014.3001.5501)**用栈实现队列题目队结构体队初始化入“队”出“队”并取出队元素返回队头判断队空队列销毁队列代码（接口代码去我之前文章取&a…...
2024/4/5 6:39:56
21位水仙花数的求解
题目要求： 水仙花数（Narcissistic number），它是指一个 n 位数（n≥3 ），它的每个数位上的数字的 n 次幂之和，等于它本身（例如：13 53 33 153）。现…...
2024/5/1 18:26:40
动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals
如何分类——动画产业基础大小解压后：6.2G 含课程素材 1920X1080 mp4 语言：英语中英文字幕（根据原英文字幕机译更准确） 信息: 绘画技巧、解剖学、角色设计、透视和整体讲故事——这门为期6周的课程旨在聚焦于工作室正在寻找什么…...
2024/4/19 12:06:22
UA OPTI512R 傅立叶光学导论14 Wiener-Khinchine定理，Rayleigh定理与矩定理
UA OPTI512R 傅立叶光学导论14 Wiener-Khinchine定理，Rayleigh定理与矩定理Wiener-Khinchine定理Rayleigh定理矩定理Wiener-Khinchine定理定义考虑f(x)f(x)f(x)与g(x)g(x)g(x)两个波形，用下面的相关性函数衡量它们之间的相似性， rfg∫−∞…...
2024/4/12 13:45:13
UA OPTI501 电磁波求解Maxwell方程组的波动方程方法
UA OPTI501 电磁波求解Maxwell方程组的波动方程方法标量势满足的2阶PDE矢量势满足的2阶PDELaplace算子的含义标量势与矢量势的平面波解Maxwell方程组： ∇⋅Dρfree∇HJfree∂∂tD∇E−∂∂tB∇⋅B0\nabla \cdot \textbf D \rho_{free} \\ \nabla \times \textbf H…...
2024/4/6 23:47:05
UA OPTI570 量子力学25 2-level System
UA OPTI570 量子力学25 2-level System2-level System与Rabi oscillation2-level System与Rabi oscillation Spin-1/2的方法可以用于任意二维态空间（称之为2-level system），考虑E2\mathcal{E}_{2}E2，假设它的基为{∣u1⟩,∣u2⟩…...
2024/4/6 23:47:04
UA OPTI570 量子力学26 无自旋的氢原子
UA OPTI570 量子力学26 无自旋的氢原子哈密顿量与本征函数氢原子能量本征态哈密顿量与本征函数这一讲讨论spinless hydrogen，在氢原子中，只有一个电子e−e^-e−与一个质子pp^p，它们之间的库仑势为 V(r)−e24πϵ0rV(r)-\frac{e^2}{4 \pi \e…...
2024/4/15 8:20:33
JS:null在if语句中是false
这几天看开源项目的大神们写的JS代码中，常常看到这样的句子： let obj ... ... if(obj){... }头一次看的时候，我是直到，我看到了下面这段话： “null is a falsy value (i.e. it evaluates to false if coerced to a …...
2024/4/24 17:44:14
Linux之用户身份切换与特殊的Shell
温故： 在上面一篇文章《Linux之ACL权限设置》中给大家带来了关于ACL权限设置相关的知识点，还挺有用的，大家可以去看。今天咱们讲用户账号的切换，关于这个大家应该都不会觉得陌生，在实际的操作中，经常会切换…...
2024/4/29 16:41:44
活动策划，这几个APP 就够了
活动策划案的种种步骤都是要经过好几次反复修改尝试的，总是好不容易写出来了屁颠屁颠拿上去审核，就又被因为各种各样的原因被退返下来，TAT，所以我们必须要在保障质量的同时，提高工作效率。要讲活动策划案的编写效率神…...
2024/5/1 6:42:57
buffer和cache
buffer和cache $ free -htotal used free shared buff/cache available Mem: 1.9G 1.3G 139M 9.5M 514M 481M Swap: 8.4G 233M 8.2Gfree 指令的输出结果中，buff/cache …...
2024/4/24 20:17:02
AEJoy —— 表达式之音频触发动画【JS】
效果图想法假设我们开发了一个表达式来对一个特定的属性进行动画。我们设置了它，使动画从时间 0 开始，并在计算中使用全局对象时间。我们想要做的是，当音频水平越过某个阈值时，触发这个表达式。例如，假设我们有以下表达式，当应用到一个图层的缩放属性时，它会产生衰减…...
2024/4/23 18:58:41
文档数据库的学习报告
文档数据库的学习报告0 目录:1 大数据环境下的背景2传统关系数据库的瓶颈3文档数据库的选择4 什么是文档数据库4.1 什么是文档? 4.2 JSON数据格式 4.3那么是什么是文档型数据库呢? 4.4有哪些文档数据库？5文档数据库的一些关键特点 6 文档数据库数据模型 7文档数据库数据建模…...
2024/4/15 8:20:08
SaltStack高级状态的使用
YAML语言 YAML是一种直观的能够被电脑识别的数据序列化格式，是一个可读性高并且容易被人类阅读，容易和脚本语言交互，用来表达资料序列的编程语言。它类似于标准通用标记语言的子集XML的数据描述语言，语法比XML简单很多。 YAML…...
2024/5/1 11:33:59

Web前端-----day-03 网页制作

1 内边距（padding）

2 外边距（margin）

2.1 实现盒子居中

2.2. 在布局中清除元素的默认的内外边距

3 盒子模型的布局（div+css）

4 版心和布局流程

4.1 布局流程

4.2 浮动

4.3 清除浮动

4.4 清除浮动的方法：

5 定位

5.1 元素的定位属性

5.2 static 静态定位/固定定位

5.3 相对定位 relative

5.4 绝对定位

5.4.1 父级没有定位

5.4.2 父级有定位

5.5 子绝父相

5.6 盒子水平/垂直居中

5.7 固定定位（fixed）

5.8 元素的叠放次序

6 1号店首页

6.1 完成头部

相关文章

最新文章

Web前端-----day-03 网页制作

1 内边距（padding）

2 外边距（margin）

2.1 实现盒子居中

2.2. 在布局中 清除元素的默认的内外边距

3 盒子模型的布局（div+css）

4 版心和布局流程

4.1 布局流程

4.2 浮动

4.3 清除浮动

4.4 清除浮动的方法：

5 定位

5.1 元素的定位属性

5.2 static 静态定位/固定定位

5.3 相对定位 relative

5.4 绝对定位

5.4.1 父级没有定位

5.4.2 父级有定位

5.5 子绝父相

5.6 盒子水平/垂直居中

5.7 固定定位（fixed）

5.8 元素的叠放次序

6 1号店首页

6.1 完成头部

相关文章

最新文章

2.2. 在布局中清除元素的默认的内外边距