CSS
关注
分享
扫一扫
luoyu6
个人生活和学习笔记
展开
-
CSS 文档流
至今也没有找到一个关于文档流的标准概念，所以这里所阐述的文档流的概念只是本人的理解可以把文档流拆分成“文档”和“流”两个词汇来理解。“文档”指的是内容，也就是我们所写的页面内容，而“流”则是一种文档内容的显示规则。 有些元素天生不占据文档流，比如隐藏元素。也可以使一个元素强行脱离文档流，比如让元素浮动（float）起来或者使用绝对定位（absolute、fixed）等方式。...翻译 2018-04-27 14:55:40 · 162 阅读 · 0 评论 -
CSS的四种定位方式有哪些，他们之间的区别是什么？定位实例详解
css定位有四种不同类型，position值分别为：static， relative，absolute，fixed1. relative（相对定位）：相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级代码实例：<!DOCTYPE html>&...原创 2018-04-27 16:41:44 · 29711 阅读 · 3 评论 -
解决锚点链接跳转后位置上下偏移的偏移的办法
应用场景：我们把导航固定在页面顶部的时候，点击锚链接跳转到相应的部分时，很可能导航把页面的内容覆盖了，像这样导航把文字覆盖了， 原因就是我们设置了padding这类css属性 正常盒模型的宽度：width=width+padding+border,其实就是导航盖住了盒模型的padding，覆盖原因就不过多解释了。我们还是说下解决办法吧问题：既然是锚链接，要跳转，就要用href呀，同时，...原创 2018-10-05 23:08:01 · 15811 阅读 · 12 评论 -
让图片和文字居中对齐的方法
如果一个盒子图片，文字，在同一行上，怎么实现文字始终对齐图片的中间位置呢？ 方法就是使用vertical-align:middle;也就是给盒子都使用这个属性，需要注意的是：这个属性只对行内元素起作用,如果不是行内元素要加上diaplay:inline-block;示例代码：<div> <img src="img/0.png"> ...原创 2018-10-18 17:53:13 · 12479 阅读 · 0 评论 -
媒体查询常见媒体尺寸和设置
@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 起） */@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 起） */@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，7...原创 2018-10-31 13:57:35 · 7711 阅读 · 0 评论 -
css 文字过长 显示点点点...
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 110px;使用ellipsis的时候，必须配合overflow:hidden; white-space:nowrap; width三者，才有效果原创 2018-10-27 15:00:38 · 3518 阅读 · 0 评论 -
ie兼容性问题：页面内容显示不全，但不会出现滚动条
/* 页面内容显示不全，但不会出现滚动条*/ html { overflow-y: scroll;}:root { overflow-y: auto; overflow-x: hidden;}:root body { position: absolute;}body { width: 100vw; overflow: hidden;} /* ...转载 2018-12-19 15:19:39 · 8685 阅读 · 0 评论