CSS如何怎么设置div边框颜色宽度和高度

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS如何怎么设置div边框颜色宽度和高度相关的知识，希望对你有一定的参考价值。

dreamweaver中如何用css控制DIV边框颜色高度宽度等属性，能详细点更好，小弟先谢过！

CSS设置div边框颜色宽度和高度步骤如下：

1、新建一个html文件，创建一个类名为wrap的div。

2、先通过css类选择器选择到div来控制div的宽度和高度和背景颜色（没有边框时方便看出来div的大小）。

3、通过div 的border属性控制边框颜色，设置border的宽度为2px，线型为实线，颜色为蓝色。

4、这样就可以设置div边框颜色宽度和高度，如下图：

扩展资料：

css border属性：

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

border-width，border-style，border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

参考技术A

1.首先，您需要创建一个div,对div进行添加一个class。我们利用CSS通过class来设置div的边框。

2.创建一个用于设置边框的CSS文件，对于您实际开发中，将边框添加到您的CSS文件中即可。

3.在CSS文件中设置DIV的边框，首先我们可以先给div一个宽度与高度。

4.得到了宽度与高度后，如果我们没有边框，是看不到样式的。如果您的div中有内容，那么只是显示那些内容而已。

5.接下来，添加一个border边框。

6.我们将边框设置为1px.如果只是设置了宽度而没有设置颜色与具体的显示样式的话，边框并不会显示，您现在可以刷新一下您的页面看一下，添加了border:1px后是否显示，答案是肯定不显示的，因为我们参数没有写完整。

7.参加第二个参数颜色值，具体的颜色您可以百度搜索具体的样式值的代码，您可以使用基本色直接使用单词拼写也是可以的。

8.最后一个参数是显示样式，您可以选择不同的样式来进行显示，我们这里使用的是实线的方式来实现。

9.如果您使用的是一些专门用来做前端开发的软件，您输入后，会有一些提示，您如果选择不同样式来试一试看。

10.添加了上述的三个属性后，您的div边框即可显示出来了。

参考技术B 回答

您好，我是小马老师，很高兴为你解答问题，正在整理答案，大约需要五分钟哦，请稍等一下~。

CSS设置div边框颜色宽度和高度步骤如下：1、新建一个html文件，创建一个类名为wrap的div。2、先通过css类选择器选择到div来控制div的宽度和高度和背景颜色（没有边框时方便看出来div的大小）。3、通过div 的border属性控制边框颜色，设置border的宽度为2px，线型为实线，颜色为蓝色。4、这样就可以设置div边框颜色宽度和高度，

希望帮到你

 参考技术C

css的border属性可以设置边框的粗细、样式和颜色，而边框的宽度和高度取决于div的宽度和高度，例如：

divwidth:200px; height:100px; border: 1px solid #ff0000;

上面css代码设置div宽度200px，高度100px，边框为1px宽的红色实线

参考技术D <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三列左右固定宽度中间自适应——AA25.CN</title>
<style>
body
margin:0px;

#left
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
left: 0px;

#center
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 202px;
margin-left: 202px;

#right
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
right: 0px;

</style>
</head>

<body>
<div id="left">左列</div>
<div id="center">中列——AA25.CN</div>
<div id="right">右列</div>
</body>
</html>
最好的办法是你看代码自己分析，
设置外边框用到margine...颜色可以自己配

如何让DIV里面的DIV水平垂直居中

让DIV里面的DIV水平垂直居中有2种方法：
方法一：
让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。
.mydiv
margin:0 auto;
width:300px;
height:200px;

方法二：
要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
.mydiv
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px

该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要弹出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。参考技术A div实现水平居中只需要设置固定宽度和margin:0 auto即可，
给你2个解决方案:
1、条件是div的高度和宽度是固定的
<style type="text/css">

</style>
<div class="div1">
<div class="div2">让层垂直居中</div>
</div>
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于父级层的样式编写。

2、条件是div的高度和宽度是不固定的

如果div宽度不固定，那用div就有点困难了，虽然用js获取当前高宽再附加css可以解决，但是要用到js来解决问题就有点逊了；
我给你一个思路，你不妨试试table布局，table不设置宽度的情况下默认是宽度和高度都是最小化的，这样给table设置margin:0 auto就可以让这个table水平方向居中；

解决了水平居中，那就来解决垂直居中，td中的内容默认是垂直居中的，那么只要两者互相嵌套一下不就解决水平垂直居中了!
但是有一个问题，你所需要垂直居中的父级table的高度是否固定，如果父级高度固定，那么子级高度不固定也一样可以垂直居中本回答被提问者和网友采纳

以上是关于CSS如何怎么设置div边框颜色宽度和高度的主要内容，如果未能解决你的问题，请参考以下文章