CSS入门二
一、CSS的样式
1、边框和尺寸
border：设置边框的样式
格式：宽度 样式 颜色
样式的取值：solid 实线，none 无边，double 双线等
width、height：用于设置标签的宽度、高度。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框和尺寸
2、转换：display
我在之前的 HTML二 的文章中，讲述了块标签和行内标签。如果我们想要行内元素具有块元素的特性，需要用display转换。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
border :1px solid #000;
width:100px;
height:40px;
}
</style>
</head>
<body>
<!--默认显示一行，边框环绕，高宽没有作用-->
<span>显示1-1</span>
<span>显示1-2</span>
<!--每一行显示，高宽有作用-->
<!--block是display的默认值，表示将对象强制作为块对象呈递，为对象之后添加新行-->
<span style="display: block;">显示2-1</span>
<span style="display: block;">显示2-2</span>
</body>
</html>
转换
3、字体
color：字体颜色
font：字体类型
font-size：字体大小
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 50px;width:200px;border:1px solid #000;">
<a href="">点击</a>
<a href="" style="text-decoration: none;">点击</a>
</div>
<div style="height: 50px;width:200px;border:1px solid #000;">
<a href="" style="line-height: 50px;">点击</a>
<a href="" style="color: red;">点击</a>
</div>
</body>
</html>
字体
4、背景色：background-color
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<ul style="background-color: gray;color: white;">
<li>点击</li>
<li>点击</li>
<li style="background-color: black;">点击</li>
<li>点击</li>
</ul>
</body>
</html>
背景色
5、布局
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动。但是浮动也会对页面中其他元素的排版产生影响。
浮动格式：
选择器{float:属性值;}
常用属性值：
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
清除浮动格式：
选择器{clear:属性值;}
常用属性值：
left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右两侧浮动的影响
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--默认上下布局-->
<div>
<div>区域1-1</div>
<div>区域1-2</div>
</div>
<hr />
<!--浮动左右布局-->
<div>
<div style="float: left;">区域2-1</div>
<div style="float: left;">区域2-2</div>
</div>
<!--取消浮动，另起一行布局-->
<div style="clear:both"></div>
<hr />
<div>
<div style="float: left;">区域2-1</div>
<div style="float: left;">区域2-2</div>
<div style="float: left;">区域2-3</div>
</div>
</body>
</html>
布局
二、盒子模型
盒子模型主要用于设置一个元素与其他元素之间的距离，也用于设置元素的内容与元素边框之间的距离，一个盒子模型由元素的内容、元素的边框、外边框以及内边框组成。
盒子模型
1、内边距：padding
设置内边距可以为所有边设置统一的属性值，也可以按照上、右、下、左的顺序设置属性值，可以使用像素值或者百分比。
属性：
上 border-top
下 border-bottom
左 border-left
右 border-right
2、外边距：margin
设置外边距的方式和内边距一样。
属性：
上 margin-top
下 margin-bottom
左 margin-left
右 margin-right
3、边框：border
可以通过属性设置边框的类型。
border-top-style
border-bottom-style
border-left-style
border-right-style
