1.单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
/*
*
* 长度单位
*
* px(像素)
* - 我们的屏幕实际上是由一个一个的小点点构成的，一个小点点就是一个像素
* - 不同的显示器中单个像素的大小是不同的，越清晰的显示器单位像素就越小
* - 像素是开发中用的最多的单位
*
* %(百分比)
* - 也可以将长度设置一个百分数，此时元素的长度将会根据父元素的对应属性去计算
* - 使用百分比的值，元素会自动根据父元素的属性去计算长度，
* 当父元素的值发生变化时，子元素会随之等比例变化
* 在一些自适应的页面中，会大量的使用百分比的值
*
*
* 颜色单位
* - 在CSS可以直接使用颜色的单词来为元素设置颜色
* - 但是仅仅使用颜色的单词来表示颜色，使用起来不太方便
*
* - 也可以使用RGB值来设置颜色
* - 所谓的RGB就是光的三元色Red Green Blue
* - 通过这三种颜色的不同的浓度可以组合出任意的颜色
* - 语法：
* rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* - 浓度可以指定一个0-255之间的值，
* 0 表示没有 255表示最大
* - 浓度也可以接收一个百分比0% - 100%
* - 最终百分比也会转换为0-255
* 0% 0
* 100% 255
*
* - 十六进制的RGB值
* - 可以使用三组两位的十六进制的数字来表示RGB值
* - 语法：#红色绿色蓝色
* - 十六进制
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 ~ ff
* 00 表示 没有
* ff 表示 最大
*
*
* - 如果十六进制的RGB值，两位两位是重复的
* 像 #aabbcc #112233
* 可以进行简写
* #aabbcc --- > #abc
* #112233 --- > #123
*
*/
width: 200px;
height: 200px;
/*background-color: rgb(9,126,84);*/
/*background-color: rgb(100%,0%,0%);*/
/*background-color: #ff0000;*/
/*background-color: #FFFAE8;*/
/*background-color: #abc ;*/
background-color: #bfa;
}
/*.box2{
width: 50%;
height: 50%;
background-color: yellow;
}*/
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2.盒子模型基本概述：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
width和height是用来设置盒子内容区的大小
整个盒子的可见框的大小由内容区 内边距 和 边框共同决定
* */
width: 200px;
height: 200px;
background-color: #bfa;
/*
* 设置盒子的边框
* - 要设置盒子的边框，至少要设置三个样式
* border-width
* - 边框的宽度
* border-color
* - 边框的颜色
* border-style
* - 边框的样式
* */
/*
* 设置边框的宽度
* - 通过border-width可以同时指定四个边框的宽度
* 也可以分别指定
*
*/
/*border-width: 10px;*/
/*
如果同时指定四个值，则会分别设置 上 右 下 左 四个边框的宽度
* */
/*border-width: 10px 20px 30px 40px;*/
/*
如果指定三个值，则顺序是 上 左右 下
* */
/*border-width: 10px 20px 30px;*/
/*
如果指定两个值 上下 左右
* */
/*border-width: 10px 20px;*/
/*
如果只指定一个值，则四个方向都是该值
* */
border-width: 10px;
/*设置边框的颜色*/
border-color: red;
/*border-color: red orange yellow blue; */
/*border-color: red orange yellow ; */
/*
* 设置边框的样式
* - border-style可以用来设置边框的样式
* - 可选值
* solid 实线边框
* dotted 点状虚线边框
* dashed 虚线边框
* double 双线边框
*
*
* */
border-style: double;
/*border-style: solid dotted dashed double;*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
效果：
3.边框：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: yellow;
/*设置边框*/
/*
除了border-width
在CSS中还为我们提供了border-xxx-width四个属性
分别设置四个边的宽度
此处：xxx可能是 top right bottom left
*/
/*border-width: 10px;*/
/*border-top-width: 100px;
border-left-width: 50px;*/
/*border-color: orange;*/
/*border-top-color: red;
border-bottom-color: bisque ;*/
/*border-style: solid;*/
/*border-bottom-style:double ;*/
/*
在CSS还为我们提供了一个border的样式
这个样式是边框的简写样式，通过它可以同时设置四个边的宽度 颜色和样式
使用border设置样式对于属性的顺序没有要求
但是注意，一旦使用border来设置边框，就是同时指定四个边框
* */
/*border: orange solid 10px ;*/
/*
* 除了border，还有四个样式
* border-top
* border-left
* border-right
* border-bottom
* - 这四个的用法和border一样，只不过他们是单独设置某一个边的
*
*
* */
/*border-top: 10px solid orange ;
border-left: 10px solid orange ;
border-bottom: 10px solid orange ;*/
border: 10px solid orange;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
效果：
4.内边距：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px blue solid;
/*
* 默认情况下整个盒子的可见框的大小，由内容区 边框 和 内边距共同决定
*
内边距（padding）
- 内容区和边框之间的距离称为内边距
- 一个盒子中有四个方向的内边距，分别使用：
padding-top
padding-right
padding-bottom
padding-left
四个样式来设置
内边距也会影响到盒子的可见框的大小，所以如果设置完内边距
还希望盒子大小不变的话，则需要将增加的内边距从内容区中减去
背景会自动延伸到内边距上
* */
/*上内边距*/
/*padding-top: 100px;*/
/*右内边距*/
/*padding-right: 100px ;
padding-bottom:100px ;
padding-left: 100px;*/
/*
通过padding，可以同时设置四个方向的内边距
规则和border-width一样
* */
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
padding: 10px 20px 30px 40px;
}
.box2{
/*
* box2是box1的子元素
* 子元素都是在父元素的内容区存在的
*
* box2和box1的内容区一样大
*/
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
效果：
5.外边距:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
/*
外边距（margin）
- 外边距表示当前盒子与其他盒子之间距离，
外边距不会影响盒子可见框的大小，但是会影响盒子的位置
- 一共有四个方向的外边距
margin-top
margin-left
margin-right
margin-bottom
由于元素在页面中默认是靠左靠上显示的，
所以默认情况下，我们修改左外边距和上外边距时，会影响当前元素的位置
而修改右和下外边距时会影响其他元素的位置
* */
/*设置上外边距*/
/*margin-top: 100px;*/
/*设置左外边距*/
/*margin-left: 100px;*/
/*设置一个下外边距*/
/*margin-bottom: 100px;*/
/*
* 可以通过margin来同时指定四个方向的外边距
* 规则和padding一样的
* */
/*margin: 100px;*/
/*margin: 100px 200px 300px 400px;*/
/*
外边距可以设置为一个负值，如果margin值为负数时，元素会向相反的方向移动
* */
/*margin-top: -100px;*/
/*
margin还可以设置为auto
- 当将左右外边距同时设置为auto时，浏览器会将元素的左右外边距设置为相等的值
此时当前元素将会在它的父元素中水平居中，所以我们常常将水平外边距设置为auto来设置水平居中
*
* */
/*margin-right: auto;
margin-left: auto;*/
/*使元素在父元素中水平居中*/
margin: 0 auto;
}
.box2{
width: 500px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果：
扫一扫
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
