CSS小结

﹏ヽ暗。殇╰゛Y 2022-01-23 04:03 362阅读 0赞

# CSS小结 #

## 网页布局的三种方式 ##

### 标准流 ###

就是我们之前介绍的 显示模式

#### 显示模式 display ####

##### 块级元素 block #####

*  独自占据一行
 *  默认的宽度是父元素的宽度
 *  可以去设置宽高
 *  里面可以包含任何东西
    
     *  文字类的块级元素不能再包含div
 *  常见的块级元素
    
     *  h1~h6
     *  p标签
     *  div标签
     *  ul li 标签
     *  form表单域

##### 行内元素 inline #####

*  一行显示多个
 *  不能设置宽高
 *  默认的宽高是内容的宽高
 *  里面可以包含文本或者其他的行内元素
 *  常见的行内元素
    
     *  span
     *  a标签
     *  文本格式化标签 strong 加粗 em 倾斜 ins 下划线 del 删除线

##### 行内块 inline-block #####

*  一行显示多个
 *  可以设置宽高
 *  默认的宽度是内容的宽度
 *  常见的行内块
    
     *  img 图片标签
     *  input 表单元素

##### 可以去修改对应元素的显示模式 #####

利用display的属性

### 浮动 ###

#### 为什么需要浮动？ ####

能够让我们块级元素水，用来布局的

#### 语法 ####

div{
        
        float: left| right;
    }

#### 特点 ####

*  浮： 漂浮在标准流的上面
 *  漏： 不占据标准流的位置，脱标，后面的标准流的兄弟元素就会占据它原来的位置
 *  特： 改变了元素的特性，类似于行内块，浮动元素的宽度和大于父元素的话，会自动换行

#### 浮动元素的小细节 ####

浮动的元素不会影响前面的兄弟元素

浮动的孩子都会套一个父亲，这个父亲是用来占据标准流的位置，防止页面崩塌

#### 清除浮动 ####

##### 为什么需要清除浮动？ #####

因为浮动的元素没有占据标准流的位置，然后父元素如果没有设置高度的话，那么父元素的高度为0；

##### 清除浮动的必然的两个条件？ #####

1.父元素没有设置高度

2.里面的子元素浮动了

##### 清除浮动的本质 #####

解决父元素高度为0的问题

##### 清除浮动的方式 #####

*  额外标签法
    
     *  在浮动元素的后面添加一个空的标签，然后设置一个属性 clear: both;
    
        <div>
          <div>我浮动了</div>
          <div style="clear: both;"></div>
        <div>
 *  给父亲添加 overflow: hidden的属性
 *  伪元素方式
    
     *  单伪元素
    
        .clearfix:after {
              
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .clearfix {
              
            *zoom: 1;
        }
    
     *  双伪元素
    
        .clearfix:before,
        .clearfix:after {
              
            content: "";
            display: block;
        }
        .clearfix:after{
              
            clear: both;
        }
        .clearfix {
              
            *zoom: 1;
        }

### 定位 ###

#### 为什么需要定位？ ####

解决盒子层叠的效果，或者是某一个盒子固定在浏览器的某一个位置

#### 定位的组成 ####

##### 定位模式 #####

*  static 静态定位； 就是标准流
 *  relative 相对定位
    
     *  相对于自身原来在标准流中的位置进行定位
     *  不脱标的
 *  absolute 绝对定位
    
     *  参照的最近的有定位的父辈元素，如果父辈元素都没有定位，那么参照的就是页面的左上角
     *  完全脱标
 *  fixed 固定定位
    
     *  参照的是浏览器的可视区域
     *  完全脱标

##### 边偏移 #####

盒子的偏移量 设置我们的方位名词

div {
        left: 左偏移
        right: 右偏移
        top: 上便宜
        bottom： 下偏移
    }

#### 堆叠顺序 z-index ####

是定位元素特有的。z-index的默认值是0，值越大，盒子越在上面

#### 如何让一个定位的元素居中显示 ####

例如：一个盒子水平居中

div {
        
        left: 50%;
        margin-left: -自身的宽度一半;
    }

高度是同理的

一定一定要记住一句话，叫做**子绝父相**

## 盒子模型 ##

### 组成 ###

*  内容
 *  边框
 *  内边距
 *  外边距

### 边框 border ###

#### 组成 ####

*  width 粗细
 *  style 样式
 *  color 颜色

#### 语法 ####

div {
        
        border-width: 2px;
        border-style: solid实线|dashed虚线|dotted点线;
        border-color: #fff;
        /*简写方式*/
        border: width style color;
    }

#### 边框是允许单独设置某一个方向的 ####

#### 可以利用边框来实现 三角形 ####

### 内边距 padding ###

语法：

div {
        
        /*可以单独去设置某一个方向的内边距*/
        padding-left|right|top|bottom: 2px;
        /*上下左右的内边距是5px*/
        padding: 5px;  
        /*上下是5px  左右是10px*/
        padding: 5px 10px;
        /*上是5px  左右10px  下 15px*/
        padding: 5px 10px 15px;
        /*上是5px  右10px  下 15px  左是 20px*/
        padding: 5px 10px 15px 20px;
    }

注意： 内边距是不能设置负值的，设置的是内容与边框之间的距离

### 盒子的真实大小 ###

一个盒子真实大小 = 内容的宽度|高度 + 对应两边的内边距 + 对应两边的边框;

一种情况下内边距不会撑大盒子：块级盒子没有设置宽度的情况下

### 外边距 margin ###

#### 语法: ####

div {
        
        /*可以单独去设置某一个方向的内边距*/
        margin-left|right|top|bottom: 2px;
        /*上下左右的内边距是5px*/
        margin: 5px;  
        /*上下是5px  左右是10px*/
        margin: 5px 10px;
        /*上是5px  左右10px  下 15px*/
        margin: 5px 10px 15px;
        /*上是5px  右10px  下 15px  左是 20px*/
        margin: 5px 10px 15px 20px;
    }

**外边距是设置盒子与盒子之间的距离**

#### 如何让一个块级盒子居中显示 ####

1.  设置宽度
2.  设置 margin: auto;

#### 外边距有一些不稳定性 ####

##### 兄弟关系垂直方向外边距的合并问题 #####

相邻的两个块级盒子，上面的盒子设置了margin-bottom: 50px; 下面的盒子设置了margin-top: 40px;那么两个盒子中间的距离是50px

\*\*解决：\*\*给一个盒子设置一个外边距

##### 父子关系垂直方向外边距的塌陷问题 #####

嵌套的两个块级盒子，里面的孩子设置了margin-top: 50px; 那么效果并不是子孩子距离父亲上边框的距离有50px，而是把父亲一起拉下来了

**解决：**

*  给父亲设置上边框
 *  给父亲设置上内边距
 *  给父亲设置 overflow: hidden
 *  设置浮动
 *  设置了定位(绝对定位、固定定位)

### 布局的时候 ###

宽高 --> 内边距 --> 外边距

## 属性 ##

### 背景相关属性 background ###

background-color 背景颜色

background-image 背景图片 url(图片的路径)

background-position 背景定位

1.方位名词 left|right top | bottom center

2.精准像素 第一个值 是X轴的偏移 第二个值是Y轴的偏移

background-repeat 背景平铺 repeat 平铺 | no-repeat 不平铺 | repeat-x 水平方向平铺 | repeat-y 垂直方向平铺

background-attachment 背景附着(是否固定) scroll不固定|fixed 固定

简写方式如下：

background: 颜色 图片 是否平铺 是否固定 定位;

### 字体相关的属性 font ###

font-size 字体大小

font-style 是否倾斜 italic倾斜 | normal 不倾斜

font-family 字体 如果是中文或者是有特殊符号的英文 要用引号引起来

font-weight 粗细 400(normal)代表 正常 700(blod)代表加粗 number 100~ 900

简写方式如下:

font: 粗细 是否倾斜 字体大小 字体;

### 文本装饰类的属性 ###

text-align 设置里面的内容水平的对齐方式 （内容包含 文本内容和内联元素） left 左对齐|right 右对齐 |center 居中

text-indent 首行缩进，单位是 em 1em代表是一个字的距离

text-decoration 文本装饰， none 去掉下划线| underline 设置下划线;

color 字体的颜色

line-height 设置行高，行高等于高度，单行文本 垂直居中

## CSS三大特性 ##

### 继承性 ###

子承父业，子元素可以去继承父元素的一些属性

text-开头的 font-开头的 line-开头的 color

### 层叠性 ###

样式冲突的，采取就近原则，近的覆盖掉远的，前提是在优先级相同的情况

### 优先级 ###

CSS优先级的算法公式

继承的或者是通配符 0, 0, 0, 0

标签选择器 0, 0, 0, 1

类，伪类 0, 0, 1, 0

id选择器 0, 1, 0, 0

style行内样式 1, 0, 0, 0

**!important 直接作用在属性后面**

权重是可以叠加的，简单的加法运算，不能进位

## 选择器 ##

### 基础选择器 ###

*  标签选择器
    
     *  能够选择出整个页面对应的标签，不能差异化处理
     *  不要用没有语意的标签选择器 div span
 *  类选择器
    
     *  可以差异化处理，能够选择1个或者是多个
 *  id选择器
    
     *  唯一性，只要在style里面看到了 \# 号，那就是id选择器，用的不多，通常配合js去使用
 *  通配符选择器
    
     *  `*{margin: 0; padding: 0;}`取消元素默认的内外边距

### 复合选择器 ###

*  后代选择器
    
     *  能够选择出所有的子孙后代 选择器中间用 空格 隔开
 *  并集选择器
    
     *  用于集体声明，中间用 逗号隔开
 *  链接伪类选择器
    
     *  a:link 为访问的时候，触发的样式
     *  a:visited 访问过后，触发的样式
     *  a:hover 鼠标移入的时候触发的样式
     *  a:active 长按的时候触发的样式
 *  子元素选择器
    
     *  只能够选择器亲儿子，选择器中间用 > 隔开
 *  交集选择器
    
     *  并且的意思，即是…又是 `span.cls{}`这个意思就是选择出的 即是span标签，并且类名叫 cls的元素

## 元素的显示与隐藏 ##

*  利用 display : none; 隐藏
    
     *  隐藏，不占据位置
 *  利用 visibility: hidden 隐藏
    
     *  隐藏，占据位置
 *  利用 overflow: hidden 隐藏
    
     *  超出的内容进行隐藏

## 精灵图技术 ##

### 为什么有精灵图技术？ ###

减少与服务器的交互的次数，减少了服务器的压力，从而优化了我们的网络请求

减少了命名的烦恼

### 精灵图的核心技术 ###

利用了 背景定位 background-postion

### 使用 ###

1.测量图标的宽高 ，然后设置给相应的盒子

2.插入这张背景图，然后需要测量图标在大图片上面的位置，然后设置给 background-position

## 如何让文本显示省略号 ##