首页 > 其他分享 >CSS知识

CSS知识

时间:2023-01-25 21:34:48浏览次数:38  
标签:定位 元素 浏览器 父级 清除 知识 CSS

CSS清除浮动

           

          1.清除浮动的方法 - 额外标签法

           

           2.清除浮动的方法 - 单伪元素清除法

           

         3.清除浮动的方法 - 双伪元素清除法

           

        4.清除浮动的方法 - 给父元素设置overflow:hidden

           

CSS定位

         网页常见布局方式

         

        1.使用定位的步骤

             

                   

             

                 

        2.相对定位

           

            1.占有原来的位置

            2.任然具有标签原有显示模式的特点

            3.改变位置参照自己原来的位置

            如果left和right都有,以left为准;top和bottom都有,以top为准

       3.绝对定位

           先找已经定位的父级,如果有这样的父级就以这个父级为参照物进行定位

           有父级但这个父级没有定位,以浏览器窗口为参照物进行定位

           

           1.脱标,不占位

           2.改变标签显示模式的特点:具有行内块的特点(在一行共存,宽高生效)

           绝对定位查找父级的方式:就近找定位的父级,如果逐层查找不到这样的父级,

                                                   就以浏览器窗口为参照进行定位

           

           

       4.固定定位

           

           1.脱标,不占位置

           2.改变位置参考浏览器窗口

           3.具备行内块特点

CSS元素层级问题

         

           

CSS装饰

         1.基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

           

            浏览器把行内和行内块标签当做文字处理,默认基线对齐

        2.垂直对齐方式

           

       3.光标类型 

           

      4.边框圆角

           

           

       5.overflow溢出部分显示效果

           

       6.元素本身隐藏

           

          visibility -  占位隐藏

          display -  不占位隐藏

      7.元素整体透明度

         

CSS精灵图

           

         精灵图使用步骤

         

         

标签:定位,元素,浏览器,父级,清除,知识,CSS
From: https://www.cnblogs.com/liu88/p/17059546.html

相关文章

  • CSS尺寸设置的单位
    解题思路得分点px、rem、em、vw、vh标准回答px:pixel像素的缩写,绝对长度单位,它的大小取决于屏幕的分辨率,是开发网页中常常使用的单位。em:相对长度单位,在......
  • 黑马程序员前端-CSS综合案例:学成在线模块添加
     前端学习笔记教程不定期更新中,传送门:​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​​​黑马程序员前端-CSS入门总结​​​​黑马程序员前端-CSS之emmet语法​......
  • 黑马程序员前端-CSS属性书写顺序(重点)
     前端学习笔记教程不定期更新中,传送门:​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​​​黑马程序员前端-CSS入门总结​​​​黑马程序员前端-CSS之emmet语法​......
  • LESSON TWO : 前言和基础知识
    前言为何要学习代码?为何要学习这个代码?怎么学习这个代码?可不可以学习这个代码?能做什么,有什么目标?​ 基本的手机应用、简单的PC游戏应用、大数据平台;目标是以爱好为基准......
  • 不能直接在 CSS 变量中写计算,针对于 Scss 项目
    不论是在Scss还是在CSS中,给CSS变量(自定义变量)直接写计算,都不会生效。例如:*{--text-size:calc(100px*1);}打开浏览器查看计算的样式表中,并没有计算得到10......
  • CSS font-display 控制字体加载和替换
    在编写网站的时候,或多或少都会用到一些网络上的字体,CSS3中虽然加入了对WebFonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验......
  • 在React中,怎么用tailwind css(就叫顺丰吧 :D 。。。)封装Button组件
    我的目的想用tailwindcss来快速封装Button组件,而不是从更大型的UI库导入一个Button组件(那样就太大材小用)。几个工具从这抄的样式在学习怎么形成规范化的组件额,仅......
  • css
    一.基础认知1.1.css介绍css:cascadingstylesheets:层叠样式表用于修饰HTML标签命令1.2css的引入方式内嵌式:css写在style标签中,style标签写在head标签中,写在title标签......
  • SVG Animation & CSS stroke-dasharray & stroke-dashoffset All In One
    SVGAnimation&CSSstroke-dasharray&stroke-dashoffsetAllInOnehttps://maxwellito.github.io/vivus/https://github.com/maxwellito/vivus#vivusjshttps://de......
  • 「HTML+CSS」--自定义加载动画【029】
    前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算......