1、新建一个html文件，命名为test.html。
2、在test.html文件内，使用css对div进行初始化，设置其内外边距都为0，并让div浮动向左。
3、在test.html文件内，创建一个div，并设置其class属性为xx，用于下面定义其css样式。
4、在test.html文件内，使用css设置类名为xx的div样式，设置其宽度、高度都为300px，背景颜色为红色。
5、在test.html文件内，在上面div的内部，再创建一个div，并设置其类名为ss。
6、在test.html文件内，使用css设置类名为ss的div样式，设置其高宽为100px，背景颜色为白色，上边距为100px，左边距为100px。
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的这个值
感觉像是个雷啊
今天就先到这里，感兴趣的小伙伴可以一起探讨探讨。
