CSS(源码+lw+部署文档+讲解等)

前言

博主介绍：✌全网粉丝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套》