CSS的入门之旅

这是我参与「第五届青训营」笔记创作活动的第4天

今天要学习css的基础知识第三部分

下面就来简单介绍CSS的第三部分基础知识吧

CSS三大特性

1.层叠性

给相同的选择器相同的样式，但是属性值不同，此时一个样式就会覆盖另一个样式

【原则】：

1.就近原则，哪个样式离结构进就执行哪一个

2.样式冲突才会重叠

2.继承性

子标签会继承父标签的某些样式，比如文字颜色和字号（text,font,line这些元素开头的都可以继承）
行高可以不带单位，比如1.5，是以本身字体的一点五倍

3.优先级

当有一个元素指定了多个选择器，就会产生优先级问题
如果选择器类型相同，则用层叠性原理解决，如果类型不相同，则根据选择器权重执行。

【选择器权重如下】：

选择器	权重
继承或*	0 0 0 0
元素选择器	0 0 0 1
类选择器和伪类选择器	0 0 1 0
id选择器	0 1 0 0
行内样式style=""	1 0 0 0
！important	无穷大

【注意点】：

1.四组数字不能进位，多个叠加只能在本位权重相加

2.权重判断先从左到右，如果相同则判断下一位

3.继承权重为0，如果元素没有被直接选中，则不管父元素权重多高子元素权重都为0

CSS权重叠加

关于优先级还有一个重要点就是关于权重叠加问题

比如在下面这个例子中：

ul{
color: green;
}

ul li{
color:black;
}

li标签内的元素到底会变成什么颜色呢？

答案是黑色；
首先我们可以看到两个选择器都是元素选择器，但由于下面的标签选择器带有两个标签，即可进行权重叠加也就是0 0 0 1+0 0 0 1变为0 0 0 2比上面选择器的权重0 0 0 1大，所以最后颜色会变为黑色。

CSS盒子模型

1.网页布局

盒子模型的应用主要就是在网页布局中，而在网页布局中我们首先应该注意的就是看清网页布局本质
关于如何看清网页布局的本质有以下几个注意的点

1.网页元素基本上都是盒子Box

2.利用CSS设置好盒子样式，然后放到对应的位置

3.往盒子里放内容

2.盒子模型组成

盒子模型：一个橙装内容的容器，本质上就是封装周围html的元素，包括边框，外边距，内边距和实际内容。

以下就是关于盒子模型的缩略图：

盒子模型.png

边框（border）

盒子边框是可以设置的，比如宽度，样式以及颜色

【语法】：

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

属性	作用
border-width	定义边框粗细，单位px
border-style	定义边框样式
border-color	定义边框颜色
border-collapse	定义相邻边框是否合并

样式有许多，下面介绍常用的几个：

1.solid：实线

2.dashed：虚线

3.dotted: 点线

这三种属性有一种复合写法：

【语法】：

border: 1px solid red不需要顺序

边框的属性还可以细化到每一条边上

分别用border-top | -left || -right || -bottom ||来设置

边框还有一个需要重点关注的地方：宽度

边框的宽度会扩大盒子的大小

所以在网页布局盒子的时候要注意边框和盒子宽度相加后的大小

内边距（padding）

内边距即内容与边框之间的距离，有这么以下几个属性：

属性	解释
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合属性写法：

值的个数	表达意义
padding: 5px	1个值，表示上下左右都有5像素的内边距
padding: 5px 10px	两个值，表示上下内边距是5像素，左右内边距是10px
padding: 5px 10px 15px	三个值，表示上内边距5像素，左右内边距10像素，下内边距15px
padding: 5px 10px 15px 20px	四个值，表示上内边距五像素，右内边距10像素，下内边距15像素，

padding还有一种情况不会撑开盒子，那就是盒子没有设置宽度或者高度

外边距（margin）

margin用于设置盒子与盒子之间的距离

外边距也可以像内边距一样细分为四个属性：

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

外边距典型应用：

块级元素【水平居中】条件：

1.盒子指定了宽度

2.盒子左右外边距都设置为auto

如下:
.header{width:900px; margin:0 auto;}

行内元素或者行内块元素【水平居中】条件：

给父元素添加text-align: center即可

!!!使用margin定义元素外边距时可能会出现外边距合并

对于嵌套的块元素，如果两个款元素都设置了同一方向的边距，则父元素会塌陷较大的一个外边距

例如父元素设置上外边距是10px，子元素设置上外边距是20px，则此时父元素的上外边距并不会是10px，而是20px

这里有几个解决方案：

1.为父元素定义上边框

2.为父元素定义上内边距

3.为父元素添加overflow：hidden

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

即：

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

行内元素尽量只设置左右内外边距

- 以上就是今天学习的内容啦，希望大家都能掌握。

[前端与 CSS| 青训营笔记]