天生就是给绝对定位当爹用 ---- 绝对定位：absolute 根据最近带有定位(非静态)的祖先元素来定位 子绝父相 脱离标准流，在页面不占有位置 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度...---- 固定定位：fixed 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动 可以直接加宽高，默认宽度是内容宽度 脱离标准流，在页面不占有位置 解决分辨率问题有两种方法… ---- 定位层级...语言扩大 /// inset 内部阴影 ---- 隐藏元素（重点）： 开发中经常会通过 display属性完成元素的显示隐藏切换 display：none；（隐藏）、 display：block；（显示...无论是否溢出，都显示滚动条overflow: scroll 根据是否溢出，自动显示或隐藏滚动条 overflow: auto white-space: nowrap;（设置文字在一行显示，不能换行）...& text 文字阴影 shadow blur spread inset ---- 只了解： 背景图片大小： contain cover 溢出隐藏： auto scroll visible 元素整体透明
如何隐藏滚动条，同时仍然可以在任何元素上滚动？ 首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。...想要完全隐藏滚动条只需设置overflow：hidden即可，但是这样一来将导致元素内容不可滚动。...时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。...，然后使用display：none隐藏它： ::-webkit-scrollbar { display: none; /* Chrome Safari */ } 注意：当你要隐藏滚动条的时候，最好将...overflow显示设置为auto或者scroll保证内容是可滚动的。
break-word 在长单词、URL地址内部进行换行 12)).处理溢出文本 clip 修剪文本...元素无法容纳的文本会溢出 unrestricted 在任意两个字符间换行。 suppress 压缩元素中的换行。浏览器只在行中没有其它有效换行点时进行换行。...从上图可以得知，如果把一个网页比作一个方框，那么border padding margin 所扮演的角色。...内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容...block 元素将显示为块级元素，此元素前后会带有换行符。 inline 元素将被显示为内联元素，元素前后没有换行符。
问题原因 能够猜想是文档（document）的滚动事件被触发了，如果能禁用滚动事件就好办了。...Step 2、释放弹窗内的滚动元素，允许其滚动：同样监听 touchmove 事件，但是阻止该滚动元素的冒泡行为（stopPropagation），使得在滚动的时候最外层元素（popup）无法接收到 touchmove...问题描述 如上录屏所示，弹窗内也含有滚动元素，在滚动元素滚到底部或顶部时，再往下或往上滚动，也会触发页面的滚动，这种现象称之为滚动链（scroll chaining）, 但是感觉滚动溢出（overscroll...值 描述 auto 默认效果，元素的滚动可以传播到祖先元素。 contain 阻止滚动链，滚动不会传播到祖先元素，但是会显示节点自身的局部效果。...所以可以这样解决问题： .content { overscroll-behavior: none; } 简洁干净高性能，不过 Safari 全系不支持，兼容性如下，有没有感觉 Safari 就是现代版的
:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。...）*/ scrollbar-3dlight-color: red; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: red; /*滚动条的高亮颜色（左阴影...*/ scrollbar-shadow-color: red; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: red; /*立体滚动条外阴影的颜色...浏览器： ::-webkit-scrollbar { display: none; /* Chrome Safari */ } 注意：当要隐藏滚动条的时候，最好将 overflow 显示设置为...示例： 我们使用上面的CSS属性以及溢出实现下面一个实例——隐藏水平滚动条，同时允许垂直滚动条： .scrollbar::-webkit-scrollbar { display: none; /*
telephone=no"/> 禁止文本选择 -webkit-user-select:none 屏蔽输入框阴影...，去掉按钮默认样式 -webkit-appearance:none border-box 想要设置一个宽度100%的元素，又要设置元素固定的 padding-left 或 padding-right，还有边框...，就会出现水平滚动条，可以用 box-sizing 来解决。...text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 字体不换行，溢出省略号...Native 的滚动效果，可以这样写 overflow-y: scroll; -webkit-overflow-scrolling: touch; css3 元素居中 3d position:
清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: 使用after伪元素进行清除浮动. .clearfix:after...:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); 浮动(float...visible : 不剪切内容也不添加滚动条。...auto :超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 鼠标样式cursor cursor...white-space normal : 默认处理方式 nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
对内容的影响（尽管浮动元素脱离了默认文档流，但仍然会影响到默认文档流中的盒子里面装的“内容”（图文），这些“内容”会给浮动元素留出占位。盒子还是那么大，但是内容给浮动元素让出了位置。内容为王。）...设计一个居中布局，一般具有固定的宽度，当浏览器窗口缩小时，页面内容会被遮挡，呈现横竖向滚动条。 2.响应式布局（responsive） 针对越来越多的移动端设备，一个web设计能够兼容多个终端。...7. overflow：设置对象处理溢出内容的控制方式，针对的是容器内部的内容，不仅仅是单纯文本。此属性适用于块状元素。内容的溢出可能是横向或纵向的，因此延展开来，可以细分为x轴和y轴。...属性 说明 overflow 包括横向和纵向的内容溢出控制 overflow-x 仅处理横向的内容溢出 overflow-y 进处理纵向的内容溢出 常用的值： 值 说明 visible...（默认值） hidden 溢出的内容被隐藏，无法查看 scroll 无论内容是否溢出，容器都被添加滚动条。（溢出才激活） auto 当内容溢出时，容器边缘（纵向）出现滚动条。
N个元素(第一个元素N值为1) :nth-child（公式） 作用 根据元素的结构关系查找多个元素 举例 偶数 2n 奇数 2n-1,2n+1 5的倍数 5n 5个以后 n+5 5个以前 -n...：“”属性，用来设置伪元素的内容，如果没有内容，则引号留空即可 不写伪元素失效 伪元素默认是行内显示模式 权重和标签选择器相同 PxCoook 像素大厨是一款切图设计工具软件，支持PSD文件的文字...内减模式：box-sizing:border-box 盒子模型-外边距 作用 拉开两个盒子之间的距离 属性名 margin 清除默认样式 示例 默认的内外边距 盒子模型-元素溢出 作用 控制溢出元素的内容的像是方式...属性名 overflow 属性值 关键字 含义 hidden 退出隐藏 scroll 溢出滚动（无论是否溢出，都显示滚动条位置） auto 溢出滚动（溢出才显示滚动条） 外边距问题-合并现象 场景...-阴影 作用 给元素设置阴影效果 属性名 box-shadow 属性值 X轴偏移量 Y轴偏移量 模糊半径 扩展半径 颜色 内外阴影 注意： X轴偏移量和Y轴偏移量必须书写 默认是外阴影，内阴影需要添加
在线演示 使用overflow-x排版横向列表 要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看 场景：横向滚动列表、元素过多但位置有限的导航栏...在线演示 使用text-overflow控制文本溢出 要点：通过text-overflow:ellipsis对溢出的文本在末端添加… 场景：单行文字溢出、多行文字溢出 兼容：text-overflow、...:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度 场景：iOS页面滚动 兼容：iOS自带-webkit-overflow-scrolling body { -webkit-overflow-scrolling...在线演示 使用transform模拟视差滚动 要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果 场景：页面滚动、视差滚动文字阴影...在线演示 倒影加载条 要点：带有渐变倒影的加载条 场景：加载提示 兼容：box-reflect、animation 代码：在线演示 ?
; color: #FFFFFF; } 阴影 CSS3中阴影分为两个 box-shadow盒子阴影 text-shadow文字阴影： div{ box-shadow: 0px 0px 10px...这里需要完成三步：强制不换行、元素内容溢出处理、文本溢出省略。...1.强制不换行：H5中推荐使用 white-space:nowrap 方法来实现不换行 2.元素内容溢出 overflow 这一步我们的目标是超出部分不显示，使用overflow属性。...内容会被修剪，浏览器会显示滚动条以查看超出内容 auto 浏览器定夺，如果内容被修剪，就会显示滚动条 3.文本溢出省略 text-overflow 我们的目的是将超出内容省略，并用省略号表示，这一步就是...css专门处理这类问题的方法。
选择器(重点)，规范页面中哪些元素能够使用声明好的样式，起始选择器也是为了匹配页面中的元素 (1). 通用选择器，匹配页面中所有的元素，效率低 语法:*{样式声明;} (2)....溢出，当使用尺寸属性限制元素大小时，如果内容所需的空间大于元素本身空间，则会产生溢出的效果 (1). overflow:溢出处理 overflow-x:横向溢出处理 overflow-y:纵向溢出处理...属性 A. visible 默认值，溢出可见 B. hidden 溢出隐藏 C. scroll 滚动，默认显示滚动条，内容溢出时，滚动条可用 D. auto 自动，只有在溢出的方向才会显示滚动条 8....为父元素增加溢出处理属性 属性:overflow 取值:hidden 或 auto 弊端:要溢出显示的内容，也一同被隐藏 (4)....多个元素能够在一行内显示 ②.
方框模型和定位 HTML中的每个元素被视为一个方框，在考虑元素的真正高度和宽度时，就必须把方框模型的所有元素都考虑在内，通过下图对方框模型有个形象的了解。...内容在页面上的精准位置（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。...通常可以通过float，clear,overflow在控制文本流，overflow用于当元素太小时，控制文本的溢出，当元素的长宽设置过小时，可以通过设置visible自动扩大元素，hidden允许溢出的文本隐藏...，scroll可以给元素增加滚动条。...CSS列表处理：在列表中，可以通过list-style-position来设置指示符的位置，inside表示指示符位于标签中，outside（默认值）则相反，而将list-style设置为none
: ellipsis; 这一属性依赖于overflow: hidden存在，只有设置了overflow:hidden它才是能够生效的，你可以把它看作overflow对于文本溢出隐藏的一种‘特殊样式’ 关于...得到demo: 隐藏成功了，可你仍然看不到你想看到的那三个点 妥妥地失败了，嗯，没错,所以对于多行文本溢出的省略我们需要另辟蹊径了 多行文本溢出的省略（...）方案一 ---简单方便的解决方案 我们可以借助...2因为这是webkit的CSS属性扩展，所以兼容浏览器范围是PC端的webkit内核的浏览器：chrome/safari/QQ浏览器/360/猎豹等以及绝大多数的移动端浏览器 多行文本溢出的省略（......'; break; } } 首先我们需要弄清楚offsetHeight和scrollHeight所表示的高度： 1溢出显示滚动条时： 2没有溢出时：...(0, i);表示在for循环中取出长度递增的文段， '这'--> '这是' --> '这是一'，当n 滚动条内的内容的高度，代表着刚好达到溢出的界限
vertical-align: super; /* 把元素的顶端与行中最高元素的顶端对齐 */ vertical-align: top; /* 把元素的顶端与父元素字体的顶端对齐...*/ vertical-align: text-top; /* 把此元素放置在父元素的中部 */ vertical-align: middle; /* 使元素及其后代元素的底部与整行的底部对齐...*/ vertical-align: bottom; /* 把元素的底端与父元素字体的底端对齐 */ vertical-align: text-bottom; } 动画相关....my-content { /* 内容溢出，出现x、y轴滚动条 */ overflow: auto; /* 内容溢出，隐藏溢出元素 */ overflow: hidden...; /* 内容溢出，出现x轴滚动条 */ overflow-x: auto; /* 内容溢出，出现y轴滚动条 */ overflow-y: auto; }
：text-overflow； 文本下划线：text-decoration； 文本阴影：text-shadow； 颜色：color； 边框属性 边框：border 上下左右边框：border-top/right.../bottom/left； 圆角边框：border-radius； 阴影：box-shadow； 尺寸属性 固定宽度：width； 最小宽度：min-width； 最大宽度：max-width； 固定高度...：height； 最小高度：min-height； 最大高度：max-height； 溢出方式：overflow； 横向溢出：overflow-x； 纵向溢出：overflow-y； 背景属性 背景：background...：:visited（a:visited）； 正在活动链接：:active（a:active）; 触发的状态：;hover(a:hover)； 输入框焦点：:focus（input:focus）； CSS3...N哥子元素： :nth-child; 该类型第N个子元素： :nth-of-type; 最后子元素： :last-child; 该类型最后子元素： :last-of-type； 定位属性 定位方式
下面列出了一些非常实用的CSS3属性和使用技巧，希望能够为你的开发、设计工作带来一些帮助。 1. 圆角效果 如今的Web设计在不断跟进最新的开发技术，纷纷采用HTML5来开发多样性的Web应用。...阴影效果 通过CSS3的box-shadow属性可以非常方便地实现阴影效果。所有主流的浏览器都支持这个属性，其中Safari浏览器支持加前缀的-webkit-box-shadow属性。...clearfix属性 如果设计师认为Overflow: hidden不能很好的处理浮动，那么clearfix提供了更好的处理浮动的解决方案。...Margin: 0 auto Margin: 0 auto属性是CSS的基础属性。虽然CSS语法并没有定义一个块元素居中的语句，但设计师仍然可以使用auto margin选项来实现这个功能。...Overflow: hidden Overflow：Hidden这个CSS属性除了隐藏溢出功能外，还有清除浮动的作用。
#999; /* 浅灰文字颜色 */ padding: 30px 5px 2px 5px; /* 内边距（上、右/左、下） */ overflow: auto; /* 超出尺寸时添加滚动条...position: absolute; left: 15px; /* 左侧位置 */ top: 10px; /* 顶部位置 */ overflow: visible; /* 允许内容溢出...box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; /* 两个阴影效果 */ -webkit-box-shadow: 20px 0 #fdbc40, 40px...0 #35cd4b; /* Safari浏览器特定的阴影效果 */ background-color: #fc625d; /* 红色背景色 */ white-space: nowrap...line-height: 12px; /* 行高 */ font-weight: 700; /* 粗体字重 */ } :not(pre) > code { /* 非元素内的
Q12、CSS盒模型 所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。 CSS 框模型实质上是一个包围每个 HTML 元素的框。...vmax vw和vh中较大的那个。 % 相对父元素 *提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置0。 Q24. overflow属性在CSS中被用于什么？ overflow 属性规定当内容溢出元素框时发生的事情。...这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。...水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
