1.1 边框属性
1.1.1 定义
边框就是环绕在标签宽度和高度周围的线条
1.1.2 设置边框属性
同时设置四条边的边框
border: 边框的宽度 边框的样式 边框的颜色;
快捷键:
bd+Tab border: 1px solid #000;
注意点:
连写格式中颜色属性可以省略, 省略之后默认就是黑色。
连写格式中样式不能省略, 省略之后就看不到边框了。
连写格式中宽度可以省略, 省略之后还是可以看到边框。
分别设置四条边的边框
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
快捷键:
bt+ Tab
br+
bb+
bl+
分别设置四条边的边框属性
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
注意点:
这三个属性的取值是按照顺时针来赋值, 按照上右下左来赋值。
这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样
3.非连写(方向+要素)
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框属性</title>
<style type="text/css">
.box1{
width: 150px;
height: 150px;
background-color: green;
/*border: 5px solid blue;*/
/*border: 5px solid;*/
/* border: 5px blue;*/
border-top: 15px solid blue;
border-right: 15px dashed red;
border-bottom: 15px dotted purple;
border-left: 15px double pink;
}
.box2{
width: 150px;
height: 150px;
background-color: red;
/*连写*/
/*
border-width: 15px 15px 15px 15px;
border-style: solid dashed dotted double;
border-color: blue green purple pink;
*/
border-top-width: 5px;
border-top-style: solid;
border-top-color: blue;
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
border-bottom-width: 15px;
border-bottom-style: dotted;
border-bottom-color: purple;
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div><br/>
<div class="box2"></div>
</body>
</html>
执行结果
1.2 内边距
边框和内容之间的距离就是内边距
1.2.1 语法基本格式
非连写基本格式
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
连写基本格式
padding: 上 右 下 左;
这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样。
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样。
上 右 下 左 > 上 > 右下左边取值和上边一样。
注意点:
给标签设置内边距之后, 标签占有的宽度和高度会发生变化。
给标签设置内边距之后, 内边距也会有背景颜色。
1.2.2 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距属性</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
border: 1px solid #000;
background-color: aquamarine;
}
.box1{
padding-top: 20px;
}
/*右边*/
.box2{
padding-right: 40px;
}
.box3{
padding-bottom: 80px;
}
/*左边*/
.box4{
padding-left: 100px;
}
.box5{
/*padding:20px 40px 80px 60px;*/
/*padding:30px 40px 80px;*/
/*padding:20px 40px;*/
padding: 30px;
}
</style>
</head>
<body>
<div class="box1">人言落日是天涯，望极天涯不见家。已恨碧山相阻隔，碧山还被暮云遮。——李觏《乡思》</div><br/>
<div class="box2">桃李春风一杯酒，江湖夜雨十年灯。——黄庭坚《寄黄几复》</div><br/>
<div class="box3">雨中黄叶树，灯下白头人。——司空曙《喜外弟卢纶见宿》</div><br/>
<div class="box4">绿蚁新醅酒，红泥小火炉。晚来天欲雪，能饮一杯无？——白居易《问刘十九》</div><br/>
<div class="box5">而今听雨僧庐下，鬓已星星也。悲欢离合总无情。一任阶前、点滴到天明。——蒋捷《虞美人 听雨》</div><br>
</body>
</html>
执行结果
1.3 外边距
标签和标签之间的距离就是外边距
1.3.1 语法基本格式
非连写基本格式
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
连写基本格式
margin: 上 右 下 左;
这三个属性的取值省略时的规律
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样
注意点:外边距的那一部分是没有背景颜色的
1.3.2 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距属性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: greenyellow;
}
div{
height: 100px;
border: 1px solid #000;
}
.box1{
/*
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
*/
/*margin:20px 40px 80px 160px;*/
/*margin:20px 40px 80px;*/
/*margin:20px 40px;*/
margin:20px;
}
</style>
</head>
<body>
<span class="box1">以色事他人，能得几时好。</span>
<span class="box2">从此无心爱良夜，任他明月下西楼。</span>
<span class="box3">雨中黄叶树，灯下白头人。</span>
<div class="box4">111</div>
</body>
</html>
执行结果
1.4 外边距合并现象
在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。
1.4.1 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距合并</title>
<style type="text/css">
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 100px;
border: 1px solid #000;
}
.span1{
margin-right: 50px;
background-color: aquamarine;
}
.span2{
margin-left: 100px;
background-color: purple;
}
.box1{
margin-bottom: 50px;
background-color: greenyellow;
}
.box2{
margin-top: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<span class="span1">醉后不知天在水，满船清梦压星河</span>
<span class="span2">过沙溪急，霜溪冷，月溪明。</span>
<div class="box1">雨中黄叶树，灯下白头人。</div>
<div class="box2">从此无心爱良夜，任他明月下西楼。</div>
</body>
</html>
执行结果
1.5 CSS盒子模型
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子
1.5.1盒子内容
在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型</title>
<style type="text/css">
span,a,b,strong{
display: inline-block;
width: 100px;
height: 100px;
border: 6px solid #000;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<span>java最牛逼!!</span>
<a href="#">python人工智能</a><br/>
<b>html网页基本布局</b>
<strong>javaScript</strong>
</body>
</html>
执行结果
1.5.2 宽度和高度
-
内容的宽度和高度
通过width/height属性设置的宽度和高度。 -
元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框 高度 同理 -
元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距 高度 同理可证
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型宽度和高度</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
padding: 25px;
background-color: purple;
}
/*元素宽高= 边框+内边距+内容宽度/内容高度等于200*/
.box2{
width: 150px;
height: 150px;
border: 25px solid #000;
background-color: blue;
}
.box3{
width: 150px;
height: 150px;
padding: 20px;
border: 5px solid #000;
background-color: greenyellow;
}
/*元素空间宽高=外边距+边框+内边距+内容宽度/内容高度 */
.box4{
width: 100px;
height: 100px;
padding:25px;
border: 25px solid #000;
margin: 50px;
}
</style>
</head>
<body>
<!--<div class="box1">box1</div><br/>
<div class="box2">box2</div><br/>
<div class="box3">box3</div>-->
<div class="box4">box4</div>
</body>
</html>
执行结果
1.5.3 box-sizing属性
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子box-sizing属性</title>
<style type="text/css">
.st{
width: 300px;
height: 300px;
background-color: greenyellow;
}
.st1{
width: 100px;
height: 200px;
background-color: indigo;
float: left;
}
.st2{
width: 200px;
height: 200px;
background-color: green;
float: right;
border: 20px solid #000;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--
1、box-sizing属性保证增加padding和border之后,盒子元素的宽度和高度不变。
增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
2、content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
3、border-box
元素的宽高 = width/height的宽高
-->
<div class="st">
<div class="st1"></div>
<div class="st2"></div>
</div>
</body>
</html>
执行结果
1.5.4 盒子居中
text-align: center; 作用
设置盒子中存储的文字/图片水平居中
margin:0 auto; 作用
盒子自己水平居中
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子居中</title>
<style type="text/css">
.st1{
width: 600px;
height: 500px;
background-color: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="st1">
java处理高并发<br/>
<img src="images/test.jpg" alt="">
</div>
</body>
</html>
执行结果
扫一扫
1241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
