WEB安全 DIV CSS基础 2

FreeWinds998

于 2024-05-23 11:46:35 发布

阅读量1.4k

点赞数 22

文章标签： css 前端

本文链接：https://blog.csdn.net/FreeWinds998/article/details/139135520

版权

WEB安全 DIV CSS基础2

11.盒子模型

盒子模型的组成部分

外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性

自身的身高 width height

内边距 padding

盒子边框 border

与其他盒子的距离 margin 外边距

	<style>
		.demo9{
			margin: 10px;/* 外边距 */
			border: 1px solid red;/* 盒子边框颜色 */
			padding: 50px;/* 内边距 */
			width: 80px;/* 宽度 */
			
		}
	</style>

在这里插入图片描述

12.Border 边框

常见的写法 border:1px solid #foo;

单独属性:
border-widh:
border-style:
dotted 点状虚线
dashed（虚线）
solid（实线）
double（双实线）
border-color(颜色)

<style>
			.demo10{
				border-width: 5px;
				border-top: dotted;
				border-bottom: dashed;
				border-left: solid;
				border-right: double;
				border-color: rebeccapurple;
				width: 500px;
				height: 500px;
			
			}

在这里插入图片描述

12.1margin（内边距） padding（外边距）

padding:内边距
值：像素/厘米等长度单位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下左右
padding:10px 10px 10px; 上左右下
padding:10px 10px 10px 10px; 上右下左（设置4个点–>顺时针方向）
单独属性

padding-top:
padding-right:
padding-bottom:
padding-left:

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

margin 外边距

值：与padding相同

单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

margin
margin:10px 上下左右都会腾出10px出来
margin:0px auto; 居中

	<style>
		.demo11{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			margin: auto;
			margin-bottom: 50px;
			text-align: center;/* 内容居中 */
			/* padding:10px; 上下左右
			padding:10px 10px; 上下 左右
			padding:10px 10px 10px; 上 左右 下
			padding:10px 10px 10px 10px; 上 右 下 左 */
			
		}
	</style>

在这里插入图片描述

13.float 脱离文档流浮动

left 元素向左浮动。
right 元素向右浮动

清除浮动

clear: both;
left
right

	<style>
		div{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			/* float: left; */
		}
		.div1,.div2{
			float: left;
		}
		.div3{
			float: right;
		}
		.div4{
			width: 400px;
			height: 400px;
			border: 1px solid blue;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="div1">
		div1
	</div>
	<div class="div2">
		div2
	</div>
	<div class="div3">
		div3
	</div>
	<div class="div4">
		div4
	</div>
</body>

在这里插入图片描述

14.14.块级元素、行内块级元素：

他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；
块级元素可以设置width、height属性；
块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；

行内元素：

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；
行内元素的width、height属性则无效；
行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

行内元素转换

display:none; 不显示
display:block;变成块级元素
display:inline; 变成行内元素
display:inline-block;以块级元素样式展示，以行级元素样式排列

块级元素(block element）

address 地址
center 举中对齐块
div- 常用块级容易
dl 定义列表
form 交互表单（只能用来容纳其它块元素）
h标签
hr 水平分隔线
ol 无需列表
ul有序列表
p 段落
pre 格式化文本

	<style>
		.demo15,h1,form{
			border: 1px solid red;
			width: 400px;
			height: 100px;
		}
		
	</style>
</head>
<body>
	<div class="demo15">
		demo15
	</div>
	<h1>h1</h1>
	<form action="">表单</form>
	<a href="www.sogou.com">sogou</a><label >标签</label><input type="text" value="输入内容"/>

行内元素：

a - 锚点
b - 粗体(不推荐)
br- 换行
code - 计算机代码(在引用源码的时候需要)
em - 强调
i - 斜体
img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）
当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}
input - 输入框
label - 表格标签
select - 项目选择
strong - 粗体强调
textarea - 多行文本输入框
u - 下划线
var - 定义变量

替换元素有如下：（和img一样的设置方法）

、、、
都是替换元素，这些元素都没有实际的内容元素

	<style>
		.demo16,.demo17{
			border: 1px solid red;
			width: 400px;
			height: 100px;
			display: block;/* 块级元素转换为行内元素  inline（行内元素）none（隐藏）block（转化为块级元素）*/
			
		}
		.s1,.s2{
			border: 1px solid red;
			display: inline-block;/*以块级元素样式展示，以行级元素样式排列 */
			height: 100px;
			width: 100px;
		}
	</style>
</head>
<body>
	<div class="demo16">
		demo16
	</div>
	<div class="demo17">
		demo17
	</div>
	<span class="s1">sssss</span><span class="s2">sssssss</span>

在这里插入图片描述

15.溢出

overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

	<style>
		.demo17{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			overflow:scroll;
		}
	</style>
</head>
<body>
	<div class="demo17">sssssssssssssssssssssssssssssssss</div>
</body>

在这里插入图片描述

16.定位

position
static静态定位（不对它的位置进行改变，在哪里就在那里）

默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。
fixed固定定位（参照物–浏览器窗口）—做弹窗广告用到

生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, "right"以及 "bottom"属性进行规定。
relative（相对定位）（参照物以他本身）

生成相对定位的元素，相对于其正常位置进行定位。
absolute（绝对定位）(除了static都可以，找到参照物–>与它最近的已经有定位的父元素进行定位)

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

	<style>
		div{
			width: 300px;
			height: 300px;
		}
		.div1{
			background-color: aqua;
		
		}
		.div2{
			width: 500px;
			height: 500px;
			background-color: blue;
			position: relative;/* 相对定位 */
			left: 40px;
			top: 50px;
		}
		.div3{
			background-color: rebeccapurple;
		}
		.div4{
			width: 150px;
			height: 150px;
			background: yellow;
			position: absolute;
			top: 30px;
			left: 80px;
			z-index: 2;/* 堆叠数字大在前 */
		}
		.div5{
			width: 150px;
			height: 150px;
			background: green;
			position: absolute;
			top: 100px;
			left: 150px;
			z-index: 1;/* 堆叠数字小在后 */
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"><div class="div4"></div><div class="div5"></div></div>
	<div class="div3"></div>
</body>

在这里插入图片描述

FreeWinds998

关注

22
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
WEB安全 DIV CSS基础 2

盒子模型的组成部分外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性自身的身高 width height内边距 padding盒子边框 border与其他盒子的距离 margin 外边距。
复制链接

扫一扫