十四，div设置
2020-12-19 本文已影响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>
