随笔分类 - 1_css（布局、z-index等）
摘要：overflow（超出部分省略号） 一、总结 一句话总结： 一行超出或者两行超出最主要是使用overflow属性（hidden值隐藏），可以设置text-overflow来设置文字溢出部分为省略号（ellipsis） 二、overflow（超出部分省略号） 转自或参考：overflow（超出部分省略
阅读全文
摘要：css中浮动的理解及实际应用 一、总结 一句话总结： 感觉讲浮动的时候，参考资料再稍微多一点好一点，视频资料和博客资料都有比较好，最好也多参考书籍资料 二、关于css中浮动的理解及实际应用 转自或参考：关于css中浮动的理解及实际应用https://www.cnblogs.com/huangwenj
阅读全文
摘要：范仁义css3课程 23、浮动小实例 一、总结 一句话总结： 使用浮动可以很方便的做出两栏或者多栏布局，我们需要注意解决浮动造成的高度塌陷问题 二、浮动小实例（div布局实例） 博客对应课程的视频位置：23、浮动小实例https://www.fanrenyi.com/video/10/61 1 <!
阅读全文
摘要：范仁义css3课程 22、float导致的父容器高度坍塌及解决 一、总结 一句话总结： 原因：浮动元素脱离文档流，使包含它的无高度样式的父容器感知不到其存在而发生内容无法撑开高度的现象 解决：增加一个空的块元素，清除浮动：clear:both;，让它把父元素撑开。 1、float布局导致的父容器高度
阅读全文
摘要：CSS3疑难问题 3、为什么clear属性用在内联元素上面没有作用 一、总结 一句话总结： clear属性是来清除浮动效果的，我们要明白float属性的初衷————让文字环绕图片展示。翻译成另外一句话：内联级别的元素会环绕浮动元素展示。所以clear属性要作用在块元素上面。 二、课程代码 博客对应课
阅读全文
摘要：范仁义css3课程 21、清除浮动 一、总结 一句话总结： float设置浮动之后，若想让后面元素不被浮动影响（不占浮动腾出来的地），可以用clear来清除浮动，clear可以用来清除其他浮动元素对当前元素的影响，其实清除浮动主要解决浮动高度塌陷的问题 1、clear的属性值有哪些？ none(默认
阅读全文
摘要：范仁义css3课程 20、浮动 一、总结 一句话总结： 浮动的话使用的是float属性，可以让元素浮动起来，常用取值为left（向左浮动）和right（向右浮动），浮动会使元素脱离文档流 1、float属性有哪些取值？ 1、none，默认值，元素默认在文档流中排列 2、1eft，元素会立即脱离文档流
阅读全文
摘要：CSS3疑难问题 2、BFC是什么及实例 一、总结 一句话总结： BFC(Block formatting context)直译为"块级格式化上下文"。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 1、BFC的布局规则？ 1、Box垂直方向的距离由marg
阅读全文
摘要：CSS中的盒子类型（content-box、padding-box、border-box、margin-box） 一、总结 一句话总结： box-sizing属性支持的三个盒子类型（content-box、padding-box、border-box）和未支持的（margin-box）和盒子模型的四
阅读全文
摘要：overflow 一、总结 一句话总结： overflow是用来操作box中溢出的内容的，overflow常用属性值有四个：visible(默认值)、hidden、scroll、auto(最常用)；除默认值visible之外，其它都触发bfa 二、overflow 转自或参考：overflowhtt
阅读全文
摘要：css布局方式总结 一、总结 一句话总结： CSS主要包含3种基本的布局模型：流动模型（Flow）、浮动模型 (Float) 和 层模型（Layer）。 1、流动模型（Flow）是什么？ 流动（Flow）是默认的网页布局模式，在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。块状元
阅读全文
摘要：CSS 清除浮动 一、总结 一句话总结： 1、为什么要清除浮动？ 二、CSS 清除浮动 转自或参考：CSS 清除浮动https://www.cnblogs.com/niujifei/p/11212184.html 一、为什么要清除浮动 浮动本质是用来做文字混排效果的，但是拿来做布局用，则会有很多的问
阅读全文
摘要：css相对定位 一、总结 一句话总结： 相对定位用position: relative;可以设置left和top等设置偏移，元素无论是否进行移动，仍然占据原来的空间 1 #box_relative { 2 position: relative; 3 left: 30px; 4 top: 20px;
阅读全文
摘要：zoom:1的常见作用 一、总结 一句话总结： 通常，在给低版本的IE做兼容的时候会用到zoom:1; 比如zoom:1;解决ie6中不支持after伪类解决float高度坍塌 例如，清除浮动的时候，我们会这么写.clearfix::after{content: ".";clear: both;di
阅读全文
摘要：float中为什么clear: both;可以撑开父元素 一、总结 一句话总结： 在父元素的末尾添加一个block元素，并由于clear的特性，该block元素会定位在上一个float元素的下方，而父元素要容纳这个非浮动元素就必须被撑开！当然由于这是一个空元素，故看起来像是父元素被float元素撑开
阅读全文
摘要：范仁义css3课程 19、流动布局 一、总结 一句话总结： 流动（Flow）布局是默认的网页布局模式，在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，内联元素都会在所处的包含元素内从左到右水平分布显示。 1、流动模型的比较
阅读全文
摘要：范仁义css3课程 18、overflow 一、总结 一句话总结： 子元素默认是存在于父元素的内容区中，如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，我们通过overflow可以设置父元素如何处理溢出内容 1、overflow属性有哪些属性值？ -visible，默认值
阅读全文
摘要：document.querySelector()和document.querySelectorAll() 一、总结 一句话总结： 1、获取文档中有 "target" 属性的第一个 <a> 元素？ 2、获取文档中 <h1> 或 <h2> 第一个匹配到的元素（多选择器用逗号”，“隔开）？ 3、获取文档中
阅读全文
摘要：文档翻译 1、Animate.css 一、总结 一句话总结： animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis,
阅读全文
摘要：好用的css3类库 1、css3动画库：animate.css 一、总结 一句话总结： animate.css一款强大的预设css3动画库，并且使用及其简单：引入animate.css，然后直接在标签上面使用样式即可 1、animate.css如何使用？ 引入animate.css，然后直接在标签上
阅读全文
浙公网安备 33010602011771号