1.css基础要点

css基础要点

拓展1：HTML嵌套规范注意点

• 1.块级元素一般作为大容易，可以嵌套：文本、块级元素、行内元素、行内块级元素...

    但是：p标签中不要嵌套div、p、h等块级元素
  

• 2.a标签内部可以嵌套任意元素，但是：a标签不能嵌套a标签

css特性

• 1.继承性：子元素有默认继承父元素样式的特点（子承父业）

  • 可以继承的常见属性（<span style="color: red;">文字属性都可以继承</span>）

  • 控制文字属性都能继承,不是控制文字的都不能继承;

  • 可以通过调试工具判断样式是否可以继承(如： inherited form div)

  • 注意：如果元素有浏览器默认样式，此时继承性依然存在，但是不生效

    • a标签的color会继承失效，h系列标签的font-size 或继承失效；

• 2.层叠性:

  • 1.给一个标签设置不同的样式，此时样式或层叠叠加，会共同作用在标签上
  • 2.给一个标签设置相同的样式，此时样式层叠覆盖，最终写在最后的样式会生效
    • 当样式冲突，只有当选择器优先级相同时，才能通过层叠性判断结果

• 3.优先级：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级的低的选择器样式

  • 继承 < 通配符选择器 < 标签选择器 < 类选择 < id选择器 < 行内样式 < !important
  • 注意点：
    1. !important写在属性值的后面，分号的前面！
    2. !important不能提升继承的优先级，只要是继承，优先级最低
    3. 实际开发不建议使用 !important

盒子模型

• 外边距折叠现象
  1.合并现象：最终取的值为margin的最大值
  2.塌陷现象：导致父元素一起往下移动

结构伪类选择器

作用和优势：

1.作用：根据元素在HTML中结构关系查找元素

2.优势：减少对HTML中类的依赖，有利于保持代码整洁

3.场景：常用于查找某腹肌选择器的子元素

选择器	说明
E:first-child {}	匹配父元素中第一个子元素，并且是E元素
E:last-child {}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n) {}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n) {}	匹配父元素中倒数第n个子元素，并且是E元素

n 的注意点:

1.n 为：0,1,2,3,4,5,6...

2.通过n可以组成常见公式

功能	说明
偶数	2n,even
奇数	2n+1,2n-1,odd
找到前5个	-n+5
找到从第5个往后	n+5

伪元素 通过css创建标签，装饰性的不重要的小图

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

• 1.元素：HTML设置标签
• 2.伪元素：由css模拟出的标签效果

种类

::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素
单元格	单元格

注意点：

1.必须设置content属性才能生效

2.伪元素默认是行内元素

标准流（又称文档流）

是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1.块级元素：从上往下，垂直布局，独占一行

2.行内元素和行内块元素：从左往右，水平布局，空间不够自动折行

浮动

• 让块级标签完美的在一行排，浮动最开始是做 图文环绕，现在用在 网页布局上

  • 浮动元素脱离标准流，在标准中不占位置

  • 浮动比标准流高半个级别，可以覆盖标准流中的元素

  • 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

  • 浮动元素一行可以显示多个，可以设置宽高

  • 浮动的元素不能通过text-align-center 或者margin：0 auto居中

• 清除浮动

  清除浮动带来的影响

  • 影响：如果子元素浮动了，此时子元素不能撑开标准流块级元素

  • 原因子元素脱标不占位置，目的需要父元素有高度，从而不影响其他网页元素布局

• 清除浮动的方法

  • 给块级父元素设置高度

  • 1.在父元素内容的最后添加一个块级元素->2.给添加的块级元素设置 clear: both

  • 单伪元素清除法，用伪元素替代额外标签

  • 双伪元素清除法

  • 给父元素设置 overflow:hidden

    /*单伪元素*/
    .clearfix::after {
                clear: both;
                content: '';
                display: block;
                /* 补充代码，在网页中看不到伪元素 */
                visibility: hidden;
                height: 0;
            }
            /*双伪元素*/
    .clearfix::before {
                display: table;
                content: '';
            }
            .clearfix::after {
                clear: both;
            }
    

定位

网页常见布局方式

1.标准流

• 1.块级元素独占一行~>垂直布局
• 2.行内元素/行内块元素~>水平布局

2.浮动

• 1.可以让原本垂直布局的块级元素变成水平布局

3.定位

• 1.可以让元素自由的摆放在网页的任意位置
• 2.一般用于盒子之间叠层情况

定位一般有三种

1.静态定位

• postition:static; 静态定位是默认值，就是之前认识的标准流，不能通过方位属性移动；

2.相对定位

• position: relative; 介绍：自恋型定位，相对之前的位置进行移动,
  • 占有原来的位置，然仍具体标签原有的显示模式特点
  • 需要配合方位属性实现移动
  • 相对于自己原来位置进行移动
  • 在页面中占位置~>没有脱标
• 应用场景
  • 1.配合绝对定位组CP（子绝父相）
  • 2.用于小范围的移动

3.绝对定位

• position: absolute;介绍：拼爹定位，相对于非静态定位的父元素进行定位移动
  • 需要配合方位属性实现移动
  • 在页面不占位置~>已经脱标
• 应用场景
  • 1.配合绝对定位组CP（子绝父相）

4.子绝父相

5.固定定位

• position: fixed;介绍：死心眼定位，相对于浏览器进行定位

• 特点

  • 1.需要配合方位属性实现移动
  • 2.相对于浏览器可视区域进行移动
  • 在页面不占位置~>已经脱标

• 应用场景

  • 1.让盒子固定在屏幕中的某个位置

6.元素的层级关系

• 不同布局方式元素层级关系
  • 标准流 < 浮动 < 定位
• 不同定位之间的层级关系
  • 相对、绝对、固定默认层级相同
  • 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
• z-index:取值越大，显示越靠上，必须配合定位才生效.

装饰

• 1.垂直对齐： vertical-align

• 2.溢出部分显示效果：overflow， 塌陷、浮动影响有用到

• 3.边框圆角: border-radius

• 4.鼠标选中效果: cursor

• 5.元素本身隐藏

  • 场景：让元素本身在屏幕中不可见，如鼠标:hover 之后元素隐藏

  • 常见属性：

    • 1.visibility:hidden; // 占位的隐藏效果，工作中不常用
    • 2.display:none；// 不占位隐藏，工作中常用

• 6.元素整体透明度 opacity

  • 属性值0~1之间的数字
  • opacity 会让元素整体透明，包过里面的内容，如：文字，图片等

• 7.边框合并

  • 场景：让相邻表格边框进行合并，得到细线边框效果
  • 代码：border-collapse: collapse;

• 8.用css画三角形

  • 场景：在网页中展示出小三角形时，除了可以使用图片外还可以用代码完成，实现原理：

    利用盒子边框线，设置一个盒子，设置四周不同颜色的边框

• 9.能够完成 伪类选择器选择元素不同状态

  • 1.链接伪类选择器
  • 2.焦点伪类选择器，只在表单中才有
  • 3.属性选择器
    • 通过元素上的HTML属性来选择元素，常用于选择 input标签
    • 选择器语法

选择器	功能
E[attr]	选择具有 attr 属性的E 元素
E[attr="val"]	选择具有 attr 属性并且属性值等于val 的 E元素

精灵图使用

• 精灵图使用步骤

  • 1.创建一个盒子，设置盒子的尺寸和小图尺寸相同

  • 2.将精灵图设置为盒子的背景图片

  • 3.修改背景图位置,设置background-position:x y;

盒子

• 盒子缩放 background-size： 具体像素，百分比，cover，contain；

• 背景图平铺样式：background-repeat

• 盒子背景配置： background-position

• 盒子背景连写 background：color image repeat position/size；

• 过渡 transition,让元素的样式慢慢变化，常配合hover使用，增强网页交互体验

  参数	取值
  过渡的属性	all:所有能过渡的属性都过渡，具体属性名称如 width：只有width有过渡
  过渡的时长	数字+s(秒)

  过渡需要：默认状态和hover状态样式不同，才能用过渡效果

  1.transition 属性给需要过渡的元素本身加

  2.transition 属性设置在不同状态中，效果不同的

  ① 给默认的状态设置，鼠标移入移出都有过渡效果

  ②给hover状态设置，鼠标移入有过渡效果，移出没有

• 盒子阴影box-shadow

  参数	作用
  h-shadow	必须，水平偏移量，允许负值
  v-shadow	必须，垂直偏移量，允许负值
  blur	可选，模糊度
  spread	可选，阴影扩大
  color	可选，阴影颜色
  inset	可选，将阴影改为内部阴影