python 46 盒模型 与盒模型布局
2024-10-06 23:29:59
一：盒模型
1、 盒模型的概念
广义盒模型：文档中所有功能性及内容性标签，及文档中显示性标签
侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
盒模型组成：margin + border + padding + content
v_hint（提示）：content = width x height
2、 盒模型成员介绍
content \ border \ padding \ margin
1. content
- 通过设置width与height来规定
- 块级标签，可以设置自身宽高，默认宽父级宽（width = auto）、高为0（可由内容决定）
- 内联标签，不可以设置自身宽高，默认宽高均为0，宽高一定是由内容决定的
2.border
border（边框）由border-width（宽度）、border-color（颜色）、border-style（风格）三部分组成
border成员：border-left 、border-right 、border-top 、border-bottom
3.padding
- padding成员：padding-left 、padding-right 、padding-top 、padding-bottom
- 整体设置
4.margin
- margin成员：margin-left 、margin-right 、margin-top 、margin-bottom
- 整体设置
二：盒模型布局
分为两大布局：
影响自身布局
影响兄弟布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型布局</title>
<style>
/*做页面必备reset操作*/
html, body {
margin: 0
}
.box, .wrap {
width: 200px;
height: 200px;
background-color: red;
}
.wrap {
background: orange;
}
/*影响自身布局*/
/*.box {
margin-top: 30px;
margin-left: 100px;
}*/
/*影响兄弟布局*/
/*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/
/*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/
.box {
/*margin-bottom: 30px;*/
margin-right: 100px;
} /*display:显示方式*/
/*块:block*/
/*内联:inline*/
/*内联块:inline-block*/
.box, .wrap {
display: inline-block;
/*vertical-align: top;*/
} /*兄弟坑*/
/*盒模型布局坑只出现在和margin-top相关的地方*/
.s1, .s2 {
width: 100px;
height: 100px;
background-color: pink;
}
/*重叠取大值*/
.s1 {
margin-bottom: 30px;
}
.s2 {
margin-top: 50px;
} /*父子坑*/
.sup {
width: 200px;
height: 200px;
background-color: cyan;
}
.sub {
width: 100px;
height: 100px;
background-color: orange;
}
/*父子top重叠,取大值*/
.sup {
margin-top: 50px;
}
.sub {
margin-left: 50px;
}
/*解决盒模型经典布局坑*/
/*1.将父级固定*/
.sup {
/*border-top: 1px solid black;*/
/*border-top: 1px solid transparent;*/
/*保证显示区域 200*200 */
/*height: 199px;*/
}
.sub {
/*margin-top: 50px;*/
}
/*2.通过padding*/
.sup {
padding-top: 50px;
height: 150px;
} </style>
</head>
<body>
<div class="box"></div>
<div class="wrap"></div> <!-- 坑 -->
<section class="s1"></section>
<section class="s2"></section> <div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
盒模型的两种布局方式
最新文章
- YUM仓库服务
- ArcEngine中打开各种数据源（WorkSpace）的连接
- linux命令笔记
- 前端Html和Css面试题
- [转载]Linux编程 sockaddr_in 和sockaddr和in_addr详解
- java -Xms -Xmx -XX:PermSize -XX:MaxPermSize
- Java中设计模式之装饰者模式-3
- centos下安装mysql（安装，启动，停止，服务端口查询，用户密码设定）
- 初探机器学习之使用百度EasyDL定制化模型
- 常见jquery面试题
- vue解决前后端跨域问题
- Submine Text3格式化HTML/CSS/JS代码
- Microsoft Artificial Intelligence Conference（2018.05.21）
- js条件语句初步练习
- Java实现FTP与SFTP文件上传下载
- ios证书生成
- SVN文件加锁
- php脚本输出js代码不执行的解决办法和原理。
- selenium自动化测试通过localstorage绕过登陆
- input 禁止 复制 粘贴 剪切 操作