十四，div设置

最新推荐文章于 2024-05-06 17:55:51 发布

好多可乐

最新推荐文章于 2024-05-06 17:55:51 发布

阅读量3k

点赞数 2

分类专栏： CSS基础

本文链接：https://blog.csdn.net/qq_36792120/article/details/111223747

版权

CSS基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

DIV简介：
一，什么是div？

div是层叠样式表中的定位技术，全称division
有时把div称为图层，更多时候称为“块”

二，div样式设置

div大小，背景设置
div溢出效果展示，换行，滚动条显示
div边框，轮廓设置
盒子模型

div{
     background-color: yellow;
     width: 100px;    
     height: 100px;
     position: absolute;
     top: 200px;
     left: 200px;
}

top,left可以理解成是x，y坐标，然后再把position作为参照物进行定位，没有position，top，left参数设置会失效。

三，DIV溢出处理效果

超出div宽度高度的文字或者图片进行隐藏处理
超出div宽度高度的文字或图片增加滚动条

overflow属性设置
1，visible：默认值。内容不会被修剪，会呈现在元素框之外
2，hidden：超出的部分被隐藏
3，scroll：无论是否需要，都显示滚动条
4，auto：按需显示滚动条以便查看其余的内容（超出就显示，不超出就不显示）

四，css轮廓：
outline
作用：绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
属性：dashed（虚线轮廓）dotted（点状轮廓），solid（实线），double（双线），none等

五，css边框：
border-left，border-right，border-top，border-bottom
作用：设置div边框的边线宽度，颜色，虚线，实线等样式
属性：
solid（实线），none（无边框），double（双线边框）等
示例：border-bottom: solid；设置下边框为实线

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	#div1{
         position: absolute;
         width:200px;
         height: 200px;
         top: 200px;
         left: 200px;
	}
	input{
		 outline: none;
         border: none;
         border-bottom: solid;
	}
</style>
</head>

<body>
   <div id=div1>
      <label>姓名：</label><input type="text">
   </div>
    
</body>

</html>

好多可乐

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
十四，div设置

DIV简介：一，什么是div？div是层叠样式表中的定位技术，全称division有时把div称为图层，更多时候称为“块”二，div样式设置div大小，背景设置div溢出效果展示，换行，滚动条显示div边框，轮廓设置盒子模型div{ background-color: yellow; width: 100px; height: 100px; position: absolute; top: 200px; left:
复制链接

扫一扫