🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS的基本样式边框、布局、字体
文章目录
1.边框属性
1.1border
1.2 width
1.3 height
1.4 background-color
1.5 background-image
2.布局
2.1 float
2.2 clear
3.字体
3.1 font-size
3.2 color
1.边框属性
所有的 HTML 标签都有边框，默认边框不可见
1.1border
设置边框的样式
格式：宽度 样式 颜色
例如： border:1px solid red ， 1 像素粗的 实线 红色边框。
线条样式： solid 实线， none 无边， double 双线
示例：
效果：
1.2 width
用于设置标签的宽度
示例：
效果：
1.3 height
用于设置标签的高度
示例：
效果：
1.4 background-color
用于设置标签的背景颜色
背景颜色设置的两种主流方式：
①英文单词
例如： red,blue,yellow
②颜色代码
格式： # 红绿蓝， 每一个颜色用两个 16 进制位数表示
例如： #ff1100 红色 ff ，绿色 11 ，蓝色 00 ，红色颜色最重，绿色其次，没有蓝色
示例：
效果：
1.5 background-image
用于设置元素背景图片。
格式： background-image : url ( "图片路径" );
例如：某个小狗爪子图片
作为背景图片引入一个长宽 25 的 DIV 标签中，
因为图片太小，所以为了铺满背景，CSS 采取了重复显示多个的策略。
若需要对背景图片是否重复显示进行调整，有以下几个常见设置
2.布局
2.1 float
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版， 就需要使用浮动属性
格式：
选择器 {float: 属性值 ;}
常用属性值：
none ：元素不浮动（默认值）
left ：元素向左浮动
right ：元素向右浮动
注意：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的板式），从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整
准备代码：
<style>
#d1{
background-color: red;
width: 100px;
height: 100px;
}
#d2{
background-color: green;
width: 110px; height: 110px;
}
#d3{
background-color: blue;
width: 120px;
height: 120px;
}
</style>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
示例 1 ：
效果 1：
示例 2：
效果 2：
2.2 clear
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。
如果要避免影响，需要使用 clear 属性进行清除浮动。
格式：选择器 {
clear: 属性值 ;
}
常用属性值：
left ：不允许该元素左侧有浮动元素（清除左侧浮动的影响）
right ：不允许该元素右侧有浮动元素（清除右侧浮动的影响）
both ：同时清除左右两侧浮动的影响（一般用 both ）
3.字体
3.1 font-size
用于设置字体的大小。
3.2 color
用于设置字体的颜色。
示例：
效果：
