CSS学习笔记总结（上）

分手后的思念是犯贱 2022-02-09 08:55 286阅读 0赞

#### **一、CSS简介：** ####

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。

#### **二、CSS作用：** ####

有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

#### **三、CSS基本语法：** ####

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。

div{ 
        width:100px; 
        height:100px; 
        color:red 
    }

#### **四、CSS页面引入方法：** ####

1、外联式：通过link标签，链接到外部样式表到页面中。

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

3、内联式：通过标签的style属性，在标签上直接写样式。

#### **五、CSS文本设置：** ####

<table> 
 <thead> 
  <tr> 
   <th>样式</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>设置文本的颜色, 如color:red</td> 
  </tr> 
  <tr> 
   <td>font-size</td> 
   <td>设置文字的大小，如：font-size:12px</td> 
  </tr> 
  <tr> 
   <td>font-family</td> 
   <td>设置文字的字体，如：font-family:‘微软雅黑’</td> 
  </tr> 
  <tr> 
   <td>font-style</td> 
   <td>设置字体是否倾斜，如：【不倾斜】font-style:‘normal’;【倾斜】font-style:"italic’</td> 
  </tr> 
  <tr> 
   <td>font-weight</td> 
   <td>设置文字是否加粗，如: 【加粗】bold; 【不加粗】normal</td> 
  </tr> 
  <tr> 
   <td>lin-height</td> 
   <td>设置文字的行高，设置行搞相当于在每行的上下同时加间距</td> 
  </tr> 
  <tr> 
   <td>font</td> 
   <td>同时设置文字的几个属性：font:是否加粗 字号/行高 字体</td> 
  </tr> 
  <tr> 
   <td>text-decoration</td> 
   <td>设置文字的下划线</td> 
  </tr> 
  <tr> 
   <td>text-indent</td> 
   <td>设置文字首行缩进</td> 
  </tr> 
  <tr> 
   <td>text-align</td> 
   <td>设置文字水平对齐方式，如text-align:center 设置文字水平居中</td> 
  </tr> 
 </tbody> 
</table>

#### **六、CSS颜色表示法** ####

1、颜色名表示，比如：red 红色，gold 金色  
2、rgb表示，比如：rgb(255,0,0)表示红色  
3、16进制数值表示，比如：\#ff0000 表示红色，这种可以简写成 \#f00

#### **七、标签选择器：** ####

1.  **标签选择器**：标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
2.  **id选择器**：通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器

#box{color:red}

1.  **类选择器**：通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

.red{color:red}

1.  **层级选择器**：主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

.box span{color:red}
    .box .red{color:pink}
    .red{color:red}

1.  **组选择器** ：多个选择器，如果有同样的样式设置，可以使用组选择器。

.box1,.box2,.box3{width:100px;height:100px}
    .box1{background:red}
    .box2{background:pink}
    .box2{background:gold}

1.  **伪类及伪元素选择器**：常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
    .box2:before{content:'行首文字';}
    .box3:after{content:'行尾文字';}

#### **八、CSS盒子模型** ####

1.  **盒子模型解释：** 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDU3NjAxMA_size_16_color_FFFFFF_t_70]  
    把元素叫做盒子，设置对应的样式分别为：盒子的宽度（width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding）、盒子与盒子之间的间距(margin）。
2.  **设置宽高：**

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
    height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

1.  **设置边框：**

border-top-color:red;    /* 设置顶部边框颜色为红色 */  
    border-top-width:10px;   /* 设置顶部边框粗细为10px */   
    border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  dashed(虚线)  dotted(点线); */

上面三句可以简写成一句(无顺序要求），font的有顺序要求：

border-top: 10px solid red;

设置其他三个变的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。  
  
四个边如果设置一样，可以将四个变的设置合并成一句：

border:10px solid red;

1.  **设置内间距padding:**

padding-top:20px; /* 设置顶部内间距20px */
    padding-left:30px; /* 设置左边内间距30px */
    padding-right:40px;/* 设置右边内间距40px */
    padding-bottom:50px; /* 设置底部内间距50px */

上面的设置可以简写如下：

padding:20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是上 右 下 左四个方向的内边距值。*/

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding:20px 40px 50px; /*设置顶部内边距为20px,左右内边距为40px*/
    padding: 20px 40px; /*设置上下内边距为20px，左右内边距为40px*/
    padding: 20px; /*设置四边内边距为20px*/

1.  **设置外间距margin**  
    外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’marding’就是外边距设置方法。

#### **九、盒子模型使用技巧及相关问题：** ####

1.  **margin相关技巧：**

*  设置元素水平居中:margin：x auto;
 *  margin负值让元素位移及边框合并
 *  body元素默认margin有8像素

1.  **外边框合并**: 外边距合并指的是，当俩个垂直外边距相遇时，它们将形成一个外边距。合并后的外边边距的高度等于俩个发生合并的外边距的高度中的较大者。  
    **解决方法如下：**
    
     *  使用这种特性
     *  设置一边的外边距，一般设置margin-top
     *  将元素浮动或者定位  
        
2.  **margin-top 塌陷：** 在俩个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败  
    **设置方法如下:**
    
     *  外部盒子设置一个边框
     *  外部盒子设置overflow:hidden
     *  使用伪元类：

.clearfix:befor{
    	content: '';
    	display:table;
    	}

#### **十、CSS元素溢出** ####

**情况：** 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。  
  
**overflow的设置项:**

<table> 
 <thead> 
  <tr> 
   <th>设置项</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>visible</td> 
   <td>默认值。内容不会被修建，会呈现在元素框之外。</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>滚动条一直有，内容超过，内容会被修剪，滚动滚动条以便查看其余内容</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>内容不超过，没有滚动条，如果超过，则浏览器会显示滚动条以便查看其余的内容</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承overflow属性的值</td> 
  </tr> 
 </tbody> 
</table>

#### **十一、块元素、内联元素、内联块元素** ####

元素就是标签，布局中常用的有是三种标签：**块元素、内联元素、内联块元素**， 了解这三种元素的特性，才能熟练的进行页面布局。

1.  **块元素：** 称为行元素，布局中常用的块标签如: div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：
    
     *  支持全部的样式
     *  如果没有设置宽度，默认的宽度为父级宽度100%
     *  盒子占据一行、即使设置了宽度
2.  **内联元素：** 称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
    
     *  支持部分样式（不支持宽、高、margin上下、padding上下)
     *  宽高由内容决定
     *  盒子并在一行
     *  代码换行，盒子之间会产生间距
     *  子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
    
    **解决内联元素间隙的方法：**
    
     *  去掉内联元素之间的换行
     *  将内联元素的父级设置font-size为0，内联元素再设置font-size
3.  **内联块:** 称为行内块元素，是新增的元素类型，现在元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中的表现的行为：
    
     *  支持全部样式
     *  如果没有设置宽高，宽高由内容决定
     *  盒子并在一行
     *  代码换行，盒子会产生间距
     *  子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

1.  **display属性**  
    display属性是用来设置元素的类型及隐藏的，常用的属性有：
    
     *  none 元素隐藏且不占位置
     *  block 元素以块元素显示
     *  inline 元素以内联元素显示
     *  inline-block 元素以内联块元素显示

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDU3NjAxMA_size_16_color_FFFFFF_t_70]: /images/20220209/c9becc568945485da30fda5b00db840b.png