微信扫一扫打赏支持

随笔分类 -  1_css（布局、z-index等）

上一页 1 2 3 4 5 6 ··· 9 下一页
范仁义css3课程---43、弹性盒子（flex）子元素属性
摘要：范仁义css3课程 43、弹性盒子（flex）子元素属性 一、总结 一句话总结： 弹性盒子的子属性是设置弹性子元素的属性，属性有order（顺序）、flex-grow、flex-shrink、flex-basis、flex（flex-grow和flex-shrink和flex-basis的简写属性） 阅读全文
posted @ 2020-02-23 11:06 范仁义 阅读(1637) 评论(0) 推荐(0)
范仁义css3课程---42、弹性盒子（flex）属性
摘要：范仁义css3课程 42、弹性盒子（flex）属性 一、总结 一句话总结： 弹性盒子给容器设置的属性有：flex-direction（方向）、flex-wrap（是否换行）、justify-content（子元素水平排列方式）、align-items（子元素垂直排列方式）、align-content 阅读全文
posted @ 2020-02-23 10:07 范仁义 阅读(981) 评论(0) 推荐(0)
弹性布局的作用
摘要：弹性布局的作用 一、总结 一句话总结： flex布局。虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。 二、弹性布局的作用 弹性盒子 阅读全文
posted @ 2020-02-23 02:51 范仁义 阅读(636) 评论(0) 推荐(0)
范仁义css3课程---41、弹性盒子（flex）介绍
摘要：范仁义css3课程 41、弹性盒子（flex）介绍 一、总结 一句话总结： 弹性盒子主要是设置display属性为flex，用于多列布局，功能强大，操作特别简单。 1、查询前端兼容性的网站？ can i use：https://www.caniuse.com/ 2、flex布局特点？ flex布局默 阅读全文
posted @ 2020-02-23 01:19 范仁义 阅读(334) 评论(0) 推荐(0)
CSS3弹性盒布局
摘要：CSS3弹性盒布局 一、总结 一句话总结： 弹性盒子主要是设置display属性为flex，用于多列布局，功能强大，操作特别简单。 1、弹性盒子常用的属性有哪些？ flex-direction（盒子中item排列方向）、flex-wrap（item超出父元素是否换行）、align-items（ite 阅读全文
posted @ 2020-02-23 01:18 范仁义 阅读(862) 评论(0) 推荐(0)
尚硅谷css3---flex布局实例（多列布局）
摘要：尚硅谷css3 flex布局实例（多列布局） 一、总结 一句话总结： 弹性盒子的操作比较简单，在弹性盒子上指定display: flex，在item上面指定flex综合属性的值为1。 #nav > .row{ display: flex; } #nav > .row > .item{ flex: 1 阅读全文
posted @ 2020-02-23 00:56 范仁义 阅读(760) 评论(0) 推荐(0)
css3 media媒体查询 总结
摘要：css3 media媒体查询 总结 一、总结 一句话总结： 媒体查询主要是根据浏览器的特性（窗口大小、横竖屏、屏幕比例等）设置不同的样式，主要由三部分构成媒体类型（比如screen）、媒体属性（比如宽、高、屏幕类型）、关键字（and、only等）构成 二、CSS Media媒体查询使用大全，完整媒体 阅读全文
posted @ 2020-02-21 23:18 范仁义 阅读(824) 评论(0) 推荐(0)
尚硅谷css3---媒体查询
摘要：尚硅谷css3 媒体查询 一、总结 一句话总结： 媒体查询主要是根据浏览器的特性（窗口大小、横竖屏、屏幕比例等）设置不同的样式，主要由三部分构成媒体类型（比如screen）、媒体属性（比如宽、高、屏幕类型）、关键字（and、only等）构成 1、媒体查询由哪三部分构成？ a、媒体类型：比如scree 阅读全文
posted @ 2020-02-21 23:05 范仁义 阅读(161) 评论(0) 推荐(0)
CSS媒体查询
摘要：CSS媒体查询 一、总结 一句话总结： 媒体查询主要是根据浏览器的特性（窗口大小、横竖屏、屏幕比例等）设置不同的样式，主要由三部分构成媒体类型（比如screen）、媒体属性（比如宽、高、屏幕类型）、关键字（and、only等）构成，@media not|only mediatype and (exp 阅读全文
posted @ 2020-02-21 22:55 范仁义 阅读(285) 评论(0) 推荐(0)
重新认识caniuse
摘要：重新认识caniuse 一、总结 一句话总结： can i use网站可以查询css、js等的一些兼容性，比如不同浏览器对flex弹性布局属性的支持，网站地址：https://www.caniuse.com/ 二、重新认识caniuse（转） 转自：https://segmentfault.com/ 阅读全文
posted @ 2020-02-21 12:56 范仁义 阅读(2840) 评论(0) 推荐(0)
范仁义css3课程---40、box-sizing属性实例
摘要：范仁义css3课程 40、box-sizing属性实例 一、总结 一句话总结： box-sizing属性用的特别多，一般指定盒子为border-box，这样我们设置宽高之后再设置padding和border，就是向内撑，而不是向外加大盒子可见区域的宽高，这样设置之后就不会影响布局和其它元素 二、bo 阅读全文
posted @ 2020-02-21 11:44 范仁义 阅读(224) 评论(0) 推荐(0)
范仁义css3课程---39、css3的box-sizing属性
摘要：范仁义css3课程 39、css3的box-sizing属性 一、总结 一句话总结： box-sizing用于指定盒子的类型，主要有content-box和border-box两种，如果是content-box，那么设置宽高的话就是给content设置，如果是border-box，设置宽高就是设置的 阅读全文
posted @ 2020-02-21 10:17 范仁义 阅读(174) 评论(0) 推荐(0)
CSS3疑难问题---6、伪类和伪元素的区别
摘要：CSS3疑难问题 6、伪类和伪元素的区别 一、总结 一句话总结： 伪类不产生新的对象，只是在 DOM 中一个元素的不同状态 伪元素产生新对象，在 DOM 树中看不到 二、伪类和伪元素的区别 博客对应课程的视频位置：6、伪类和伪元素的区别https://www.fanrenyi.com/video/1 阅读全文
posted @ 2020-02-15 19:23 范仁义 阅读(141) 评论(0) 推荐(0)
范仁义css3课程---37、伪类选择器
摘要：范仁义css3课程 37、伪类选择器 一、总结 一句话总结： 伪类选择器中的伪类是一个概念上的类，不是我们定义的，是抽象的。如a:hover，选择a标签（元素选择器）中具有鼠标悬停类的所有元素 1、常见的伪类选择器有哪些？ 比如:link、:visited、:hover、:active、:focus 阅读全文
posted @ 2020-02-13 09:45 范仁义 阅读(278) 评论(0) 推荐(0)
范仁义css3课程---38、伪元素选择器
摘要：范仁义css3课程 38、伪元素选择器 一、总结 一句话总结： 伪元素选择器中的伪元素相当于dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有） 1、常见的伪元素选择器有哪些？ 比如:be 阅读全文
posted @ 2020-02-13 09:45 范仁义 阅读(197) 评论(0) 推荐(0)
伪类选择器和伪元素选择器简单理解
摘要：伪类选择器和伪元素选择器简单理解 一、总结 一句话总结： 元素选择器：如上面的p{}，实实在在的存在的元素。 伪元素选择器：dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有） 类选择器： 阅读全文
posted @ 2020-02-13 09:24 范仁义 阅读(308) 评论(0) 推荐(0)
自定义title属性样式
摘要：自定义title属性样式 一、总结 一句话总结： 在开发中表格中文字太长，我们会以省略号的形式展示，鼠标移动在文字上就显示全部，如果不用一般的UI框架，我们则会选择title属性来实现这个效果 1、在 HTML5 中, title 属性可用于任何的 HTML 元素（title 属性规定关于元素的额外 阅读全文
posted @ 2020-02-13 09:21 范仁义 阅读(6053) 评论(0) 推荐(1)
范仁义css3课程---36、背景6（ 背景小实例：淘宝 ）
摘要：范仁义css3课程 36、背景6（ 背景小实例：淘宝 ） 一、总结 一句话总结： 淘宝的背景小实例中，主要使用的是background-position取负值从而取到背景图片上面的不同小图标。 二、课程代码 博客对应课程的视频位置：36、背景6（ 背景小实例：淘宝 ）https://www.fanr 阅读全文
posted @ 2020-02-13 06:54 范仁义 阅读(177) 评论(0) 推荐(0)
link和@import到底有什么区别
摘要：link和@import到底有什么区别 一、总结 一句话总结： 1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。 2、加载顺序：页面被加载时，link会和html同时被加载而；@impo 阅读全文
posted @ 2020-02-13 05:21 范仁义 阅读(227) 评论(0) 推荐(0)
范仁义css3课程---35、背景5（ 背景小实例：b站 ）
摘要：范仁义css3课程 35、背景5（ 背景小实例：b站 ） 一、总结 一句话总结： 这个b站背景的实例中，最重要的就是background-position: center 0，因为水平方向是center(居中)，所以浏览器尺寸改变的话，这个图也是一直居中的 二、背景小实例：b站 博客对应课程的视频位 阅读全文
posted @ 2020-02-13 05:06 范仁义 阅读(175) 评论(0) 推荐(0)

上一页 1 2 3 4 5 6 ··· 9 下一页