CSS+div布局总结（快速入门，附代码）
2024-04-29 01:34:28
文章目录
- 定位
- 相对定位
- 绝对定位
- 固定定位
- 堆叠顺序
- display
- 预备知识：
- 块状&行内元素的互换：
- 隐藏元素：
- 设置透明度：
- 盒子模型
- 预备知识：
- margin
- 快速设置：
- 居中显示：
- 外边距合并：
- 子父类div：
- margin负值：
- 边框border
- padding
- 怪异盒模型：
- div+css布局注意事项
定位
相对定位
以当前为参照物移动指定的距离
注意：相对定位，被定位的元素会占据原有的物理位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>div{width:200px;height:200px;}#box1{background: red;}#box2{background:green;/*相对定位以当前为参照物移动指定的距离注意：相对定位，被定位的元素会占据原有的物理位置*/position:relative;/*移动定位元素*/top:200px;/*bottom*/left:200px;/*right*/}#box3{background: blue;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body>
</html>
绝对定位
绝对定位的元素不会占据原有的物理位置
以其他元素作为参考物移动指定距离的定位方式
关于绝对定位的参考点：
- 如果元素的外层元素是非static（有了除默认值之外的定位设置）那么这个外层元素就成为该元素的定位参考点
- 如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)
- 如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>div{width:200px;height:200px;}#box1{background: red;}#box2{background:green;position: absolute; /*top:200px;left:200px;*/}#box3{background: blue;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body>
</html>
加上
top:200px;
left:200px;
参考点为(0,0)绝对左上角，而不是红色框左上角
如果外层元素没有定位，但是外外层（爷爷类）有定位，则有：
- 如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)
子类参考点为外外层（爷爷类）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>div{width:200px;height:200px;}#box1{background: red;}#box2{width:500px;height:500px;background:green;border:1px solid green;/*绝对定位：绝对定位的元素不会占据原有的物理位置以其他元素作为参考物移动指定距离的定位方式关于绝对定位的参考点：1.如果元素的外层元素是非static（有了除默认值之外的定位设置）那么这个外层元素就成为该元素的定位参考点2.如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)3.如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页面*//*position: absolute;*//*top:200px;*//*left:200px;*/position: relative;}#father{width:200px;height:200px;background: aquamarine;/*父类做一个定位*//*position:relative;*/margin:20px;}#son{width:100px;height:100px;background:fuchsia;position:absolute; /*son的参考点是father，但前提是father这一层（外层）必须有定位*/top:100px;left:100px;}#box3{background: blue;}</style>
</head>
<body><div id="box1"></div><div id="box2"><div id="father"><div id="son"></div></div></div><div id="box3"></div>
</body>
</html>
如果son的father没有定位，box2也没定位，则其absolute参考点为body：
固定定位
垂直滚动条：
background:palevioletred;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><style>div{height:2000px;background:palevioletred;}#box{width:80px;height:400px;background: green;position: fixed;right:0px; /*距离右边为0*/top:300px; /*距离顶部为0*/}</style>
</head>
<body>
1<div><div id="box"></div></div>
2
</body>
</html>
堆叠顺序
注意：只能支持定位元素！！！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>z-index设置定位元素z轴的距离(定位元素的显示顺序)</title><style>#one{width:200px;height:200px;background: red;position: absolute;top:100px;left:100px;z-index:1;}#two{width:200px;height:200px;background: yellow;position:absolute;top:150px;left:150px;z-index:999; /*这里设置1仍然是黄色盖住红色*/}</style>
</head>
<body><!--注意：z-index属性只支持定位元素--><div id="one"></div><div id="two"></div>
</body>
</html>
首先看代码先后顺序，渲染的是one在前，two在后，所以黄色会盖住红色，z-index可以提高层级别
display
回顾浮动：任意元素一旦浮动，display都会失效
预备知识：
- div:默认为块状元素：具有宽高属性，并且独占一行
- Span:默认为行内元素：没有宽高属性，不会独占一行
块状&行内元素的互换：
- 如果将div设置为行内元素
display: inline，则会使得div无宽高属性，且不会独占一行！
- 如果将div设置为行内元素
- 也可以将span设置为块状元素:
display:block，则可以有宽高属性，独占一行！
- 也可以将span设置为块状元素:
- 如果用了很多块状元素div，但是会独占一行，如果不想独占一行（想并列显示），则要将其改为 行内块元素：
display:inline-block——既有宽高属性 且不会独占一行，但涉及图文混排，故此方式用的较少，浮动使用较多
- 如果用了很多块状元素div，但是会独占一行，如果不想独占一行（想并列显示），则要将其改为 行内块元素：
接着将div的display改为表格属性
display:table-cell,变为单元格形式，
隐藏元素：
display:none可以将div块进行隐藏，并且不会占用原物理空间（类似：visibility:hidden隐藏效果，但仍占用物理空间）- 如果元素是使用visibility设置的隐藏方式，那么只能用
visibility：visible的方式来让元素显示;对应的，display:none要用display:block来显示！ - 总结：visibility:设置元素是否显示
visible 显示
hidden隐藏
注意：visibility和display:none的区别：visibility的隐藏方式仅隐藏了内容的显示，其占用的空间依旧占用，而display:none的隐藏方式是彻底隐藏该元素的内容和位置。 - 应用：网页中鼠标未选中时隐藏，选中时显示 展开
设置透明度：
opacity: 0;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>display</title><style>div,span{width:200px;height:200px;}div{background: red;/*设置为行内元素*//*display: inline;*//*设置元素为行内块元素，具有宽高属性，并且不会独占一行*//*display: inline-block;*//*display: table-cell;*//*隐藏元素*//*display: none;*//*display: block;*//*隐藏元素，占据原有物理位置*//*visibility: hidden;*//*如果元素是使用visibility设置的隐藏方式，那么只能用visibility：visible的方式来让元素显示*//*visibility:visible;*//*visibility:设置元素是否显示visible 显示hidden隐藏注意：visibility和display:none的区别：visibility的隐藏方式仅隐藏了内容的显示，其占用的空间依旧占用，而display:none的隐藏方式是测地隐藏该元素的内容和位置。*//*设置元素透明度*/opacity: 0;}span{/*设置为块状元素*//*display: block;*/background: fuchsia;}</style>
</head>
<body><!--div:块状元素：具有宽高属性，并且独占一行--><div>这是块状元素</div>
<!-- <div>这是块状元素</div>-->
<!-- <div>这是块状元素</div>-->
<!-- <div>这是块状元素</div>-->
<!-- <div>这是块状元素</div>-->
<!-- <div>这是块状元素</div>-->
<!-- <div>这是块状元素</div>-->
<!-- <div>这是块状元素</div>-->
<!-- <div>这是块状元素</div>--><!--行内元素：没有宽高属性，不会独占一行--><span>这是行内元素</span>
</body>
</html>
盒子模型
预备知识：
盒子与盒子之间的距离——margin：外间距
盒子内部的content与边框的间距——padding：内边距
边框也有一个厚度：border：边框
margin
快速设置：
margin:10px 10px 10px 10px顺序：上右下左
margin:20px 10px 20px上下20px，左右都为10px
margin:20px 10px上下20px，左右为10px
居中显示：
如果想要div居中，可以margin:10px auto;实现块状元素居中显示，如果改为浮动，则display失效,无法居中
外边距合并：
几个特点：
- 块级元素的垂直相邻外边距会合并
- 行内元素实际上不占上下外边距，行内元素的的左右外边距不合并
- 浮动元素的外边距也不会合并
- 允许指定负的外边距值，不过使用时要小心
取两者最大值，而非之和！
合并只有上下
子父类div：
margin负值：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型</title><style>#box{width:620px;height:620px;background: pink;}#box>div:nth-child(1){width:600px;height:200px;background: blue;float:left;}#box>div:nth-child(2){width:200px;height:200px;background: yellow;float:left;}#box>div:nth-child(3){width:200px;height:200px;background: green;float:left;/*当前元素与其他元素之间的距离 外间距*//*margin-top:10px;*//*margin-bottom:10px;*//*margin-left:10px;*//*margin-right:10px;*//*margin:10px 10px 10px 10px;*//*margin:20px 10px 20px;*//*margin:20px 10px;*/margin:10px;}#box>div:nth-child(4){width:200px;height:200px;background: aqua;float:left;}#box>div:nth-child(5){width:600px;height:200px;background: blueviolet;float:left;}#block{width:1200px;background: blue;height: 40px;/*实现让块状元素居中显示*/margin:10px auto;}#box1{margin-top: -100px;width:200px;background: red;height:200px;margin-bottom: 100px;}#box2{width:200px;background: yellow;height: 200px;margin-top:50px;}#father{width: 500px;height:200px;/*加一像素红色 实线边框*/border: 1px solid red;background: green;}#son{width:200px;height:100px;background: pink;margin-top:20px;}</style>
</head>
<body><div id="box"><div>顶部元素</div><div>左侧元素</div><div id="self">当前元素</div><div>右侧元素</div><div>底部元素</div></div><!--可以设置块状元素居中--><div id="block"></div><!--外间距合并--><div id="box1"></div><div id="box2"></div><!--包含式外间距合并--><div id="father"><div id="son"></div></div>
</body>
</html>
边框border
border: 5px solid red
每条边分开设置：
统一设置（大多数情况下）：
双线注意：
padding
总结：
padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内，但是margin并不算在宽高之内。所以在书写宽高时注意减掉内边距和边框(标准盒模型)
宽高指的是content的！回顾如图：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>padding</title><style>span{border:1px solid red;float:left;/*padding-top:10px;*//*padding-left:10px;*//*padding-right:10px;*//*padding-bottom: 10px;*//*padding:10px;*//*padding:10px 20px;*//*padding: 10px 20px 15px;*/padding: 10px 20px 30px 40px;}div{width:150px;height:150px;background: red;clear: both;border:5px solid red;padding: 20px;/*margin:20px;*//*padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内，但是margin并不算在宽高之内。所以各位在书写宽高时注意减掉内边距和边框(标准盒模型)*/}</style>
</head>
<body><span>这是内容</span><div></div>
</body>
</html>
怪异盒模型：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>怪异盒</title><style>div{width:200px;height:200px;padding:20px;border:5px solid red;background: red;/*设置怪异盒*/box-sizing: border-box;}</style>
</head>
<body><div></div>
</body>
</html>
div+css布局注意事项
CSS+div布局总结（快速入门，附代码）相关推荐
- HTML+CSS大作业web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- 【小5聊】使用js+css+div布局方式画一棵圣诞树，带闪烁霓虹灯效果
虽然jQuery时代已经逐渐退出历史舞台,在拥抱vue的同时,也还是可以用jQuery锻炼下编程思维,毕竟比较灵活. 1.适合基础入门的前端小伙伴 2.适合使用jQuery锻炼实现前端效果小伙伴 3. ...
- DIV布局——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 文章目录 HTML5期末大作业:仿英雄联盟网站设计- ...
- 基于UI组件的Vue可视化布局、快速生成.vue代码
一.项目简介 基于UI组件的Vue可视化布局.快速生成.vue代码 二.实现功能 通用(文本.链接.换行.div.图片) 支持elementUI 支持iViewUI(button .icon.radi ...
- dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...
第12章 CSS+Div布局;1. 盒子模型2. 布局技术3. "上中下"布局4. "左中右"布局;12.1.1盒子结构网页中元素都占据一定的空间,除了元素内容 ...
- html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
- css+div布局实现简历界面
工具 IntelliJ IDEA,Photoshop CS3 材料 简历(PDF) 步骤 1 根据div布局思想切分简历 2使用ps cs3将简历中出现图标合成到一张图中 3.css+div布局实现简 ...
- HTML5期末大作业：生活服务网站设计——生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人 ...
- HTML5期末大作业：仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 ...
- html中中波浪线怎么弄,css实现波浪线及立方体 (附代码)
本篇文章给大家带来的内容是关于css实现波浪线及立方体 (附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近的项目有做到要画出波浪线效果,这里是利用linear-gradi ...
最新文章
- 解决Android studio 非法字符的问题
- 子弹短信体验分析：一个单纯想“快”的IM工具 子弹短信体验分析：锤科情怀缩影，打败微信有点远
- ubuntu adb 调试手机
- 高并发负载均衡（四）：基于keepalived的LVS高可用搭建
- 手把手带你手写SpringMVC，剑指优秀开源框架灵魂
- C# 操作Sqlite
- Mono for Unreal Engine发布，C#进入虚幻引擎（Unreal Engine）
- 2019 年，C# 还值得学习吗？
- 客户端连接openfire报错解决
- xilinx sdk文本编辑器显示行数
- Android中Audio框架
- linux命令格式，获取帮助及其目录结构简要理解
- 7.过渡案例：①进度条 ②小米图标翻转(父盒子一定要加初始值！！！)
- 利用python画简单图形示例代码_使用python画社交网络图实例代码
- 脚本文件和函数文件的区别
- NetSpeeder V3.70 绿色特别版
- ssms连接mysql_SQL Server安装以及使用SSMS连接数据库
- 机械零件委托加工合同
- MySQL的隐式类型转换
- 产品与解决方案的问题。