css第三天

---

---

CSS 第三天笔记

理解三个点

1.CSS三大特征

2.PxCook像素大师

3.盒子模型

CSS 三大特征

了解三大特性可以让我们对CSS 特点有更好的了解。 可以解决很多的疑惑问题。

三大特性分别是：

1. 继承性
2. 层叠性
3. 优先级

继承性

继承性： 子元素会继承父元素的一些样式

注意： 不是所有的样式都继承，比如宽度和高度就不继承，继承的是一些文字的样式。比如：

1.color

2.font-style、font-weight、font-size、font-family

3.text-indent、text-align

4.line-heigh

特殊情况：

• 链接 有默认的 蓝色。蓝色是谁给的? 浏览器 呀 ~ 相当于 浏览器默认 加了一句话 a{ color:blue;}

• 其实继承了颜色，但是被浏览器默认样式给覆盖了。

• h标签系列有默认的文字大小，继承会失效。

  层叠性

  同一级别：冲突遵循的原则：就近原则。远亲不如近邻。

  div {
      color: red;
      color: blue;
  }
  
  div {
      color: skyblue;
      font-size: 12px;
  }
  

  如果样式冲突，则会覆盖，后面的会覆盖前面。

  如果样式不冲突，则叠加，-同时加上相关样式。

优先级

选择器公式：

继承（0） <通配符（0） < 标签选择器 （1）< 类选择器（10） < id 选择器 （100）< 行内样式表 （1000）< important (重要的 ∞)

• 继承的权重是0 ，写样式已经写到执行的标签上去。

各个选择器的权重

• 标签选择器： 0，0，0，1 简单记忆 1
• 类选择器： 0，0，1，0 简单记忆10
• id选择器： 0，1，0，0 简单记忆100
• 行内选择器：1，0，0，0 简单记忆1000

1. 复合选择器权重会叠加： div p 后代选择器： 0001 + 0001 = 0002
2. 不会有进位的情况， 比如 0，0，0，10
3. 如果选择器权重相同，则执行就近原则 （层叠）

像素大厨 PxCook

盒子模型

边框

边框由三部分组成：

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线 dashed、点线 dotted
边框颜色	border-color	颜色取值

边框的连写形式：

  /* border: 粗细  样式 颜色  */
boder: 1px solid red

可以只给一个方向的边框:

left 左 right 右 top 上 bottom 下

border-left: 1px solid red ; 左边框

border-right: 1px solid red; 右边框

border-top: 1px solid red 上边框

border-bottom: 1px solid red; 下边框

input {
    width: 520px;
    height: 58px;
    font-size: 25px;
    /* 取消文本框默认的边框 */
    border: 0;
    /* 取消文本框默认的轮廓线 */
    outline: 0;
    border-bottom: 1px solid #e7e7e7;
    background: url(./img/fdj.png) no-repeat left center;
}

input:hover {
    border-bottom: 1px solid #ff6700;
}

<input type="text" placeholder="搜一搜">

padding 内边距

内边距是控制： 内容和边框之间的距离

取值	实例	含义
一个值	padding: 10px;	上下左右都设置为10px
两个值	padding: 10px 20px;	上下设置为10px，左右设置为20px
三个值	padding: 10px 20px 30px;	上设置为10px，左右设置为20px，下设置为30px
四个值	padding:10px 20px 30px 40px;	上设置为10px，右设置为20px，下设置为30px，左设置为40px

比如：

.box {
     width: 200px;
     height: 200px;
     background-color: pink;
     /* 内边距  padding*/
     /* 只写一个值， 上下左右都是 10px */
     /* padding: 10px; */
     /* padding 两个值  上下 是 10 左右是 20 */
     /* padding: 10px 20px; */
     /* 上是 10 左右是 20  下是 30 */
     /* padding: 10px 20px 30px; */
     /* 上 10  右 20  下 30  左 40 */
     /* padding: 10px 20px 30px 40px; */

}

如果只改变一侧的内边距

左内边距 padding-left: 20px;

右内边距 padding-right: 20px;

注意：

盒子的实际大小 = content (内容) + padding （内边距）+ margin （外边距）

调整盒子大小：

1.手动内减模式 ： 手动更改 width / height 的大小

2.自动內减模式： border-sizing: border-box

margin 外边距

1.让一个块级的盒子水平居中方法：

• 必须是块级盒子，有宽度
• 让盒子左右的外边距改为auto即可。
• margin：0 auto；

比如：

1.小米 margin-left: auto; margin-right: auto;

2.京东 margin : auto;

3.淘宝 margin: 0 auto;

2.清楚浏览器元素默认的内外边距

* {
    margin: 0;
    padding: 0;
}

这样可以让浏览器默认的风格统一。