CSS快速入门，前端插件化开发

字体样式

font-family:字体

font-size:字体大小

font-weight:字体粗细

color:字体颜色

你好

halo

龍弟

i love study java

常用写法：【字体风格】

font-weight:bolder;/也可以填px，但不能超过900,相当于bloder/

/常用写法：/

font:oblique bloder 12px “楷体” oblique:斜体

文本样式

1.颜色->color:agb / rgba()

2.文本对齐方式->text-align: center

3.首行缩进->text-indent: 2em

4.行高->line-height: 300px;

5.下划线>text-decoration

text-decoration:underline/下划线/

text-decoration:line-through/中划线/

text-decoration:overline/上划线/

text-decoration:none/超链接去下划线/

图片、文字水平对齐

img,span{vetical-align:middle}

文本，阴影和超链接伪类

阴影：

/* 第一个参数：表示水平偏移

第二个参数：表示垂直偏移

第三个参数：表示模糊半径

第四个参数：表示颜色

*/

text-shadow:5px 5px 5px 颜色

列表ul li

主页index.html代码:

全部商品分类

• 图书

  音像

  数字商品

• 家用电器

  手机

  数码

• 电脑

  办公

• 家居

  家装

  厨具

• 服饰鞋帽

  个性化妆

• 礼品箱包

  钟表

  珠宝

• 食品饮料

  保健食品

• 彩票

  旅行

  充值

  票务

  css代码：

  #nav{

  width: 300px;

  background: antiquewhite;

  }

  .title{

  font-size: 18px;

  font-weight: bold;

  text-indent: 1em;/缩进/

  line-height: 35px;

  background: red;

  }

  /ul li/

  /*

  list-style:

  non 去掉实心圆

  circle 空心圆

  square 正方形

  */

  /*ul{!nav替换效果!

  background: antiquewhite;

  }*/

  ul li{

  height: 30px;

  list-style: none;

  text-indent: 1em;

  }

  a{

  text-decoration: none;

  font-size: 14px;

  color: black;

  }

  a:hover{

  color: burlywood;

  text-decoration: underline;

  }

  3.7、背景

  1.背景颜色: background

  2.背景图片

  background-image:url(“”);/默认是全部平铺的/

  background-repeat:repeat-x/水平平铺/

  background-repeat:repeat-y/垂直平铺/

  background-repeat:no-repeat/不平铺/

  渐变

  渐变背景网址：Grabient

  径向渐变、圆形渐变

  盒子模型

  ====

  什么是盒子模型

  

  1. margin:外边距

  2.padding:内边距

  3. border:边框

  边框：

  border:粗细、样式、颜色

  1.边框的粗细

  2.边框的样式

  3.边框的颜色

  外边距----妙用:居中

  margin-left/right/top/bottom->表示四边，可分别设置，也可以同时设置如下

  margin:0 0 0 0/分别表示上、右、下、左；从上开始顺时针/

  /例1：居中/

  margin:0 auto /auto表示左右自动/

  /例2：/

  margin:4px/表示上、右、下、左都为4px/

  /例3/

  margin:10px 20px 30px/表示上为10px，左右为20px，下为30px/

  盒子的计算方式:

  margin+border+padding+内容的大小

  总结:

  body总有一个默认的外边距margin:0

  常见操作:初始化

  圆角边框----border-radius

  盒子阴影

  box-shadow: 10px 10px 1px black;

  浮动：

  标椎文档流

  块级元素：独占一行 h1~h6 、p、div、 列表…

  行内元素：不独占一行 span、a、img、strong

  注： 行内元素可以包含在块级元素中，反之则不可以

  display（重要）

  1. block：块元素

  2. inline：行内元素

  3. inline-block：是块元素，但是可以内联，在一行

  4. none：消失

  div块元素

  span行内元素

  float：left/right左右浮动

  clear：both

  overflow及父级边框塌陷问题

  /*

  clear：right；右侧不允许有浮动元素

  clear：left； 左侧不允许有浮动元素

  clear：both； 两侧不允许有浮动元素

  clear：none；

  */

  .layer04{

  border: 1px #666 dashed;

  font-size: 12px;

  line-height: 23px;

  display: inline-block;

  float: right;

  clear: left;

  }

  解决塌陷问题方案：

  方案一：增加父级元素的高度；

  方案二：增加一个空的div标签，清除浮动

  方案三：在父级元素中增加一个overflow属性

  overflow:hidden/隐藏超出部分/

  overflow：scoll/滚动/

  方案四：父类添加一个伪类:after

  #father:after{

  content:‘’;

  display:block;

  clear:both;

  }

  小结：

  1. 浮动元素增加空div----》简单、代码尽量避免空div

  2. 设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出

  3. overflow----》简单，下拉的一些场景避免使用

  4. 父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用

  display与float对比

  1. display：方向不可以控制

  2. float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

  定位

  相对定位

  相对定位：positon：relstive；

  相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留

  top:-20px;/向上偏移20px/

  left:20px;/向右偏移20px/

  bottom:10px;/向上偏移10px/

  right:20px;/向左偏移20px/

  代码

  第一个盒子
  第二个盒子
  第三个盒子

  实现代码

  连接1
  连接2
  连接3
  连接4
  连接5

  效果展示：

  

  绝对定位-absolute和固定定位-fixed

  定位：基于xxx定位，上下左右~

  1、没有父级元素定位的前提下，相对于浏览器定位

  2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

  3、在父级元素范围内移动

  总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

  小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
  因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  
  
  
  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  

  连接3

  连接4
  连接5

  效果展示：

  

  绝对定位-absolute和固定定位-fixed

  定位：基于xxx定位，上下左右~

  1、没有父级元素定位的前提下，相对于浏览器定位

  2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

  3、在父级元素范围内移动

  总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

  小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
  因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-glqJ61mk-1710871058724)]
  [外链图片转存中…(img-RHQxCfAb-1710871058724)]
  [外链图片转存中…(img-0yz9BsQJ-1710871058725)]
  [外链图片转存中…(img-C5UWvG58-1710871058725)]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  [外链图片转存中…(img-R8G0Im7W-1710871058725)]