十四，div设置

作者: 好多可乐 | 来源:发表于2020-12-19 14:16 被阅读0次

十四，div设置
h1
DIV的值
CSS布局
div 左边定宽，右边自适应
如何让div中的图片垂直居中
css3(2)
css布局
CSS面试题(二)
el-table表格高度自适应（mixin 混入方式）

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>