CSS-查漏补缺

CSS

1、CSS 基础

05、文字控制属性

字体粗细   fon-weight  400 700

字体倾斜  font-style normal  italic

文本缩进  text-indent  2em

文本对齐  text-align left center right

修饰线  text-decoration  none

07、案例

案例1

 案例2

2、CSS 高级

01、复合选择器

1.4 交集选择器

交集选择器：选中同时满足多个条件的元素。

选择器写法：选择器1选择器2 { CSS 属性}，选择器之间连写，没有任何符号。

<style>
  p.box {
  color: red;
}
</style>
​
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

注意是特定的p.box，不是所有的.box

1.5、伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：对应的选择器:hover { CSS 属性 }

设置鼠标悬停状态的选择器是伪类选择器。

04、背景属性

宽度 width

高度 height

背景色 background-color

背景图   background-image  

background-image: url(./images/1.png);

平铺方式  background-repeat(bgr)  no-repeat    一般是不平铺

背景图位置 background-position(bgp)   水平 left right center  垂直: top bottom center

背景图缩放 background-size: cover contain

背景图固定 background-attachment(bga): fixed

背景图复合模式 background 可以写多个背景图模式

05、显示模式

5.1 块级显示 

div

5.2 行内显示

span

5.3 行内块显示

  img

06、案例  热词

6.1 案例一

 6.2 案例二

 

3、盒子模型

01、选择器

1.1 结构伪类选择器

E:nth-child()

n+5 第5个以后的标签

-n+5 第5个以前的标签

1.2 伪元素选择器

作用：创建虚拟元素，用来摆放装饰性内容

 

03、盒子模型

3.1 盒子模型组成

1. 内容宽度和高度 width 和 height
2. 内边距 padding
   1. 作用：设置 内容 与盒子边缘 之间的距离
   2. padding / padding-方位名词
   3. 添加padding会撑大盒子
3. 边框线 border
   1. 线条样式 solid常用
   2. border-方位名词 top  bottom  left  right
4. 外边距 margin
   1. 拉大两个盒子之间的距离
   2. margin不会撑大盒子
   3. 版心居中：设置margin的左右为auto
5. 尺寸计算
   1. 给盒子添加border/padding会撑大盒子，所以内减模式 box-sizing: border-box
6. 清除默认样式
   1. 清除默认内外边距

      *{
              margin: 0;
              padding: 0;
      }

   2. 清除列表符号

      li {
              list-style: none;
      }

7. 元素溢出

   1. overflow ： hidden

8. 外边距塌陷

   1. 子级加上外边距会产生塌陷问题，导致父级一起向下移动

   2. 解决方法：推荐第一种，即子级取消margin，父级加上padding

9. 元素垂直居中

   1. line-height设置与height一样高

10. 圆角border-radius 

    1. 大小看图要求

11. 盒子阴影box-shadow 

    1. 用到了现查

04、案例

4.1 案例一

 4.2 案例二

 

4、Flex布局

5、学成在线

6、CSS高级

7、小兔鲜儿