🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS的基本样式边框、布局、字体
文章目录
1.边框属性
1.1border
1.2 width
1.3 height
1.4background-color
1.5background-image
2.布局
2.1 float
2.2clear
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.4background-color
用于设置标签的背景颜色 背景颜色设置的两种主流方式： ①英文单词 例如：red,blue,yellow ②颜色代码 格式：#红绿蓝， 每一个颜色用两个 16 进制位数表示 例如：#ff1100 红色 ff，绿色 11，蓝色 00，红色颜色最重，绿色其次，没有蓝色 示例：效果：
1.5background-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.2clear
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。 如果要避免影响，需要使用 clear 属性进行清除浮动。 格式：选择器{ clear:属性值; } 常用属性值： left：不允许该元素左侧有浮动元素（清除左侧浮动的影响） right：不允许该元素右侧有浮动元素（清除右侧浮动的影响） both：同时清除左右两侧浮动的影响（一般用 both）3.字体
3.1 font-size
用于设置字体的大小。
3.2 color
用于设置字体的颜色。 示例：效果：
