2017-02-17 css学习笔记

背景颜色

• 如何设置标签的背景颜色
  在 css 中有一个 background-color: 属性，就是专门用来设置标签的背景颜色的
• 取值
  具体单词
  rgb
  rgba
  十六进制

背景图片

• 如何设置背景图片
  在 CSS 中有一个叫做 background-image:url(); 的属性，就是专门用于设置背景图片的
  快捷键：
  bi background-image:url();

注意点：

• 图片的地址必须放在 url()中，图片的地址可以是本地的地址，也可以是网络的地址
• 如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺来填充
• 如果网页上出现了图片，那么浏览器会再次发送请求获取图片

   div{
            width: 500px;
            height: 500px;
        }
        .box1{
            background-image: url(images/girl.jpg);

背景平铺属性

• 如何控制背景图片的平铺方式
• 在 css 中有一个 background-repeat 属性，就是专门用于控制背景图片的平铺方式的
• 取值：
  repeat 默认在水平和垂直都需要平铺
  no-repeat 在水平和垂直方向都不需要平铺
  repeat-x 在水平方向平铺
  repeat-y 在垂直方向平铺
• 快捷键
  bgr background-repeat:
• 应用场景：
  可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度
  比如背景是重复的花纹，或者网页导航栏的底色

div{
            width: 980px;
            height: 60px;
            background-image: url(images/1.png);
            background-repeat:no-repeat;
        }

背景定位属性

• 如何控制背景图片的位置
  在 CSS 中有一个属性叫做 background-position: 属性，就是专门用于控制背景图片的位置
• 格式：

background-position:水平方向  垂直方向

• 取值
• 具体的方位名词
  水平方向:left center right
  垂直方向:top center bottom
• 具体的像素
  background-position:100px 200px;
  记住一定要写单位，也就是写 px，记住具体的像素是可以接收负数的
• 快捷键：
  bp background-position:0 0;

注意点：
同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色

背景的缩写

• 背景属性缩写的格式
  background:背景颜色 背景图片 平铺方式 关联方式 定位方式；
• 快捷键
  bg+ background: #ff url() 0 0 no-repeat;

之前学习的 font 缩写快捷键 font+ font:color weight size family

注意点
background 属性中，任何一个属性都可以被省略

• 什么是背景关联方式
  默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条的滚动而滚动，那么我们就可以修改背景图片和滚动条的关联方式
• 如何修改背景关联方式
  在 CSS 中有一个叫做 background-attachment 的属性，这个属性就是专门用于修改关联方式的
• 格式
  background-attachment:scroll;
• 取值：
  scroll 默认值，会随着滚动条的滚动而滚动
  fix 不会随着滚动条的滚动方式而滚动
• 快捷键：
  ba background-attachment:;

背景图片和插入图片的区别

• 背景图片和插入图片的区别
• 背景图片仅仅是一个装饰，不会占用位置
  插入图片会占用位置
• 背景图片有定位属性，所以可以很方便的控制图片的位置
  插入图片没有定位属性，所以控制图片的位置不太方便
• 插入图片的语义比背景图片的语义要强，所以在企业开发中如果你的图片想被搜索引擎收录，那么推荐使用插入图片

CSS 精灵图

• 什么是 CSS 精灵图
  CSS 精灵图是一种图像合成技术
• CSS 精灵图的作用
  可以减少请求的次数，以及可以降低服务器处理压力
• 如何使用 CSS 精灵图
  CSS 的精灵图需要配合背景图片和背景定位来使用

边框属性

• 什么是边框
  边框就是环绕在标签宽度和高度周围的线条
• 边框属性的格式
• 连写（同时设置四条边的边框）
  Border:边框的宽度 边框的样式 边框的颜色；
• 快捷键：
  bd+ border:1px solid #000;

注意点：

• 连写格式中颜色属性可以省略。省略之后默认就是黑色

• 连写格式中样式不能省略，省略之后就看不到边框了

• 连写格式中宽度可以省略，省略之后还是可以看到边框

• 第二种连写
  border-top: 边框的宽度 边框的样式 边框的颜色;
  border-right: 边框的宽度 边框的样式 边框的颜色;
  border-botton: 边框的宽度 边框的样式 边框的颜色;
  border-left:边框的宽度 边框的样式 边框的颜色;

• 快捷键:
  bt+ border-top:1px solid #000;

• 第三种连写
  border-width: 上 右 下 左;
  border-style: 上 右 下 左;
  border-color: 上 右 下 左;
  注意点：

• 这三个属性的取值是按照顺时针来赋值的，也就是按照上右下左来赋值，而不是按照日常生活中的上下左右

• 这三个属性取值省略时的规律
  上右下左>上右下>左边的取值和右边一样
  上右下左>上右>左边的取值和右边的一样，下边的取值和上边的一样
  上右下左>上>右下左取值和上边的一样

• 非连写（方向+要素）
  border-left-width:20px;
  border-left-style:double;
  border-left-color:pink;

• 边框的圆角属性
  border-radius:10px;

内边距属性

• 什么是内边距
  边距和内容之间的距离就是内边距

• 格式

• 非连写
  padding-top:;
  padding-right:;
  padding-bottom:;
  padding-left:;

• 连写
  padding:上右下左；

• 这时哪个属性的取值省略时的规律同边框的取值规律

注意点：

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

外边距属性

• 什么是外边距
  标签和标签之间的距离就是外边距
• 格式
• 非连写
  margin-top:;
  margin-right:;
  margin-bottom:;
  maigin-left:;
• 连写
  margin: 上右下左
• 这时哪个属性的取值省略时的规律同内边距和边框一样

注意点：
外边距的那一部分是没有背景颜色的

外边距合并现象

默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的

CSS 盒子模型

• 什么是 CSS 盒子模型
  CSS 盒子模型仅仅是一个形象的比喻，HTML 中所有的标签都是盒子
• 结论
  在 HTML 中所有标签都可以设置宽度高度==指定存放内容的区域
  内边距==填充物
  边框==收集盒子自己
  外边距==盒子和盒子之间的间歇

盒子模型宽度和高度

• 内容的宽度和高度
  就是通过width/height 属性设置的宽度和高度
• 元素的宽度和高度
  宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
  高度同理
• 元素空间的宽度和高度
  宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
  高度同理

盒子宽高判断

• 判断是否是内容宽高为100的盒子
  只需要看 width/height 是否为100即可
• 判断是否是元素宽高为200的盒子
  只需要看 边框 + 内边距 + 内容宽度/内容高度 等于200即可
• 判断是否是元素空间宽高为300的盒子
  只需要看外边距 + 边框 + 内边距 + 内容宽度

举例
现有如下盒子模型，要求增加 padding 属性为25之后仍然保持元素宽高为200

元素宽高 = 边框 + 内边距 + 内容宽高
 0 + 0+ 200 = 200
0 + 25 + 25 + 200 = 250
0 + 25 + 25 + 150 =200

规律
1.增加了 border 之后元素的宽高也会发生变化
2.如果增加了 border 之后还想保持元素的宽高，那么就必须减去内容的宽高