• css知识点总结


    1.css是什么
    css的英文名称是 C ascading  S tyle  S heets,意思是层叠样式表。它定义了html元素如何显示,也就是html文件的样式。
    2.如何使用css
    我们可以通过一下四种方式在html文件当中使用css。
    (1)直接通过标签的style属性来添加样式,也就是我们平时经常说的行内样式。
    (2)在头部通过内部样式表添加样式。
    (3)通过标签引入样式。
    (4)通过@import导入样式。
    2.常用的css选择器有哪些
    常用的css选择器有以下几种
    (1)id选择器
    (2)类选择器
    (3)标签选择器
    (4)通配符选择器
    (5)相邻选择器
    (6)子选择器
    (7)后代选择器
    (8)属性选择器
    (9)伪类选择器
    3.css样式优先级
    (1)最近的祖先样式比其他祖先样式优先级高,也就是说同样的css样式代码,后面的也就是更靠近的样式代码,会覆盖掉前面的代码。
    (2)"直接样式"比"祖先样式"优先级高,也就是说继承过来的样式是最低级的,任何其他的样式都能覆盖掉它。
    (3)内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
    (4)!important 拥有最高优先级,我个人关于这个的理解是加上!important之后,相当于这一条的层级提升到了内联样式这一级别。
    4.css的盒子模型
    css有标准盒子模型和IE盒子模型两种,其中的IE盒模型也就是我们平时常说的怪异盒模型。
    (1)两种盒模型的概念
    标准盒子模型:内容content + 填充padding + 边框border + 边界margin—— 宽高指的是 content 的宽高
    IE盒子模型:内容(content+padding+border)+ 边界margin—— 宽高指的是 content+padding+border 部分的宽高
    (2)设置方法
    标准盒模型:box-sizing:content-box
    IE盒模型:box-sizing:border-box
    5.css外边距margin重叠现象
    在标准文档流中,两个紧挨着的盒子的margin并不会叠加,而是会重叠。两个盒子的间距取决于margin更大的盒子的margin。
    6.css高度塌陷问题
    在标准文档流中,父元素的高度是由子元素撑起来的,有时当我们给子元素设置浮动的时候,就会产生高度塌陷的问题。
    高度塌陷指的是当子元素无法撑起父元素的高度的时候,父元素高度塌陷,也就是高度变为0。此时父元素底部的那些盒子就会向上移动,子元素与这些盒子就会重叠,导致页面布局混乱。
    解决方法:(1)定死父元素的高度,这样的话即使子元素设置为浮动,父元素也会有着固定的高度。但是这样做的话父元素就将无法自适应子元素的高度。
    (2)开启块级格式化上下文,也就是BFC。
    (3)设置一个高度与子元素相等的盒子,在子元素浮动后,无法撑起父元素高度的时候代替子元素撑起来。
    7.BFC
    BFC是块级格式化上下文,开启了BFC的元素,它的子元素无法影响到外界,我们可以用它解决margin重叠,以及清除浮动等。
    (1)如何生成BFC
    body 根元素
    浮动元素:float 除 none 以外的值
    绝对定位元素:position (absolute、fixed)
    display : inline-block、table-cells、flex
    overflow : hidden、auto、scroll
    满足以上任意一条即可生成BFC
    (2)BFC的原理
        BFC 内部的子元素,在垂直方向,边距会发生重叠。
        BFC在页面中是独立的容器,外面的元素不会影响里面的元素,反之亦然。
        BFC区域不与旁边的float box区域重叠。就是说可以用来清除浮动带来的影响。
        计算BFC的高度时,浮动的子元素也参与计算。
    8. display:none 与 visibility:hidden 的区别
    display:none,该元素不占据任何空间,在文档渲染时,该元素如同不存在。 visibility:hidden,该元素空间依旧存在.
    display:none,会触发回流,进行渲染。 visibility:hidden,只会触发重绘,因为没有发现位置变化,不进行渲染。
    display:none,display不是继承属性,元素及其子元素都会消失。 visibility:hidden,visibility是继承属性,若子元素使用 visibility:visible,则不继承,这个子孙元素又会显现出来。
    9.Position
    static:默认值。没有定位,元素出现在正常的文档流中
    relative:生成相对定位的元素,相对于其正常位置进行定位,不脱离文档流
    absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位
    fixed:生成固定定位的元素,相对于浏览器窗口进行定位。
    inherit:规定应该从父元素继承 position 属性的值
    sticky:粘性定位,它主要用在对 scroll 事件的监听上
    10.如何让div水平居中
    (1)宽度固定的时候,需要谁居中,就给谁设置margin:0 auto;
    (2)宽度不定,默认子元素宽度与父元素宽度一样,给子元素设置display:inline-block;或display:inline,将其转换成行内块级元素/行内元素,给父元素设置text-align:center
    (3) 子元素设置绝对定位,父元素设置相对定位,left:50%,margin-left:-子元素的宽度的一半(宽度定),或者transform:translateX(-50%)(宽度不定)
    (4) 父元素设置display:flex;justify-content:center;
    11.如何让div垂直居中
    高度和宽度固定
    (1)子元素设置绝对定位,父元素设置相对定位,子元素设置left:0;right:0;top:0;bottom:0;margin:auto;
    (2)子元素设置绝对定位,父元素设置相对定位,子元素设置top:50%;left:50%(左上角垂直居中),margin-top:-子元素高的一半,margin-left:-子元素宽的一半
    高度和宽度不定
    (1)子元素设置绝对定位,父元素设置相对定位,子元素设置top:50%;left:50%(左上角垂直居中),transform:translate(-50%,-50%)
    (2)父元素定义display:flex;justify-content:center;align-items:center;
  • 相关阅读:
    pytorch深度学习实战lesson7
    LeetCode 第415场周赛个人题解
    聚观早报 | 苹果iOS 16正式版发布;任天堂直面会即将举办
    pod(八):pod的调度——将 Pod 指派给节点
    ZEMAX | 室内照明案例分享2 —— 室内场景模拟
    并查集(畅通工程)
    基于python的图像识别
    typeScript--[函数定义]
    统一网关Gateway
    网络原理之封装和分用,网络编程套接字
  • 原文地址:https://blog.csdn.net/mhc20201554114/article/details/126591902