潭州学院html学习(day05)
一.盒子模型(本文部分内容摘自:https://www.cnblogs.com/smyhvae/p/7256371.html)
盒子模型原理
盒子模型(box model)。无论div,span,a都是盒子模型。
图片,表单都不是盒子,他们是文本,因为它们不能放图片
盒子中的区域
一个盒子主要的区域就5个:width,height,padding,margin,border
- width和height:内容的宽度、高度(不是盒子的宽度、高度)。
- padding:内边距。
- border:边框。
- margin:外边距。
理解css盒子模型
可以把它当成日常中的一个盒子去理解。content就是盒子里装的东西,它有高度(height)和宽度(width),可以是图片,可以是文字或者小盒子嵌套,在现实中,内容不能大于盒子,内容大于盒子就会撑破盒子,但在css中,盒子有弹性的,顶多内容太大就会撑大盒子,但是不会损害盒子。padding即是填充,就好像我们为了保证盒子里的东西不损坏,填充了一些东西,比如泡沫或者塑料薄膜,填充物有大有小,有软有硬,反应在网页中就是padding的大小了。而再外一层就是border边框,因为边框有大小和颜色的属性,相当于盒子的厚度和它的颜色或者材料。margin外边距,就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子,margin就是盒子堆码直接的距离,可以通风,也美观同时方便取出。
我们理解了盒子模型,有助于我们了解一个元素的最终尺寸是怎么样决定的,同时也帮助我们理解元素在网页上是如何定位的,而盒子模型主要适用于块级元素。
Padding
- 内容区域
width height background
- 内边距
值:px %(基于夫级元素的宽度)
属性分别代表内边距上 下 左 右四个方向的内边距
padding-top/bottom/left/right:
- 复合属性
一个值,四个方向
padding:10px;
- 两个值:上下 左右
padding: 10px 20px;
- 三个值:上 左右 下
padding:10px 20px 30px;
- 四个值:上 右 下 左
padding:10px 20px 30px 40px;
- 百分比:
padding:10px;
border
border就是边框。边框有三个要素:像素(粗细)、线型、颜色。
颜色如果不写,默认是黑色。另外两个属性不写,显示不出来边框。
border-style:
none : 无边框(默认值)
solid:实线
dashed:虚线
dotted:点状线
double:双实线
groove :3D凹槽
ridge:3D立槽
inset:3D嵌入边框1
outset:3D嵌入边框2
border拆分
border是一个大综合属性。比如说:
border:1px solid red;
就是把4个边框,都设置为1px宽度、线型实线、red颜色。
border属性是能够被拆开的,有两大种拆开的方式:
-
(1)按三要素拆开:border-width、border-style、border-color。(一个border属性是由三个小属性综合而成的)
-
(2)按方向拆开:border-top、border-right、border-bottom、border-left。
1)按三要素拆:
border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。
等价于:
border:10px solid red;
(2)按方向来拆:
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等价于:
border:10px solid red;
(3)按三要素和方向来拆:(就是把每个方向的,每个要素拆开。3*4 = 12)
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
实例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box1{ width: 200px; height:200px; background-color: green; border-width: 10px 20px; border-color: red pink gold green; border-style: solid dashed dotted; margin: 15px; } .box2{ width: 100px; height:100px; background-color: red; border-width: 10px; border-color: green; border-style: solid; margin: 10px; } </style> </head> <body> <div class="box1"> <div class="box2"> </div> </div> </body> </html>
Margin(跟padding的用法一样)
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; margin: 0;} .box1{ width: 100px; height: 100px; background: #ccc; /*外边距 值:px %(基于父级元素的宽度) */ /*一下属性分别代表外边距 上 右 下 左 四个方向的外边距*/ /*margin-top: 10px; */ /*margin-right: 20px;*/ /*margin-bottom: 30px;*/ /*margin-left: 40px;*/ /*复合属性*/ /*一个值:四个方向*/ margin: 10px; /*两个值:上下 左右*/ /*margin: 10px 20px;*/ /*两个值:上 左右 下*/ /*margin: 10px 20px 30px;*/ /*两个值:上 右 下 左*/ /*margin: 10px 20px 30px 40px;*/ /*百分比*/ /*margin: 10%;*/ } </style> </head> <body> <div class="box1"></div> </body> </html>
外边距合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; margin: 0;} /*垂直外边距合并:当上下相邻的两个元素,在相邻的面同时拥有外边距时,其外边距值只会取其中较大的值*/ /*.box1{ background: black; margin-bottom: 30px; }*/ /*.box2{ background: green; margin-top: 50px; }*/ /*内外边距合并 1. 当父子关系的两个元素,子级拥有上外边距时,其外边距不会作用于父级,而是会传递给父级 2. 当父元素和子元素都有上下外边距时,合并后的外边距会取其中较大者 为什么会造成内外边距合并? 子元素和父元素直接接触了 解决办法: 1.给父级元素加上内边距 2.给父级元素加上边框 3.在父级元素和子元素之间添加元素或者内容,元素的内容不能为空。 */ /*.box1{*/ /*width: 200px;*/ /*height: 200px;*/ /*background: green;*/ /*margin-top: 70px;*/ /*}*/ /*.box2{*/ /*width: 100px;*/ /*height: 100px;*/ /*background: yellowgreen;*/ /*margin-top: 50px;*/ /*}*/ .box1{ width: 200px; height: 200px; background: green; } .box2{ width: 100px; height: 100px; background: yellowgreen; margin-top: 50px; } </style> </head> <body> <div class="box1"> <p>我是p标签</p> <div class="box2"></div> </div> </body> </html>
清除默认样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*通配符选择器优先级最低*/ *{ padding: 0; margin: 0; } /*清除所有标签的默认内外边距*/ ul,ol{ list-style: none; } a{ text-decoration: none; color: inherit; } </style> </head> <body> <!-- 1. 避免重复定义他们,提高样式代码的重用。 2. 设置自己的风格,字体,颜色等。 3. 减少代码->减少维护成本 4. 可以提供完全空白的画布,然后你就可以自己定义相应的样式了。 5. 开发更加有逻辑性:你只是添加样式而不是移除和修改。 6. 浏览器的兼容性问题可以降到最小。(每个浏览器默认样式不一样,比如行高,某个浏览器是1,另外一个浏览器可能是1.1,这样在开发网页写样式表的时候,处理起来比较麻烦,所以直接给重置统一,这样就能很方便的处理兼容性。) --> <h1>我是h1标签</h1> <h2>我是h2标签</h2> <p>我是p标签</p> <ul> <li>我是li</li> </ul> <a href="">百度一下</a> </body> </html>