html_css_1_盒子

最新推荐文章于 2023-12-20 20:59:16 发布

tellmeyesorno

最新推荐文章于 2023-12-20 20:59:16 发布

阅读量272

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/u010247166/article/details/91127241

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

- 1.盒子模型

1.盒子模型

1.1 为什么要用

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

1.2 盒子模型

一个盒子我们会分成几个部分：
– 内容区(content)
– 内边距(padding)
– 边框(border)
– 外边距(margin)
在这里插入图片描述

1.2.1 内容区-content

内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。
如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。
通过width和height两个属性可以设置内容区的大小。 width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
盒子可见框的大小由内容区，内边距和边框共同决定
width和height属性只适用于块元素。

1.2.2 内边距-padding

内边距指的就是元素内容区与边框以内的空间。
默认情况下width和height不包含padding的大小。
使用padding属性来设置元素的内边距。
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
* 盒子的大小由内容区、内边距和边框共同决定
* 盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
* 可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

padding:10px 20px 30px 40px
这样会设置元素的上、右、下、左四个方向的内边距。其实就是顺时针方向
padding:10px 20px 30px;
分别指定上、左右、下四个方向的内边距
padding:10px 20px;
分别指定上下、左右四个方向的内边距
padding:10px;
同时指定上左右下四个方向的内边距
同时在css中还提供了padding-top、 padding-right、 paddingright、 padding-bottom分别用来指定四个方向的内边距。

1.2.3 边框-border

可以在元素周围创建边框，边框是元素可见框的最外部。
可以使用border属性来设置盒子的边框：
– border:1px red solid;
– 上边的样式分别指定了边框的宽度、颜色和样式。
– 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
– 而且没有任何的顺序要求
– border一指定就是同时指定四个边不能分别指定
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
和padding一样，默认width和height并包括边框的宽度。
大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none
边框的样式
– none（没有边框）
– dotted（点线）
– dashed（虚线）
– solid（实线）
– double（双线）
– groove（槽线）
– ridge（脊线）
– inset（凹边）
– outset（凸边）

1.2.4 外边距-margin

外边距是元素边框与周围元素相距的空间。他不会影响可见框的大小，而是会影响到盒子的位置。
由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置
使用margin属性可以设置外边距。
用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。
当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。

  		 * margin还可以设置为auto，auto一般只设置给水平方向的margin
  		 * 	如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
  		 * 	垂直方向外边距如果设置为auto，则外边距默认就是0
  		 * 
  		 * 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
  		 * 	就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
  		 * 	以使子元素在父元素中水平居中
  		 * margin: 0 auto;上下为0，左右距离相同

外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动
垂直外边距的重叠

  	 * 在网页中相邻的垂直方向的外边距会发生外边距的重叠
  	 * 		所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
  	 * 		如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素,如下图

在这里插入图片描述
若要把4往下移，而3不动，那么可以如下设置：

1.给3设置border-top: 1px red solid;让边框隔离4和3即可
2.给3设置padding-top: 1px;也是让4和3隔离不重叠即可
3.给3设置padding-top: 100px;这样设置，会把3增加高度，然后再设置height: 100px;截取一下即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px solid red;
            margin: 0 auto;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

在这里插入图片描述

1.3 内联元素

内联元素不能设置width和height
设置水平内边距,内联元素可以设置水平方向的内边距
垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局(意思就是元素随便变，但是其他元素的位置大小是还是原来的，不会移动)
内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
内联元素支持水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和
内联元素不支持垂直外边距

1.4 浏览器默认样式

			/*
			 * 浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
			 * 	所以为很多的元素都设置了一些默认的margin和padding，
			 * 	而它的这些默认样式，正常情况下我们是不需要使用的。
			 * 
			 * 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
			 * 清除浏览器的默认样式
			 */
			*{
				margin: 0;
				padding: 0;
			}

1.5 display与visibility

当不能为行内元素设置width、 height、margin-top和margin-bottom时，可以通过修改display来修改元素的性质。
可选值：
* inline：可以将一个元素作为内联元素显示
* block: 可以将一个元素设置块元素显示
* inline-block：将一个元素转换为行内块元素，可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
* none: 不显示元素，并且元素不会在页面中继续占有位置

visibility属性主要用于元素是否可见。

和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
可选值：
– visible：可见的
– hidden：隐藏的

1.6 overflow

当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。
可以通过overflow来控制内容溢出的情况。
可选值：
– visible：默认值
– scroll：添加滚动条
– auto：根据需要添加滚动条
– hidden：隐藏超出盒子的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				/*
				 * 子元素默认是存在于父元素的内容区中，
				 * 		理论上讲子元素的最大可以等于父元素内容区大小
				 * 	如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，
				 * 		超出父元素的内容，我们称为溢出的内容
				 *  父元素默认是将溢出内容，在父元素外边显示，
				 * 	通过overflow可以设置父元素如何处理溢出内容：
				 * 		可选值：
				 * 			- visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
				 * 			- hidden, 溢出的内容，会被修剪，不会显示
				 * 			- scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
				 * 					- 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
				 * 			- auto，会根据需求自动添加滚动条，
				 * 						需要水平就添加水平
				 * 						需要垂直就添加垂直
				 * 						都不需要就都不加
				 */
				overflow: auto;
			}
			
			.box2{
				width: 100px;
				height: 500px;
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		
		<div class="box1">
			在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。
哇的一声，夜游的恶鸟飞过了。
我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。
后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。
猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。
我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。
一九二四年九月十五日。 
		</div>
		
	</body>
</html>