前端（七）—— 盒模型之display、overflow、隐藏、border、margin、样式支持，层级结构
display、overflow、隐藏、border、margin、样式支持，层级结构
一、盒模型之display
1、三种样式
| block | 块 |
| inline | 内联/行内 |
| inline-block | 内联块 |
2、block、inline、inline-block的区别
（1）display:block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度
- 可以设置宽高，宽默认适应父级，高默认由子级或内容撑开
- 设置宽高后，一定采用设置的宽高
（2）display:inline
- 同行显示，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- 不支持宽高
（3）display:inline-block
- 同行显示，之间有间距
- 支持宽高，宽高由内容撑开
- 设置宽高后，一定采用设置的宽高，但只设置其中一个，另一个会根据内容等比缩放
3、嵌套规则
- 块可以嵌套所有类型(p一般只允许嵌套内联)
- 内联一般只嵌套内联
- 内联块一般只作为最内层级
div的display默认为block
4、案例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>display</title>
<!-- 默认值 -->
<style type="text/css">
/*块:1.独行显示 2.支持宽高,宽默认适应父级,高默认由子级或内容撑开 3.设置宽高后,一定采用设置的宽高*/
/*内联:1.同行显示 2.不支持宽高*/
/*内联块:1.同行显示,之间有间距 2.支持宽高,宽高由内容撑开 3.设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放*/ /*嵌套规则:*/
/*块可以嵌套所有类型(p一般只允许嵌套内联)*/
/*内联一般只嵌套内联*/
/*内联块一般只作为最内层级*/
div {
/*块*/
display: block;
/*自适应父级可用content的宽度*/
/*width: auto;*/
/*默认0*/
/*height: 0px;*/
}
span {
/*内联*/
display: inline;
/*不支持宽高*/
}
img {
/*内联块*/
display: inline-block;
width: auto;
height: auto;
}
</style>
<!-- 验证宽高设置 -->
<style>
.sup {
/*width: 100px;*/
/*height: 100px;*/
background-color: orange
}
.sub {
width: 200px;
height: 200px;
background-color: cyan
}
.s1, .s2 {
width: 200px;
height: 200px;
background-color: brown
}
img {
/*width: 350px;*/
height: 350px;
}
</style>
</head>
<body>
<div></div>
<span></span>
<img src="./img/icon.jpg" alt="">
<img src="./img/icon.jpg" alt=""> <div class="sup">
<div class="sub"></div>
</div>
<span class="s1">123</span>
<span class="s2">456</span> </body>
</html>
display案例
二、盒模型之overflow
在display:block的大环境之下
1、功能
用于调整显示区域，当父级区域太小，不能在父级的区域内完全显示子级的内容，课通过overflow来调整显示结果
2、显示方式
| auto / scroll | 以滚动的方式允许子级所有内容显示 |
| hidden | 只显示在父级区域中的内容，不在该区域中的内容不显示 |
3、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>voerflow</title>
<!-- 由父级大小决定 -->
<style type="text/css">
/*子级区域大于父级*/
.sup {
width: 100px;
height: 100px;
/*默认值*/
/*border: 3px none black;*/
/*清除边框*/
/*border: 0;*/
/*border: none;*/
/*最简单的设置*/
border: solid;
}
.sub {
width: 200px;
height: 200px;
background-color: red
}
/*对父级进行overflow设置*/
.sup {
/*以滚动的方式允许子级所有内容显示*/
overflow: auto;
/*overflow: scroll;*/ /*只运行子级在父级所在区域的部分显示,超出的部分影藏*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<!-- display: block大环境下 -->
<!-- <div class="sup">
<div class="sub"></div>
</div> -->
<div class="sup">
呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿
</div>
</body>
</html>
overflow案例
三、盒模型之隐藏
1、三种隐藏的方式
.d1 {
background-color: red;
/*1. 以背景颜色透明度隐藏,不推荐*/
/*盒子还在,内容或子级标签均会被显示*/
background-color: transparent;
}
.d2 {
background-color: orange;
/*2. 以盒子透明度隐藏:0~1*/
/*盒子真正意思上透明,但盒子区域占位还在*/
opacity:;
}
.d3 {
background-color: cyan;
/*3. 盒子从文档中移除,盒子的区域占位消失*/
/*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/
display: none;
}
2、应用
鼠标悬浮在某一个区域，才显示内容，否则内容隐藏
/*鼠标悬浮在.d3标签上才显示隐藏的内容*/
/*注意display是根据隐藏内容的方式确定显示内容的方式*/
.body:hover .d3{
display:block;
}
3、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隐藏</title>
<style type="text/css">
/*盒子间会相互影响*/
div {
width: 100px;
height: 100px;
}
.d1 {
background-color: red;
/*以背景颜色透明度隐藏,不需要掌握*/
/*盒子还在,内容或子级标签均会被显示*/
background-color: transparent;
}
.d2 {
background-color: orange;
/*以盒子透明度隐藏:0~1*/
/*盒子真正意思上透明,但盒子区域占位还在*/
opacity: 0;
}
.d3 {
background-color: cyan;
/*盒子从文档中移除,盒子的区域占位消失*/
/*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/
display: none;
}
.d4 {
background-color: yellow;
}
/*需求:通过悬浮body让d3重新显示*/
/*1.明确控制的对象 2.确定对该对象的修饰 3.找出修饰与对象的关系*/
/*body:hover .d3*/
.d1:hover ~ .d3 {
display: block;
}
</style>
</head>
<body>
<div class="d1">内容</div>
<div class="d2">内容</div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>
隐藏显示的案例
四、盒模型之border
可以通过对border四个方位的调整显示各种规则，例如调整各个方位的是否透明（transparent），可以实现获取三角形、梯形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<!-- 画梯形 -->
<style type="text/css">
.bd {
width: 100px;
height: 100px;
background-color: transparent;
}
.bd {
/*border: 50px solid orange;*/
border-top: 50px solid orange;
border-right: 50px solid cyan;
border-bottom: 50px solid yellow;
border-left: 50px solid blue;
/*border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;*/
}
</style>
<!-- 画三角形 -->
<style type="text/css">
.bd {
width: 0;
height: 0;
}
.bd {
border-top: 50px solid orange;
border-right: 50px solid cyan;
border-bottom: 50px solid yellow;
border-left: 50px solid blue;
}
/*吃球球的小球*/
/*.bd {
border-radius: 50%;
border-right: 50px solid transparent;
}*/
</style>
</head>
<body>
<div class="bd"></div>
</body>
</html>
案例
五、盒模型之margin
/*需求1:父级sup左上右顶格显示*/
html, body {
/*body默认具有margin: 8px*/
margin:;
}
.sup {
width: auto;
height: 200px;
background-color: red;
}
.sub {
width: 100px;
height: 100px;
background-color: orange;
} /*需求2:子级sub在父级sup的水平中央显示*/
.sub {
/*上下0,左右auto*/
/*auto:左右auto,自适应(平方)剩余可布局空间*/
margin: 0 auto;
} /*需求3:sub在sup的垂直中央显示*/
/*垂直会遇到margin父子坑*/
.sup {
height: 100px;
padding: 50px 0;
}
/*.sup {
height: 100px;
border-top: 50px solid red;
border-bottom: 50px solid red;
}*/ /*需求4:sub在sup的水平居右显示*/
.sub {
margin-left: auto;
/*margin-right: 0;*/
margin-right: 10px;
}
六、盒模型之样式支持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式支持</title>
<!-- 认识a标签一般怎么操作 -->
<!-- 需求:具有页面转跳功能的图片 -->
<style type="text/css">
a {
color: #333;
text-decoration: none;
display: block;
}
</style>
<!-- 需求:图片在sup水平垂直中央显示 -->
<!-- part1 -->
<style type="text/css">
.sup {
width: 500px;
/*height: 500px;*/
background-color: red;
}
/*水平居中*/
/*display对margin的支持*/
/*block支持所有margin布局*/
/*inline与inline-block只支持margin上下布局*/
.sub {
display: block;
margin: 0 auto;
}
/*垂直居中*/
.sup {
/*去除高度设置*/
padding: 50px 0;
}
</style>
<!-- part2 -->
<style type="text/css">
.box {
width: 500px;
height: 500px;
background: url('img/icon.jpg') no-repeat center orange;
}
</style>
</head>
<body>
<!-- 认识a标签一般怎么操作 -->
<!-- 需求:具有页面转跳功能的图片 -->
<!-- <a href="">
<img src="img/icon.jpg" alt="">
</a> --> <!-- 需求:图片在sup水平垂直中央显示 -->
<!-- part1 -->
<div class="sup">
<img class="sub" src="img/icon.jpg" alt="">
</div>
<!-- part2 -->
<div class="box"></div>
</body>
</html>
七、盒模型之层级结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级结构</title>
<style type="text/css">
.d5 {
width: 200px;
height: 100px;
background: red;
}
.d2, .d3, .d4 {
width: 80px;
height: 40px;
background: orange
}
/*.d4 {
margin-left: 160px;
margin-top: -80px;
}*/
.d3 {
margin-left: 80px;
margin-top: -40px;
}
.d4 {
margin-left: 160px;
margin-top: -40px;
}
/*没有层级结构情况下:*/
/*1.盒子布局间相互影响程度很大*/
/*2.要严格遵循从上至下布局顺序进行布局*/
/*问题点:牵一发动全身*/
</style>
<style type="text/css">
.menu {
width: 200px;
height: 100px;
background: red;
}
.html, .css, .js {
width: 80px;
height: 40px;
background: orange
}
.nav {
width: calc(80px * 3);
height: 40px;
}
.css {
margin-top: -40px;
margin-left: 80px;
}
.js {
margin-top: -40px;
margin-left: 160px;
}
/*menu的布局只与nav有连带关系,与实际显示内容的html,css,js不具有任何连带关系*/
</style>
</head>
<body>
<!-- 无层次结构 -->
<!-- <div class="d1">w3c</div>
<div class="d2">html</div>
<div class="d3">css</div>
<div class="d4">js</div>
<div class="d5">menu</div> --> <!-- 有层次结构 -->
<div class="title">w3c</div>
<div class="nav">
<div class="html">html</div>
<div class="css">css</div>
<div class="js">js</div>
</div>
<div class="menu">menu</div>
</body>
</html>
前端（七）—— 盒模型之display、overflow、隐藏、border、margin、样式支持，层级结构的更多相关文章
- 前端css盒模型及标准文档流及浮动问题
1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...
- 详细介绍弹性盒模型（display：flex）
弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box:这里,我们暂时不考虑旧的,我们只看新的. 为容器指定弹性盒子,只需在父元素(也就是容器)中设置:dis ...
- 一天搞定CSS：盒模型content、padding、border、margin--06
1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物 ...
- 前端笔记（关于css盒模型知识整理）
我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...
- （转）详解css3弹性盒模型（Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- box flex 弹性盒模型（转载）
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- css3弹性盒模型（Flexbox）
Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当 ...
- css3教程：弹性盒模型
Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- 详解css3弹性盒模型（Flexbox）
目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex ...
随机推荐
- for循环中执行setTimeout问题（任务队列的问题）
for(var i=0;i<8;i++){ setTimeout(function () { console.log(i) },0) } 输出了8次8,这跟js的执行顺序和作用域链有关. 规则: ...
- Java8环境设置
假设你已经安装在 C:Program Filesjavajdk 目录: 在“我的电脑”右键单击并选择“属性”. 在“高级”选项卡下单击“环境变量”按钮. 现在,改变“Path”变量,因此,它也包含了路 ...
- 使用mybatis进行一对多嵌套查询时出错：输出结果：Country{id=2, name='美国', minister=[null]}
即Minister类作为Country类的关联属性. 查询的输出结果是:Country{id=2, name='美国', minister=[null]} <!--mapper.xml内容--& ...
- 第六周实验总结&学习总结
一.实验目的 (1)掌握类的继承方法 (2)变量的继承和覆盖,方法的继承,重载和覆盖实现 二.实验内容 源代码 package java2; import java.util.Scanner; cla ...
- XSS注入方式和逃避XSS过滤的常用方法（整理）
(转自黑吧安全网http://www.myhack58.com/) web前端开发常见的安全问题就是会遭遇XSS注入,而常见的XSS注入有以下2种方式: 一.html标签注入 这是最常见的一种,主要入 ...
- Zabbix Server 和 Zabbix Agentd 开机自动运行
Zabbix Server 和 Zabbix Agentd 开机自动运行 请问:怎样 Zabbix Server 和 Zabbix Agentd 开机自动运行? 注:如果你的命令行写进了 /etc/r ...
- python-模块-包
一 模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编 ...
- CF1215D
CF1215D 两个整数的和是偶数,他们的差也是偶数 博弈好难啊qaq 我好zz啊qaq 如果M放最后一个M胜 现在和比较大的一边如果空位还多的话M胜 M可以通过在大的那边放9来消掉那边所有的空 由于 ...
- 将Eclipse项目转换成AndroidStudio项目过程中遇到的问题以及解决方法
将Eclipse项目转换成AndroidStudio项目也不是第一次了,昨天转的时候遇到几个问题: 首先将项目导入androidstudio,导完后报错: 问题一: Error:java.util.c ...
- Django rest_framework 频率控制组件
频率控制 一.频率控制实现一 from rest_framework.views import APIView from rest_framework.response import Response ...