CSS学习笔记

Posted 2021-06-29 coderkey

七，CSS三大特性

1，层叠性

（1）含义：

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

（2）原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
样式不冲突，不会重叠。

2，继承性

（1）含义：

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

（2）注意：

子元素可以继承父元素的样式（text- , font- , line 这些元素开头的可以继承，以及color属性)。

（3）行高的继承性：

语法：

   body   {
          font:   12px/1.5   Microsoft;  /*  这里的12px是文字大小，1.5是行高*/
     }

注意：

（1）行高可以跟单位也可以不跟单位。
（2）如果子元素没有设置行高，则会继承父元素的行高1.5.
（3）此时子元素的行高是：当前子元素的文字大小乘以1.5

例如：

（1）如果子元素P的文字大小为16px，但是它没有设置行高，它会继承父元素的行高1.5；等于当前文字16px * 1.5 为24，所以它的行高为24px。

3，优先级

（1）含义：

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

（2）原则：

选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行。

（3）选择器的权重：

选择器	选择器权重
继承或者 *	0
标签（元素）选择器	1
类选择器、伪类选择器	10
ID选择器	100
行内选择器 style=""	1000
!important 重要的	无穷大

（4）权重的叠加：

如果是复合选择器，则会有权重叠加，需要计算权重。

（5）例如：

div ul li ——1+1+1=3
.nav ul li ——10+1+1=12
a:hover ——1+10=11
.nav a ——10+1=11

（6）注意：

不管怎么相加，类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
继承性的权重是0，如果该元素没有直接选中，而是包含在父元素里面的，不管父元素权重多高，子元素得到的权重都是为0。a标签如果没有设置样式，会根据浏览器自带的蓝色字体和下划线显示。

---

八，盒子模型

盒子模型的组成： CSS盒子模型本质是一个盒子，封装周围的html元素，它包括：边框、外边距、内边距和实际内容组成

1，边框（border）

（1）含义：

border可以设置元素的边框。

（2）语法：

border-width | border-style | border-color;

（3）属性：

属性	作用
border-width	定义边框粗细（宽度），单位是px
border-style	定义边框样式。solid(实线)、dashed(虚线)、dotted(点线)
border-color	定义边框颜色

（4）边框的复合写法：

1，border:  1px  solid  red;    没有顺序
2，border-top  上边框；border-left  左边框；border-bottom  下边框；border-right  右边框；

（5）表格的细线边框：

含义;

   border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

 border-collapse:  collapse;   /*  表示相邻边框合并在一起。*/

2，内边距（padding）

（1）含义：

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

（2）属性：

属性	作用
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

（3）复合属性：

值的个数	表达意思
padding: 5px	1个值，代表上下左右都有5像素的内边距
padding: 5px 10px	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding: 5px 10px 20px 30px	4个值，代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距30像素(顺时针）

（4）注意：

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

3，外边距（margin）

（1）含义：

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

（2）属性：

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

（3）复合属性：

值的个数	表达意思
margin: 5px	1个值，代表上下左右都有5像素的外边距
margin: 5px 10px	2个值，代表上下外边距是5像素，左右外边距是10像素
margin: 5px 10px 20px	3个值，代表上外边距5像素，左右外边距10像素，下外边距20像素
margin: 5px 10px 20px 30px	4个值，代表上外边距5像素，右外边距10像素，下外边距20像素，左外边距30像素(顺时针）

---

典型应用

1，块级盒子水平居中

（1）条件：

1，盒子必须指定宽度。
2，盒子左右外边距都设置为auto。

（2）写法：

 1，margin:  0  auto;
 2，margin-left:  auto;    margin-right:  auto;
 3，margin: auto;

2，行内元素或者行内块水平居中

（1）方法：

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

3，相邻块元素垂直外边距的合并

（1）问题：

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

（2）方法：

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

4，嵌套块元素垂直外边距的塌陷

（1）问题：

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值（谁大塌陷谁）。

（2）方法：

可以为父元素添加overflow: hidden;
可以为父元素定义上内边距padding-top;
可以为父元素定义上边框。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。

5，清除内外边距

（1）问题：

网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致。因此要清除下网页元素的内外边距。

（2）方法：

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

（3）注意：

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

6，清除列表项的项目符号

（1）问题：

去掉li前面的项目符号（小圆点）

（2）方法：

  list-style: none;

---

九，圆角边框,盒子阴影和文字阴影

1，圆角边框

（1）含义：

在CSS3中，新增了圆角边框样式，border-radius属性用于设置元素的外边框圆角。

（2）语法：

  border-radius: length;

（3）属性：

属性	作用
border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-right-radius	右下角
border-bottom-left-radius	左下角

（4）复合属性：

值的个数	表达意思
border-radius: 5px	1个值，代表四个角都有5像素的圆角边框
border-radius: 5px 10px	2个值，代表左上角和右下角是5像素，右上角和左下角是10像素；（对角线）
border-radius: 5px 10px 20px	3个值，代表左上角为5像素，右上角和左下角为10像素，右下角为20像素；（对角线）
border-radius: 5px 10px 20px	4个值，代表左上角5像素，右上角10像素，右下角20像素，左下角30像素(顺时针）

（5）注意：

1，参数值可以为数值或者百分比形式。
2，如果是正方形，想要设置为一个圆，就把数值修改为高度或者宽度的一半即可，或者直接写为50%。
3，如果是个矩形，设置为高度的一半可以了。

2，盒子阴影

（1）含义：

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

（2）语法：

box-shadow:   h-shadow  v-shadow ;

（3）属性值：

属性值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影大小（尺寸）
color	可选。阴影颜色。
inset	可选。将外部阴影（outset）改为内部阴影

3，文字阴影

（1）含义：

在CSS3中，可以使用text-shadow属性将阴影应用于文。

（2）语法：

   text-shadow:   h-shadow  v-shadow ;

（3）属性值：

属性值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
color	可选。阴影颜色。

---