css入门学习笔记（持续迭代）

目录

 文本属性

背景和透明度

外边距与内边距

flout 与 clear应用场景：

行内元素，块元素与元素转换类型（即display属性）

定位属性position

---

文本属性

---

.box{

font-size: 30px;

字体尺寸，

用法为用ps 量取字体的“高”，再进行输入

font-family: "仿宋";

字体风格

中文的字体 和 多单词的字体 要引号括住

color: #000;

字体的颜色

font-weight: bold;

字体的宽度

用于加粗字体

text-indent: 2em;

文本缩进

用于文章前面空两行

2em是两个父元素长度

text-decoration: line-through;

line-through：删除线

overline：上划线

underline ：下划线

none：清除样式（通常用于清除超链接的默认下划线）

line-height: 30px;行高

如果将其设置为div模板（应为父元素模板）的高度，可以实现垂直居中的效果

text-align: center;

设置该块元素内的文本水平居中

注意：给一个父元素设置该属性，会将这个父元素的行内元素1全部设置文本水平居中，而如果父元素内有其他的块元素，而这个块元素内也有行内元素2，这个text-align: center是不会对 行内元素2生效的,因为该属性只对块元素内的文本水平居中,而不会将块元素中的块元素的文本水平居中

1.Center：居中 较为常用

2.Justify：当段的长度超出width 时 会适应换行

图例：

letter-spacing: 12px;

字体间距

flex-direction： ；    

用于在 Flexbox 布局中设置主轴方向的属性。它可以接受以下值之一：

• row：主轴与文档流方向相同，即水平方向从左到右。
• row-reverse：主轴与文档流方向相反，即水平方向从右到左。
• column：主轴垂直于文档流方向，即垂直方向从上到下。
• column-reverse：主轴垂直于文档流方向，即垂直方向从下到上。

Font缩写设置：

1.font-weight

2.flex-direction          

3.font-size/line-height: 字体大小/行高    

4.font-family

font:bold italic 12px/1.5em "宋体";

img{

vertical-align: middle;

*作用：去除图片下面的多余背景

 }

背景和透明度

---

  1. background-color:;   背景颜色  

2. background-image:ur1();

3. background-repeat: 背景重复；

有一下几个属性

• repeat默认值,        重复
• no-repeat          不重复( 这个较为常用 通常是设置只有一张图的背景)
• repeat-x    水平方向重复
• repeat-y   垂直方向重复;

4. background-position:0 0; 背景定位

水平方向: left左 、right右、center

居中垂直方向: top上 、bottom下 、center居中

5. background-size:100px 100px; 背景尺寸

重点:背景属性的简写形式

**background : url()  背景重复  背景定位(x,y)/ 背景尺寸(可以为具体的尺寸(w , h) ,也可以用百分号填充(100%,100%))

注：url（）内是图片的链接,该属性用来设置背景图片

设置透明度的两个形式

1.background:rgba(0,0,0,0.6);

    没有继承性

2.opacity:0.6;

    有继承性

外边距与内边距

---

1.   ' * '作用：用于选中所有 

设置内外边距为 0 

* {

            margin: 0; //外边距

            padding: 0;  //内边距

  }

2．单方向外边距的设置

 margin-top上外边距

 margin-bottom下外边距

 margin-left左外边距

 margin-right右外边距

3.四个方向外边距的设置

margin:10px;                                                                                   上下左右外边距都是10px

margin:10px 20px;                                                       第一个值代表上下,第二个值代表左右

margin: 10px 20px 3px;                        第一个值代表上,第二个值代表左右,第三个值代表下

argin:10px 20px 30px 40px；                                                                   分别代表上右下左  

 内边距与外边距的使用完全相同这里，只举了外边距

flout （浮动）与 clear（清楚）应用场景：

---

要实现这样的效果，就会用到flout

即让每个div向左浮动

使用flout可能会出现这样的问题，flout的div太大 ， 会超出父元素div的高度或宽度，而flout的div并不会撑开父元素div的高度，就出现溢出问题。

一般有两种种解决方法：

1.设置足够高的父元素div 

此方法较为笨，很不灵活 

2. 设置足够高的父元素div 同时 设置overflow：hidden \ auto；

之后会讲一种更实用的方法，即万能清除浮动法

 这样的表格是如何实现？

在给过多的div设置flout属性时，父元素的宽度容纳不下这么多的div时，div会“滑动”下去

但不是单纯的从下一行在排列

看以下例子：

其实是这样的一种关系，div3从右边滑下来，掉到了div1上，并没有换行

 解决父元素高度坍塌问题

万能清除浮动法（实际开发中相当常用）

.clear-fix:after

{

    content: "";

    display: block;

    clear : both;

}

行内元素inline，块元素block与元素转换类型（即display属性）

---

• display 属性规定元素应该生成的框的类型，常用的值有下面几个
• block 元素显示为块级元素
• inline 元素显示为行内元素
• inline-block 元素显示为行内块元素
• none 元素消失

 

block块元素特点(参考了其他文章)：

• block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度与高度自动填满其父元素宽度与高度(在父元素没有设置宽高的前提下，子元素block会撑开父元素的宽高)
• block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
• block元素可以设置margin（外边距）和padding（内边距）属性。

inline行内元素特点 :

• inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
• inline元素设置width,height属性无效。
• inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果（有效）；
• 但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果（无效）。

inline-block行内块元素特点: 

• 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
• 比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

行内元素和块级元素的区别 

1. 块级元素block独自占一行且宽度会占满父元素宽度，行内元素inline不会独占一行，相邻行内元素可以排在同一行

2. 块级元素可以设置width和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行

3. 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right,可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果。

举一个block转化为 inline-block 的应用：

定位属性position

---

 相对定位 （position:relative）

• 参考物:元素本身，是相对于它自己原来的位置来说的
• 是否脱离文档流:不脱离
• 偏移距离:(向着中心点方向移动为正值)

• 边偏移（方位名词）：

top:10px                                                                                   参考自己的顶部向下移动10px

bottom:100px                                                                        参考自己的底部向上移动100px

left:100px                                                                               参考自己的左侧向右移动100px

right:100px                                                                             参考自己的右侧向左移动100px

相对定位的的三个注意点：

• 用于边偏移，相对于自己原来的位置来移动（移动位置的时候参照点是自己原来的位置），借助top，

• 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标，也就是位置看起来虽然发生变化，但实际上它还在原来的位置

• 它最典型的应用是给绝对定位当爹的，也就是说，该元素设置该属性后，其子元素设置了position:absolute的，会以该元素进行参照

 绝对定位（position:absolute）

• 绝对定位是元素在移动位置的时候，是相对于它父元素来说的 

• absolute特点：

1. 完全脱标 —— 完全不占位置；

2. 父元素或者祖先元素没有定位（没有设置 相对定位 position:relative），则以浏览器为准定位（Document 文档）。

   

• 元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
• 

 fixed 固定定位

设置该属性后，元素不会根据浏览器的上下滑动而改变位置

  

  

后续还会继续修改，感谢你能看到这里！