文章目录
- 前言
- CSS
- CSS的引入方式
- CSS的选择器
- CSS的盒子模型
- 外边距合并
- 标签的分类
- 块级元素
- 行级元素
- 行内块
- 浮动
- 源码获取
前言
🌞博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导✌🌞
👇🏻 精彩专栏 推荐订阅👇🏻
2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅
Java精品实战案例《500套》
微信小程序项目精品案例《500套》
💯文末获取源码+数据库💯
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
CSS
CSS的引入方式
方式一：直接在html的标签上加入style属性，多个样式用分号分割
方式二：写在Head标签里面，用一个style标签包裹（当下的主流）
方式三：用链接导入外部的文件
CSS的选择器
标签选择器：直接使用标签名
类选择器:先在标签中加入一个 class属性，然后使用.class即可
ID选择器：通过id名来进行关联，在标签中先加入一个id属性，然后用#id名来访问
CSS的盒子模型
由四个部分构成： 元素内容, 内边距, 边框, 外边距
width: 100px;
height: 100px;
宽高实质上是盒子模型中 元素内容区域 的大小
border: 10px solid white;
给盒子模型设置边框, 必须要有宽以及边框类型
背景色 = 元素内容区域+内边距
外边距合并
如果两个元素/标签, 在一个页面上在"垂直"方向上"紧"相邻, 那么他们的外边距会产生合并 —> 外边距合并
谁大(高度)听谁的
标签的分类
块级元素
独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
块级元素, 可以设置宽高和内外边距
宽度可以继承, 高度不可继承
通常使用块级元素来进行大布局（大结构）的搭建
块级元素是指本身属性为display:block;的元素。
常见的块级元素：
div、p、h1、 h2、 h3、 h4、 h5、 h6，ol、ul、dl、li、form、table
行级元素
和其他行级元素从左到右在一行显示
行级元素: 不能设置宽高, 仅仅能设置左右方向的内外边距
宽高都非继承而来, 由本身内容大小决定
通常使用行级元素来进行文字、小图标（小结构）的搭建。
行级元素只能容纳文本或者其他行级元素（不要在行级元素中嵌套块级元素）
行级元素是指本身属性为display:inline;的元素。
常见的行级元素：
span 常用行级容器，定义文本内区块;
a 锚点;
b 加粗; strong 加粗强调; i 斜体; strike 中划线;
br 强制换行; u 下划线;
textarea 多行文本输入框;
input 输入框;
select 下拉列表;
img 引入图片
行内块
本质属于行级元素: 可以与其他行级元素共处一行
可以设置宽高、内外边距
属性为display:inline-block;的元素。
常见的行内块元素：
input 输入框
img 引入图片
select
button
可以通过手动的操作来改变display中的属性，但不推荐，一般使用浮动来解决问题
浮动
标准流：html代码对应的标签根据元素特性，从上到下，从左到右来排列
浮动可以使一个标签在显示的时候脱离标准流，漂浮在页面上，即可以实现两个块级标签在同一行来显示
// 浮动的特点:
1：浮动只影响后面的元素
2：连续浮动一行显示
3：浮动以元素顶部为基准对齐
4：浮动可是实现模式转换
语法：float:left
清除浮动：如果元素浮动, 会导致后面的元素上移, 会发生位置覆盖. 但是有的时候,我们不想这个覆盖发生, 那么就可以给被覆盖的区域加一个清除发动的效果, 就不会覆盖
源码获取
有疑问私信询问我即可~
大家点赞、收藏、关注、评论啦
精彩专栏推荐订阅：在下方专栏👇🏻
Java精品实战案例《500套》
微信小程序项目精品案例《500套》
