- 博客(287)
- 收藏
- 关注
RSS订阅原创 清除浮动：双伪元素清除浮动（最常用）
before:在前面插入盒子after:在后面插入盒子代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi..
2022-05-15 14:14:45
1040
原创 清除浮动——after伪元素法
语法：.clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ /* IE6、7专用 */
2022-05-15 14:05:53
706
原创 清除浮动 给父级添加overflow
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.
2022-05-15 13:57:12
405
原创 清除浮动本质以及额外标签法（了解）
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2022-05-15 13:51:29
253
原创 浮动的注意点
1.浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
2022-05-15 13:15:45
220
原创 常见的网页布局
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl..
2022-05-10 20:40:33
193
原创 手机模块布局案例
网页布局第一准测：标准流设置上下盒子排列，浮动设置左右盒子排列网页布局第二准测：先设置盒子大小，之后设置盒子的位置代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
2022-05-10 20:13:37
165
原创 浮动布局练习
练习：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
2022-05-10 19:42:06
163
原创 浮动元素经常和标准流父级搭配使用
浮动布局案例1代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
2022-05-02 10:13:40
388
原创 浮动元素具有行内块元素
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title..
2022-05-02 09:38:14
214
原创 浮动元素一行显示
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
2022-04-01 21:13:53
150
原创 浮动特性（重难点）——脱标
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl..
2022-04-01 21:04:14
301
原创 CSS浮动
所有的浮动都是贴着浮动连在一起的左浮动：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc...
2022-04-01 20:48:05
209
原创 圆角边框的使用
1.画圆（重点）代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2022-03-30 21:04:03
596
转载 圆角边框使用（重点）
1.语法：border—radius:length数值越大，弧度越明显代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
2022-03-30 20:30:43
127
原创 快报模块列表制作
1.去掉li前面的项目符号（小圆点）list-style:none;2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
2022-03-30 20:18:15
143
原创 快报模块头部制作
1.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
2022-03-30 19:59:25
145
原创 JAVA基本数据类型
1.打印单个数据代码：public class Test { public static void main(String[] args) { int a; a=10; System.out.println("a="+a); }}运行效果：2.打印多个数据代码：public class Test { public static void main(String[] args) { int a; a=10; int .
2022-03-24 19:36:59
694
原创 产品模块布局
1.box布局代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2022-03-15 20:38:17
189
原创 清除内外边距
1.清除内外边距2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
2022-03-15 19:36:19
1332
原创 行内元素和行内块元素水平居中
1.行内元素或行内块元素水平居中给其父元素添加text-align:center即可2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
2022-03-15 19:11:47
800
原创 块级盒子水平居中对齐
1.外边距可以让块级盒子居中对齐，但是必须满足两个条件（1）盒子必须指定了宽度（width）（2）盒子左右的外边距都设置为auto2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
2022-03-13 15:18:06
500
原创 盒子模型外边距margin
1.下外边距代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ..
2022-03-13 11:14:41
91
原创 padding不会撑开盒子的情况
1.如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
2022-03-13 10:51:05
1175
原创 padding影响盒子大小计算
1.如果盒子本身有宽度，当加入padding的时候，一定要进行计算（减去），不能影响盒子的大小2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
2022-03-13 10:36:25
175
原创 padding应用（二）
1.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
2022-03-13 10:28:32
67
原创 padding应用（一）
1.盒子里面的文字和字数不一样多的话，给盒子的左右padding值，padding撑开盒子，这样文字的距离是相等的。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo...
2022-03-13 10:14:35
147
原创 padding会影响盒子实际大小
1.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=`, initial-scale=1.0"> <title>内边距padd
2022-03-13 09:58:57
448
原创 padding复合属性
1.上下左右都为同一个边距代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g..
2022-03-02 20:52:05
526
原创 盒子模型内边距padding
1.padding属性用于设置内边距，即边框与内容之间的距离2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
2022-03-02 20:38:19
114
原创 边框会影响盒子实际大小
1. 我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi...
2022-03-02 20:27:09
100
原创 表格细线边框
1.border-collapse:collapse;表示相邻边框合并一起2.表格和单元格设置样式：table, td{ border: 1px solid red; /* 合并相邻的边框 */ border-collapse: collapse; }3.代码：<!DOCTYPE html><html lang="
2022-03-02 20:10:58
139
原创 边框的复合写法
1.边框的简写2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2022-03-02 19:48:41
226
原创 盒子模型border
1.border可以设置元素的边框，边框有三部分组成：边框宽度（粗细），边框样式（实线、虚线），边框颜色2.border-style:solid实线边框代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
2022-02-28 16:37:57
291
原创 有关权重练习
1.权重有高低，但继承的权重为02.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge
2022-02-27 15:25:07
129
原创 CSS权重的叠加
1.权重叠加：如果是复合选择器，则会有权重的叠加，需要计算权重2.复合选择器会有权重叠加的问题代码1：（ul li）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
2022-02-27 15:09:55
466
原创 优先级注意的问题
1.权重是有4组数字组成，但是不会有进位2.等级判断从左向右，如果某一类数值相同，则判断下一位数值3.简单的记忆方法：通配符和继承权重为0，类（伪类）选择器为10，id选择器100，行内样式表为1000，！important无穷大*4.继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重为0重点：例如父亲的权重为100，p继承的权重为0，所以样式为p中的（继承）颜色代码：<!DOCTYPE html><html lang="en">
2022-02-27 14:47:36
187
原创 CSS三大特性之优先级
1.当同一个元素指定多个选择器，就会有优先级的产生（1）选择器相同，则执行层叠性（哪个元素距离最近，就使用谁）（2）选择器不同，则根据选择器权重执行（3）如下图，从上到下权重逐级增加注释：元素选择器为标签选择器2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib.
2022-02-27 14:14:26
175
原创 行高的继承
1.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
2022-02-27 10:48:19
391
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人