css距离顶部高度_css大法(二)
本文写一些关于css的 小的知识点:
- 盒模型:box-sizing定义盒模型
- content-box: width == 内容区宽度
- border-box(IE): width == 内容区宽度 + padding 宽度 + border 宽度
- 优先级:
- 三个法则:
- 选择器越具体,优先级越高。 #xxx 大于 .yyy
- 同样优先级,写在后面的覆盖前面的。
- color: red !important; 优先级最高。
- !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
- css选择器的解析原则:选择器定位DOM元素是从右往左的方向,这样可以尽早的过滤掉一些不必要的样式规则和元素
- display:inline-block 有4px间距,其实都是换行符,空白符的影响
间距会受到font-size的影响
1>. letter-spacing:-4px
2>. font-size:0 对文字有影响
3>. 改变代码结构 </li><li>
4>. 代码不闭合,html会自动闭合
- ::before ::after 伪元素的骚操作
span前添加文本
- 使元素消失
/* visibility: hidden; 占据位置,不会触发绑定事件 */
- 限制一行文本的宽度,多余省略号
overflow
- white-space设置如何处理元素内的空白
- table内td的边框重合是在border上设置的border-collapse
<caption> 标题 默认居中
table
- textarea 固定大小
1>:彻底禁用拖动(推荐)
resize: none;
2>.:只是固定大小,右下角的拖动图标仍在
width
- text-transform 大小写
capitalize
- 选择器
1. li + li 的使用,不包括第一个,如果中间有打断,重新开始找,比如 li li li a li li ,选中的li是第2,3,5 个,不包含第四个
li ~ li 除了这个li之后的所有li
2.属性选择器
[title]a[href ^= "http://"]img[src $= ".png"]div[class*="test"] class里有test 这个单词的a[title ~= "world"] 以空格分开的词汇
3.. first-child 第一个元素
first-of-type 匹配的是某父元素下相同类型子元素中的第一个ulli ul :first-child ul li:first-child ul li:first-of-typelia ul a:first-of-typeli ul li:last-of-typea ul :last-child
- ::selection 该选择器匹配被用户选取的选取是部分。
- 去除滚动条
div
- transition animation 的区别
>transition 需要触发一个事件才能改变属性
>animation 打开页面自动执行
- margin无法穿透border的问题
当给儿子margin-top,父亲会自动添加到自己身上,这时给父亲添加透明的border,就可以实现儿子距离父亲顶部的距离,因为margin无法穿透border
html
如图:
当给erzi添加margin-top:40px,父元素直接下移,仿佛给baba设置margin了一样。。
但是如果给baba添加border,就实现了儿子与爸爸顶部的距离
- background-size:cover 盖住我所有的面积,按比例缩放,可能只有一部分图片显示出来,contain:缩放背景图片以完全装入背景区,可能背景区部分空白,100%:拉伸背景图覆盖所有面积,背景图会变形充满全部
- css bug 的来源:不到万不得已,不要给元素设置宽度和高度,给元素设置最大宽度,屏幕小于这个值时,元素就会自适应
- 元素的自行收缩:如果一个设置fixed/absolute/float且没有指定宽度, 默认会收缩为内容宽度,解决:必须设置 width:100%
- 重置 hr 的颜色:通过border-color
- inline元素设置上下margin 无效
- word-break:break-all (打断单词)
- ul 默认上下margin16(1em), 左padding40
- 渐变操作设置div不同的背景色,且不具有渐变效果
- ul 的 li 默认 display:list-item,才有的小圆点,如果你把li display为非list-item,比如block,inline,li的小圆点就没了。
根据作者日常使用持续更新中....
css距离顶部高度_css大法(二)相关推荐
- vue动态获取元素距离页面顶部的高度_VUE如何实时监听元素距离顶部高度
VUE如何实时监听元素距离顶部高度 发布时间:2020-07-30 09:09:43 来源:亿速云 阅读:150 作者:小猪 这篇文章主要讲解了VUE如何实时监听元素距离顶部高度,内容清晰明了,对此有 ...
- vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作
效果图如下所示 .html 今日热门 今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...
- html css 距离顶部距离,详解CSS line-height和height
最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a20131263 ...
- css 商城 两列_css大法之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- dom元素滚动条高度 js_js获取元素的滚动高度,和距离顶部的高度
监控元素出现在视图中 p { height: 30px; line-height: 30px; background: #f3f3f3; opacity: 0; } 你好,china! 你好,chin ...
- 微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度,防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度 一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
- HTMl中内容离页面底部距离,CSS 实现内容高度不够的时候底部(footer)自动贴底
在 UI 切图过程中,页面往往由三个部分组成,头部.内容和底部.当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多 ...
- javaScript实现顶部通栏:往下滑动到距离顶部一定距离,顶部通栏消失;再往上滑动到距离顶部一定距离,顶部通栏再次出现;滚动条往上滑动也会出现(注意CSS样式中的渐变设置)
注意: 往下滑动到距离顶部一定距离,顶部通栏消失:再往上滑动到距离顶部一定距离,顶部通栏再次出现:该效果的关键点是比较当前滑动距离和自己设置的top值 滚动条往上滑动也会出现:该效果的关键点时比较上次 ...
- 【CSS解决页面高度塌陷问题】
高度塌陷问题描述 1.页面高度塌陷问题 (1)产生原因 (2)正常标准流盒子 (3)子盒子浮动 (4)归纳总结 1.1.清除浮动本质 1.2 .清除浮动的方法 (1)方法一:额外标签法 (2)方法二: ...
最新文章
- matlab java错误_Matlab启动时大量java错误的处理方法
- 【PHP-FPM】配置,优化性能
- 20155317 2016-2017-2 《Java程序设计》第十学习总结
- 60+ 实用 React 工具库,助力你高效开发!
- android 自定义xml属性
- 计算机管理器win8.1,没事折腾?Win8.1文件管理器设置几招
- [jstl] forEach标签使用
- 阿里云ECS官网域名映射及Tomcat配置调整,最终使用HTTPS和域名直接访问
- C++ HOOK 详解
- 对VLAN间路由实验的总结
- Hadoop3——集群搭建以及初体验
- 多线程之线程池复习总结
- python核心编程第三版课后习题一
- 基于javaweb的医院门诊收费管理系统(java+html+jdbc+mysql)
- HTML 字体 大小 颜色对照表
- android4.4呼叫转移,安卓呼叫转移
- 升级macos beta_如何选择退出macOS开发人员或公开Beta版
- Flink Watermark 机制浅析(透彻)
- TOF相机 Realsense L515 与 Ipad pro Lidar Camera 对比
- 做什么样的人最开心呢?