CSS入门教程4

二、CSS的背景

2.1. 背景颜色

💡💡

{background-color: 定义元素的背景颜色}

background-color: 颜色值;
#  默认为透明色
background-color:transparent;

2.2. 背景图片

💡💡

background-image:none|url

2.3. 背景平铺

💡💡

background-repeat:repeat|no-repeat|repeat-x|repeat-y
#   平铺|不平铺|横向平铺|纵向平铺

2.4. 背景图片位置

💡💡

background-position:x y;
# position:  top|bottom|left|right|center  方位名词

2.5. 背景图片固定

💡💡

background-attachment:scroll|fixed
# scroll  随对象内容而滚动
# fixed  背景图形固定

2.6. 背景复合写法

💡💡

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background:pink url repeat fixed  top;

2.7. 背景色半透明

💡💡

background:rgba(0,0,0,0.3);
# z最后一个参数是alpha透明度  取值范围在0~1

三、CSS三大特性

3.1.层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

💡💡样式冲突 就近原则 样式不冲突，不会层叠

3.2.继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

💡💡字标签会继承父标签的某些样式

3.3.优先级

当同一个元素指定多个选择器，就会有优先级的产生

💡💡 优先级很重要很重要 要记牢

• 考虑选择器权重
• 越细分权重越大
• 继承的权重为0

  通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
  💡💡

• 权重表格：

四、CSS盒子模型

网页布局的核心本质： 就是利用 CSS 摆盒子

4.1.边框

💡💡

border:border-width||border-style||border-color

/*简写 无顺序*/
border:1px solid red;
/*分开写 这是上边框 其余同理*/
border-top:1px solid red;

💡💡边框样式:

• none 默认无
• solid 单实现 最常用
• dashed 虚线
• dotted 点线

4.2.表格的细线边框

💡💡

border-collapse:collapse;
/*collapse合并*/

4.3.边框会影响盒子实际大小

💡💡 解决方法:

1. 测量盒子大小的时候，不量边框
2. 如果测量时包含边框，则需要用width/height减去边框宽度

4.4.内边距

padding 属性用于设置内边距，即边框与内容之间的距离。

• padding-top 上内边距
• padding-bottom 下
• padding-left 左
• padding-right 右

💡💡

4.5.外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离

• margin-top 上外边距
• margin-bottom 下
• margin-left 右
• margin-right 左

💡💡
**margin间写表达方式和padding一样
外边距可以让盒子水平居中**

.header {width:200px;
  margin:0 auto;}
/*块级元素水平居中*/

行内元素或者行内块元素水平居中给其父元素添加text-align:center

4.6.外边距合并

1. 相邻块元素垂直外边距的合并

💡💡解决方案：

• 尽量只给一个盒子添加 margin 值。

1. 嵌套块元素垂直外边距的塌陷

💡💡解决方案：

• 可以为父元素定义上边框。
• 可以为父元素定义上内边距。
• 可以为父元素添加 overflow:hidden。

4.7.清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

💡💡

* {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
  }