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

html-css013

CSS如何怎么设置div边框颜色宽度和高度?,第1张

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也是允许的。

比如,建立4个div,要实现宽度随窗口变化而变化很简单,把宽度设成百分比形式就可以了。

css这样写:

这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放,但是高度是不变的,这样肯定不行,我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢?直接写百分比么 height:21%这个就别想了,肯定不行的。

我们可以借用一个不常见的属性,padding-bottom属性。

从手册可以看到,当padding-bottom为百分比的值时,定义的是基于父元素宽度的百分比下内边距。

所以我们的css如果这样写:

我们就会得到一个和我们宽度相等的高度,而且我们的div会随着窗口大小的改变进行等比例的缩放。

但是这个方法有一个问题就是,手册上说我们用的padding-bottom的这个值

感觉像是个雷啊

今天就先到这里,感兴趣的小伙伴可以一起探讨探讨。

在css设置可改变大小的div滚动条样式方法:

1.首先新建html文档,进入代码书写界面。

2.在</head>和<body>的里面写入代码,在<div>里面写入想要输入的内容</div>。

3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}

这里主要是设置外层轨道的形状和颜色。

4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}

这里主要是设置内层轨道的形状和颜色。

5.代码工作做完后,就可以查看效果,效果如下红框所示,滚动条设置完成。