CSS

  • 关于CSS浮动与取消浮动的问题

    浮动的定义 设置元素脱离正常的文档流,使元素向左或向右靠近。父元素的边缘,或者其他设置了浮动的元素的边缘 浮动解决的问题 1.解决文字包围图片的问题 2.解决间隔问题 3.可以向左,或者向右排版 将文字排版到图片左端 不采用浮动时: 采用浮动时: 采用的属性 采用的属性:float,属性值:right/left 浮动的高度塌陷问题及解决方法 高度塌陷问题 当父元素设置的高度与子元素设置的高度不同时,则会出现高度塌陷问题,插入一些文字时无法插入在正确的位置 高度塌陷导致标题无法出现在这个block的下方: 解决过后: 解决方法 伪元素清除浮动: 在父元素后设置伪元素清除浮动: 1.根据父标签设置…

    2021年7月7日
    0 48 0
  • CSS3实现列表无限滚动/轮播效果

    效果预览 思路 将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项 问题点 1.用什么方式实现无限轮播 这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理? 在列表的最后添加列表开头的重复项即可(如图中的10后面出现的1,2,3,4,5既为重复项)。 重复项添加的数目要根据当前列表的高度和列表项的高度一起确定,例如: 列表高度150px,列表项高度30px,则需要在当前列表尾部添加150 / 30 = 5项重复项才可以去除留白。 2.如何让用户无感知的切换回第一项 添加好重复项之后控制好切换时机,当列表滚动到最后一项的末尾(重复项第一项的开头)时,立即进行切换。例如: 列表项共10…

    2021年7月6日
    0 29 0
  • 详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

    一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。 /*css样式*/ <style type=”text/css”> div{ width: 150px; height: 60px; background: skyblue; overflow: hidden; /*溢出隐藏*/ } </style> /*html*/ <div style=””> 今天天气很好!<br>今天天气很好!<br> 今天天气很好!&…

    2021年7月5日
    0 53 0
  • CSS3实现的侧滑菜单

    实现效果: 实现代码: <!DOCTYPE html><html class=”menu”> <html> <head> <meta charset=”utf-8″/> <meta http-equiv=”X-UA-Compatible” content==”IE=edge”/> <meta name=”google” value=”notranslate”/> <title>Side Menu</title> <link rel=”stylesheet” type=”text/c…

    2021年6月18日
    0 26 0
  • CSS 新特性 contain控制页面的重绘与重排问题

    在介绍新的 CSS 属性 contain 之前,需要读者已经知道什么是页面的重绘与重排。 发现之前已经描述过很多次了,可以看看这个提高 CSS 动画性能的正确姿势[1]。 OK,下面进入本文正题, contain 为何? contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。 The contain property allows an author to indicate that an element and its contents are, as much…

    2021年6月18日
    0 34 0
  • 为什么你写的height:100%不起作用

    为什么你写的height:100%不起作用? 这个知识不算冷门的,但是用的时候可能还是会有些懵逼,不能生效时搜一搜就能找到答案了,但是你真的懂了吗?为什么想要设置一个全屏元素的时候,高度不受%的控制? 1.百分比宽高的设定 按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的: https://www.w3school.com.cn/cssref/pr_dim_width.asp https://www.w3school.com.cn/cssref/pr_dim_height.asp 2.width:100%; 我们写下这样一段代码,随意设置一个背景色便于观察元…

    2021年6月17日
    0 28 0
  • 面试必问:圣杯布局和双飞翼布局的区别

    前言 今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别,这两个三行布局一直是一些大厂前端面试的高频考点,带你走进大厂面试题,活不多说,冲冲冲~ 布局效果 这两个种三行布局效果是一样的,实现的效果如上图示所示,其特点为: header和footer的高度为整个浏览器的宽度 中间是个三行布局,left和right的宽度是固定的。 而middle的内容的宽度是自适应占满中间位置的,高度为三栏中的最大高度其实圣杯布局和双飞翼布局在前的处理是一样的,只不过是在中间处理的时候有些小差异而已啦。 前期处理 为了避免出现问题我们先给body设置一个min-width:600px; 再将header和fo…

    2021年6月17日
    0 29 0
  • css背景和边框标签实例详解

    一、css背景标签 1,设置背景颜色 back-ground-color 属性指定元素的背景色。 小实例如下图所示: 运行结果如下: 可以通过选择器给不同的标签设置不同的颜色,在这里h1,div,和p标签将拥有不同的背景色: 实例: 运行结果如下图所示: 2.设置背景图像 background-image属性指定用作元素背景的图像。默认情况下,图像会重复,以覆盖整个元素。用url来引入外部图片。 具体实例如下所示: 运行结果如下图: 注意事项:使用背景图片时,要注意背景图片的样式,不要有干扰到文本的图像,以免影响效果。 css背景重复的问题 默认情况下,background-repeat属性在…

    2021年6月16日
    0 26 0
  • Css预编语言及区别详解

    一、是什么 Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码 Css 预处理器便是针对上述问题的解决方案 预处理语言 扩充了 Css 语言,增加了诸如变量、混合(mixin)、函数等功能,让 Css 更易维护、方便 本质上,预处理是 Css 的超集 包含一套自定义的语法及一个解析器,根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 Css 文件 二、有哪些 Css 预编…

    2021年6月16日
    0 33 0
  • 用CSS3画一个爱心

    实现效果 需求/功能: 怎么用CSS+HTMl绘画出一个爱心. 分析: 爱心可以通过一个正方形+两个圆形组合成. 先画一个正方形+圆形, 摆放位置如下: 再添加上一个圆形. 最后再将整个图形顺时针旋转45度即可. 初步实现: 先画一个正方形: <body> <div id=”heart”></div> </body> #heart{ height: 300px; width: 300px; border: 2px solid black; } 给这个正方形的左边加行一个圆形.这里使用伪类:before来实现 #heart{ height: 200…

    2021年6月15日
    0 35 0
  • CSS完成视差滚动效果

    一、是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层、内容层、悬浮层 当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果 二、实现方式 使用css形式实现视觉差滚动效果的方式有: background-attachment transform:translate3D background-attachment 作用是设置背景图像是否固定或者随着页面的其余部分滚动 值分别有如下: scroll:默认值,背景图像会随着页面其余部分的滚动而移动 fixed:当页面的其余部分滚动…

    2021年6月15日
    0 25 0
  • css position fixed 左右双定位的实现代码

    CSS Position(定位) position 属性指定了元素的定位类型。 position 属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> <style> .box{ width:…

    2021年6月14日
    0 37 0
  • background-position百分比原理详解

    今天帮别人调代码时,看到一个样式: background-position: 50% 0; background-size: 100% auto; 对background-size:100% auto,意思是背景图片宽度为元素宽度*100%,高度等比缩放。详情可见css3 background。 对background-position很自然的以为百分比是根据父元素宽度计算的,但background-position真的不是,它有一套自己的原理。下面详细介绍。 一、等价写法 在看各类教程时有以下等价写法: top left, left top 等价于 0% 0%. top, top cente…

    2021年6月14日
    0 28 0
  • CSS的class与id常用的命名规则

    网页公共命名: #wrapper – – 页面外围控制整体布局宽度 #container或#content – – 容器,用于最外层 #layout – – 布局 #head,#header – – 页头部分 #foot,#footer – – 页脚部分 #nav – – 主导航 #subnav – – 二级导航 #menu – – 菜单 #submenu – – 子菜单 #sid…

    2021年6月13日
    0 27 0
  • CSS3实现的3D隧道效果

    实现的效果 实现代码 html <div class=”scene”> <div class=”wrapper”> <ul class=”tunnel”> <li class=”ring”></li> <li class=”ring”></li> <li class=”ring”></li> <li class=”ring”></li> <li class=”ring”></li> <li class=”ring”></l…

    2021年6月11日
    0 30 0