关键字:自适应
  • web前端入门到实战:CSS实现自适应分隔线的 8 种方法
    1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移1 ...
  • web前端入门到实战:css重点知识和bug解决方法
    1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1给图片添加display:block; 1.2给图片添加float:left; 1.3 给图片添加vertical-alig ...
  • web前端入门到实战:行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型
    行内元素水平居中如何设置?如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 1 2 3 4 ...
  • web前端入门到实战:css元素居中指南,细节决定成败!
    一、元素分类 首先要知道元素分三种:内联元素(行内元素)、块级元素、内联块级元素。 1、内联(行内)元素 可与其他元素占一行 高、行高、内外边距不可更改 宽度为内容所占宽度,不可更改 容纳文本或其他行内元素 2、块级元素 独占一行 高、行高 ...
  • web前端入门到实战:HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法
    元素浮动定义 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 如果浮动非替换元素,则要指定一个明确的宽度;否 ...
  • web前端入门到实战:html5网页特效-水墨动画
    效果 鼠标触碰按钮,出现水墨风格动画 屏幕自适应 一份html文件,一份css文件,无javascript,上手程度:很简单 笔记 :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示元素,除了优先级更 ...
  • 浅谈BFC(块格式化上下文)
    在我们的开发中常听到BFC这个词,当要让我说出BFC 是什么,却不能很好的却解释,似懂非懂。反正就是没有清晰的理解,是这两天仔细阅读了相关资料加深自己对BFC理解。 什么是BFC BFC:块格式化上下文(Block Formatting C ...
  • 弹性盒模型
    Flex的基本概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display:flex; } 行内样式也可以使用Flex布局 .box{ ...
  • 常用flex布局
    //盒模型.flex {     display: flex; }/* 纵向排列 */.flex_d_c {     flex-direction: column;}/* 横向居中对齐 */.flex_j_c {     justify- ...
  • 【前端进阶100天】Day07 图片整合技术|宽高自适应|过滤器|伪对象选择符
    今日内容: 1、图片整合的概念,使用图片整合的优势 2、最小宽度、最小高度、最大宽度、最大高度 3、过滤器的使用 4、宽高自适应的概念和使用 5、最小高度和高度自适应引发的兼容问题(针对IE浏览器) 6、浮动元素父元素高度自适应引发的高度坍 ...

暂无数据