溢出(overflow) - 值解析 - visible: 溢出的值会在容器之外显示(默认) - hidden: 溢出的值会被隐藏 - scroll: 溢出的内容会被提供滚动条,方便用户显示 - auto: 有溢出就提供滚动条,没有就不提供滚动条 - inherit: 继承父容器的overflow属性 - overflow-
div 组件中的中心元素 在 div 容器中将元素居中有时会很棘手。当你制作网页的前端时，知道究竟是什么而不是每次都尝试它是非常重要的。 如何使用 CSS 使 div 居中？ 现在，将元素居中不仅仅意味着 div 组件的居中。通过居中，我将专注于 水平居中 垂直居中 水平和垂直居中（组件的中心）
目录CSS三大特性1、层叠性2、继承性3、优先级常用单位字体背景列表属性盒子模型display的inline、block、inline-block的区别文档流定位定位的left和top、right和bottom和margin-left.....的区别浮动可见性动画transition和animation区别作业 CSS三大特性 1、层叠性 一个标签可以
https://www.cnblogs.com/Julia-Yuan/p/6648816.html 方案一： div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】， 兼容性：,IE7及之前版本不支持 div{ width: 200px; height: 200px; background: green; p
创建页面布局的时候，会遇到只是用纯粹的css控制div的垂直和水平居中。有很多种方法可以实现这种效果，这里列出我喜欢的。 首先是最基本的， css控制div水平居中创建一个div的水平居中很简单，只需要设定宽度和左右margin值自动。这种方法可以用在block级元素上（div、图片、h1等）。如果在in
响应式布局 1、rem基础 rem单位：是一个相对单位，类似于em，em相对于父元素的字体大小来说的； rem的基准是相对于 Html 元素的字体大小 优点：可以通过修改html中的大小来控制整个页面字体的大小 2、媒体查询 规则 媒体查询一般按照从大到小或从小到大的顺序来 @media screen and (max-wi
字体属性 （1）颜色设置： 通过十六进制：color:#00000ff; 通过RGB：color:rgb(0,0,255); color:rgba(0,0,255,1); 其中a表示透明度，a取值0~1，1表示完全不透明；0表示完全透明。 （2）大小设置：font-size,chrome可接受最小的为12px。 （3）加粗设置，font-weight。font-weight:lighter;最常用的是设置100-40
当鼠标穿过展示动画效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框阴影</title> <style type="text/css"> .shadow{ margin: 50px auto; position: relative; width: 200px; heigh
1 行内元素水平垂直居中 方式一： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行内元素水平垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red;
1 相对定位 position: relative 相对定位：相对于自己原来的位置定位 现象和使用： 1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。 2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right 用途： 1.微调元素位置 2.做绝对定位的参考（父相子绝）绝对
浮动的背景 开始为了web工程师，在网页上实现一些简单的布局。如文字环绕图片现象 浮动的属性 none：表示不浮动，默认值 left：左浮动 right：右浮动 inherit：继承父元素的浮动属性 1 文件环绕效果 文字环绕图片，可设置图片的浮动。 <!DOCTYPE html> <html> <head> <meta charset="
在学习CSS的时候，遇到了一个问题就是，没有看懂Grid布局，所以，这篇文章是用来详细描述Grid布局的。 一、Grid布局的定义 Grid布局将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 二、示例 首先我先写了九个div，body代码如下： <div id="main">
flex简写：flex-grow（项目放大），flex-shrink （项目缩小），flex-basis（项目本身） flex: 1; 全写：flex: 1 1 0%;内容自动放大或缩小占满剩余空间。 1、子元素都设置flex: 1; 子元素盒子会平分并占满父盒子； 2、一个元素宽度（或高度）固定，另一个元素宽度（或高度）自适应。 .parent { display: flex;}.son
简单实现滚动时固定导航栏 实例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
第一种：定位+cala（固定宽高） html部分： <div class="box1"> <div class="inner"></div> </div> css部分： .box1{ width: 200px; height: 200px; border: 1px solid black; position: relative; } .box1 .inner { width
问题：在使用flex布局，justify-content：space-between/space-around 最后一行的子元素，经常不是我们想要的。我们希望最后一行是左对齐。 解决办法： 办法1：使用grid布局 .wrap { width: 100%; border: 1px solid royalblue; display: grid; grid-gap:
今天，要介绍一种基于 CSS mask-composite 的高级技巧。 通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。 通过单张 PNG/SVG 得到它的反向切图 事情的经过是这样的，某天，我们拿到了这样一张 PNG/SVG 图片： 就这张图片而言，它是一张 PNG 图，灰色部分
《打火机与公主裙》-跳动的心脏 女主真是一个大神仙，看着C语言的书（水仙花数……），学习怎么用前端语言做出特效，这是内置了一个代码转换器吗？ 注：主要涉及绘制心脏、虚线格背景等问题 音乐嵌入一直都是一个难以解决的问题，想要添加自动播放、循环且隐藏不可见的背景音 如果可以加一些心跳
html 布局结构如下 <div class="outerBox"> <div class="innerBox"></div> </div> 第一种 使用flex .outerBox { height: 400px; background-color: rgb(12, 243, 232); display: flex; justify-content: center;
height:200px; 文字在上面 height:200px; line-height：200px; 此时单行文字在div里居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
原文链接： https://www.cnblogs.com/yalong/p/16385198.html 一. Js实现 代码如下 <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #rect { width: 200px; height: 200px; background: gray;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
常见数值单位: ①px (pixel) 像素px是相对于显示器分辨率 ②em: 相当于当前对象内的font-size，如未设置，则相当于浏览器的默认字体尺寸 em的值并不是固定的，它会继承父级元素的字体大小。 ③rem: 相当于根元素(html)的字体大小的单位，根据htm l设定的font-size来换算 ④vh(viewpor
