HTML CSS学习笔记 第五天

目录

CSS的三大特性

层叠性

继承性

优先级

盒子模型

盒子模型四部分

---

CSS的三大特性

层叠性、继承性、优先级

层叠性

就近原则

同一个标签后面的样式会覆盖前面的样式

继承性

子标签会继承父标签的某些样式，如文本颜色、字号

通常先再body里面设置字体样式

行高继承通常写的是倍数如

font: 16px/1.5 'Microsoft yahei'

优先级

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

• 如果选择器相同，则执行层叠性

• 选择器不同则根据选择器权重

  继承 通配符（*）< 标签 < 类 伪类 < ID < 行内样式（style=""）< !important

• 小心继承陷阱

• 链接标签a有默认样式（蓝色 下划线）不会继承body的样式

• css会有权重叠加的问题，如 ul li{} > li{}

权重的叠加计算

 

• 同位相加不进位

• 从左边开始比

盒子模型

页面布局三大核心和，盒子模型、浮动、定位。

• 网页布局核心就是利用CSS摆盒子

盒子模型四部分

1. 边框（border）

   • 三部分：边框宽度（粗细）（border-width 单位是px）、样式（border-style）、颜色（border-color）

     • 实线边框: border-style: solid;

     • 虚线边框: border-style: dashed;

     • 点线边框: border-style: dotted;

   • 简写：

     border: 1px solid red; (顺序可变)

     可以分开来写 分为四部分border-top（bottom、left、right）

   • 细线边框（合并重叠的相邻边框）

     border-collapse: collapse;

   • 会影响盒子的实际大小

2. 外边距（margin）

   • margin-top(bottom、left、right): 5px;

   • margin: 5px;(上下左右都是5px)

   • margin: 5px 10px;(上下5px 左右10px)

   • margin: 5px 10px 20px;(上5px 左右10px 下20px)

   • margin: 5px 10px 20px 30px;(上5px 右10px 下20px 左30px)

3. 内边距（padding）

   • padding-top(bottom、left、right): 5px;

   • 复合写法：（顺时针）

     padding: 5px;(上下左右都是5px)

     padding: 5px 10px;(上下5px 左右10px)

     padding: 5px 10px 20px;(上5px 右左10px 下20px)

     padding: 5px 10px 20px 30px;(上5 右10 下20 左30)

   • 会影响盒子实际大小，若没有width/height属性，则不会撑开盒子。

4. 实际内容（content）

 

外边距典型应用

外边距可以让块级盒子水平居中，但必须满足两个条件：

• 盒子必须制定了宽度（width）

• 盒子左右的外边距都设置为auto

常见三种写法（设置了width之后）

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

2. margin: auto;

3. margin: 0 auto;(常用)

行内元素或行内块元素居中对齐只需给其父元素添加text-align: center;即可。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距合并的问题。

两种情况：

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

   • 同位置的外边距以大的为准。如margin-bottom: 100px;和另一个盒子的margin-top: 200px;最后两个盒子的距离是200px。

     解决方案：

     • 相同位置只设置一个外边距。

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

   • 子元素的外边距会导致父元素的外边距塌陷，如父元素的margin-top: 50px;子元素的margin-top: 100px;

     最后效果相当于父元素的上外边距为100px（取值大的那个外边距）。

     解决方案：

     • 给父元素加个border（不想要颜色可以将颜色设置为transparent）（会影响盒子大小）

     • 给父元素加padding（会影响盒子大小）

     • 给父元素加overflow: hidden; ( 常用，不会影响盒子大小 )

清除内外边距

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

于是，在写css的时候，第一行都写上这样一行代码：

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

另外，行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但转换为块级或行内块元素就可以了。