04 - CSS3知识点汇总二


本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!
博客地址 点击跳转

文章中我所提到的快捷键是用的webstrom编辑器,如果你用的不是webstrom的话,那你也改成webstorm吧,初学者还是用这款编辑器比较好


背景相关的所有属性

背景颜色

  • 示例代码 :
    

背景图片

  • 如何设置背景图片
  • background-image:url();的属性专门设置背景图片
  • 注意点:

1.图片地址必须放在url中 图片的地址可以是本地的 也可以是外部链接的
2.如果网页上出现了图片 浏览器会再次发送请求获取图片
3.如果图片没有指定的宽高那么大的话 那么他会自动拉伸平铺

  • 示例代码 :

背景平铺

  • 在CSS中 有一个background-repeat属性
  • 取值:

**1.repeat:默认 在水平和垂直都需要平铺
2.no-repeat:在水平和垂直都不需要平铺
3.repeat-x:水平平铺

4.repeat-y:垂直平铺**

  • 示例代码 :

背景定位属性

  • CSS中有个background-position: 0 0;属性 专门控制背景图片位置
  • 格式:
  • background-position: 水平方向 垂直方向;
  • 取值

具体的方位名称
1.水平方向:left center right
2.垂直方向:top bottom center

具体的像素
1.background-position: 100px 200px;
2.一定要记住写单位(px) 可以写负值

  • 注意点:
    同一个标签可以同时设置背景颜色和背景图片 如果同时存在 那么图片会覆盖颜色
  • 示例代码 :
背景定位属性

背景的缩写

  • 格式
    background:背景颜色 背景图片 平铺方式 关联方式 定位方式;
    background: green url(images/girl.jpg) no-repeat left bottom;
  • 注意点:
    background属性中 任何一个属性都可以被省略
  • 什么是背景的关联方式
  • 默认情况下 背景图片会随着滚动条的滚动而滚动 那么我们就可以修改背景图片和滚动条的关联方式
  • 如何修改背景的关联方式
    CSS中有个background-attachment属性来修改关联方式
  • 格式:
    background-attachment:fixed;
  • 取值:
    fixed: 不会随着滚动而滚动
    scroll: 会随着滚动条而滚动
  • 示例代码 :
    

背景图片和插入图片区别

  • 区别:
    1.背景图片仅仅是一个装饰 不会占用位置 插入图片会占用一个位置
    2.背景图片有定位属性 很方便的控制图片的位置
    3.插入图片没有定位属性 控制不了图片的位置
    4.插入图片的语义比背景图片的语义要强 所以在企业开发中如果你的图片想被搜索引擎收录
  • 示例代码 :
我是文字
![](images/girl.jpg) 我是文字

CSS精灵图

CSS的精灵图是一种合成技术

CSS精灵图的作用

  • 可以减少请求的次数 可以降低服务器处理的压力

如果使用CSS精灵图

  • CSS的精灵图需要配合背景图片和背景定位来使用
  • 示例代码 :
div class="box1">
04 - CSS3知识点汇总二_第1张图片
**精灵图**

04 - CSS3知识点汇总二_第2张图片
精灵图

边框属性1

边框就是环绕在标签宽度和高度周围的线条

格式

  • 连写(同时设置四条边的边框)
    border:边框的宽度 边框的样式 边框的颜色;
  • 快捷键:
    bd+ border: 1px solid #000;
  • 注意点:

1.连写格式中颜色可以省略 默认是黑色
2.连写格式中样式不可以省略 省略之后就看不到边框了
3.连写格式中宽度可以省略 省略之后还是可以看到
4.连写(分别设置四条边的边框)

**border-top:边框的宽度 边框的样式 边框的颜色;
border-bottom:边框的宽度 边框的样式 边框的颜色;
border-left:边框的宽度 边框的样式 边框的颜色;
border-right:边框的宽度 边框的样式 边框的颜色;
快捷键:
bt+
br+
bb+
bl+
**

  • 示例代码 :
04 - CSS3知识点汇总二_第3张图片
边框

边框属性2

连写(分别设置四条边的边框)

border-width: 上 右 下 左
border-style: 上 右 下 左
border-color: 上 右 下 左

  • 注意点:

**1.这三个属性的取值 是按照顺时针赋值的 也就是按照上右下左
2.这三个属性的取值 省略时的规律
2.1 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
2.2 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的和上边的一样
2.3 上 右 下 左 > 上 > 右下左和上边的一样
**

非连写(方向+样式)

border-top-width:;
border-top-style:;
border-top-color: #000;
以此类推 ..

  • 示例代码 :

内边距属性

边框和内容之间的距离就是内边距

  • 格式
  • 非连写
    padding-top
    padding-bottom
    padding-right
    padding-left
  • 连写
  • padding:上 右 下 左
  • 这三个属性的取值 省略时的规律
    2.1 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
    2.2 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的和上边的一样
    2.3 上 右 下 左 > 上 > 右下左和上边的一样
  • 注意点:

1.给标签设置内边之后 标签占有的原有宽度和高度会发生变化
2.给标签设置背景颜色 内边距也会有背景颜色

外边距属性

标签和标签之间的距离就是外边距

  • 格式
  • 非连写
    margin-top:;
    margin-right:;
    margin-bottom:;
    margin-left:;
  • 连写
    margin:上 右 下 左;
  • 这三个属性的取值 省略时的规律
    2.1 上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
    2.2 上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的和上边的一样
    2.3 上 右 下 左 > 上 > 右下左和上边的一样
  • 注意点:
    外边距的那一部分是没有背景颜色的

外边距的合并现象

  • 在默认布局的垂直方向 默认情况下外边距是不会叠加的 会出现合并现象 谁的外边距比较大就显示谁的注意点:在盒子浮动的时候 脱离标准流的时候 他们的外边距在垂直方向是叠加的
  • 示例代码 :
我是span我是span

盒子模型

盒子只是一个形象的比喻 在HTML中所有的标签都是盒子

  • 结论:

在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子与盒子之间的间隙

  • 示例代码 :
我是Span
我是超链接
我是加粗
我是强调
    
04 - CSS3知识点汇总二_第4张图片
盒子模型

盒子模型宽度和高度

内容的宽度和高度

通过标签的width和height属性设置的宽度和高度

元素的宽度和高度

宽度 = 左边的边框+内边距+内容的宽度+右边内边距+右边边框
高度 同理可证

元素空间的宽度和高度

宽度 = 左边的外边距+左边框+左内边距+内容的宽度

盒子的box-sizing属性

  • 示例代码 :

盒子居中和内容居中

  • 1.text-align:center;和margin:0 auto;之间的区别
  • 1.1 text-align: center;
  • 作用:设置盒子中存储的文字和图片水平居中
  • 2.margin: 0 auto;
    作用:让盒子自己居中
  • 注意点:
    2.1 使用margin:0 auto;的盒子 必须要width 有明确的width 如果没有的话 就通栏了
    2.2 只有标准流的盒子 才能使用 margin:0 auto; 浮动流和定位流都不能使用
我是文字
![](images/girl.jpg)
- #### 清空默认边距
  • 1.为什么清空默认边距(外边距和内边距)
    在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高 所以在开发中 编写代码之前第一件事就是清空系统默认的边距
  • 2.格式:
        *{
            margin: 0;
            padding: 0;
        }
  • 3.注意点:
    3.1 通配符的选择器会遍历当前界面中所有的标签 所以性能不好
    3.2 企业开发中可以直接在这个网站中拷贝
    http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
    
- #### 行高和字号
  • 1.什么是行高
  • 在CSS中所有的行 都有它自己的行高
  • 注意点:
    行高和盒子的高 不是同一个概念
  • 规律:
  • 文字在行高中是默认垂直居中的
  • 在企业开发中 我们经常把盒子的高度和文字的行高设置成一样 这样可以保证一行文字在盒子的高度中垂直居中 简言而之就是 要想一行文字在盒子中垂直居中 那么只需要设置这行文字的行高即可
  • 在企业开发中 如果一个盒子中有多行文字 那么我们就不能通过设置盒子高等于行高来实现文字垂直居中 只能通过padding来实现居中
    
- #### 还原字体和字号
  • 注意点:
    1.在企业开发中 如果一个盒子中存储的是文字 那么一般情况下我们会以盒子左边的内边距为准 因为右边的内边距有误差
    2.误差就是当右边的文字和边框之间的距离不够存放一个文字的时候 就会自动换行 所以导致的误差
    3.顶部的内边距并不是从边框到文字顶部的距离 而是从边框到行高顶部的距离
    
- #### 文章界面

我是标题/New Articles>

  • 我是第一行,我是第一行
  • 我是第二行,我是第一行
  • 我是第三行,我是第一行
  • 我是第四行,我是第一行
  • 我是第五行,我是第一行
04 - CSS3知识点汇总二_第5张图片
文章界面

- #### 网页布局方式

  • 1.什么是网页布局方式
    就是指浏览器是如何对网页中的元素进行排版的
  • 1.标准流(文档流/普通流)的排版方式
    1.1 浏览器默认的排版方式就是标准流
    1.2 在CSS中元素分为三类 块级/行内/行内块级
    1.3 标准流中有两种排版方式 垂直(块级标签都是垂直排版)和水平(行内和行内块级都是水平)排版
  • 2.浮动流的排版方式
    2.1 浮动流是一种半脱离标准流的排版方式
    2.2 浮动流只有一种排版方式 就是水平排版 只能设置某个元素的左对齐和右对齐
  • 注意点:
    
1.没有居中对齐 没有center取值
2.在浮动流中不可以使用margin:0 auto;的 是无效的
  • 特点:
    
1.在浮动流中是不区分 块级标签/行内标签/行内块级标签 都可以水平排版
2.在浮动流中无论是块级标签/行内标签/行内块级标签都可以设置宽高
3.综上所述 浮动流中的元素和标准流中的行内块级元素很像\
  • 3.定位流的排版方式
- #### 浮动元素的脱标
  • 1.什么是浮动元素脱标
    脱标:脱离标准流
    当某个元素浮动之后 那这个元素看上去就像被从标准流删除一样 这就是浮动元素脱标
  • 2.浮动元素脱标之后会有什么影响
    如果前面一个元素浮动了 而后面一个元素没有浮动 那么这时候前面的一个元素就会盖住后面的一个
04 - CSS3知识点汇总二_第6张图片
脱标的盒子

- #### 浮动元素的排序规则

  • 1.浮动元素的排序规则
  • 1.1 相同方向上的浮动元素 先浮动的元素会显示在前面 后浮动的元素会显示在后面
  • 1.2 不同方向上的浮动 左浮动会找左浮动 右浮动会找右浮动
  • 1.3 浮动元素浮动之后的位置 由浮动元素浮动之前的标准流的位置来确定
1
2
3
4
04 - CSS3知识点汇总二_第7张图片
浮动的排序规则

- #### 浮动元素的贴靠现象

1
2
3
04 - CSS3知识点汇总二_第8张图片
浮动元素的贴靠

- #### 浮动元素字围现象

![](images/picture.jpg)

养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个账空账率超九成 将来兑现或入不敷出养老金个

04 - CSS3知识点汇总二_第9张图片
自围现象

- #### 浮动练习

04 - CSS3知识点汇总二_第10张图片
浮动练习

书山有路勤为径 学海无涯苦作舟

更多精彩内容 请点击跳转

你可能感兴趣的:(04 - CSS3知识点汇总二)