随笔分类 - 1_css（布局、z-index等）
摘要：范仁义css3课程 34、背景4（ 背景简写属性 ） 一、总结 一句话总结： 背景的简写属性为"background"，属性值的顺序为：background-color、background-image、background-repeat、background-attachment、backgrou
阅读全文
摘要：范仁义css3课程 32、背景2（ background-position） 一、总结 一句话总结： background-position的作用是给背景图片定位，是背景相对于标签区域移动 1、background-position属性是元素区域相对于背景图定位，还是背景图相对于元素区域定位？ 是背
阅读全文
摘要：范仁义css3课程 31、背景1（ background-image） 一、总结 一句话总结： 可以使用background-image来设置背景图片，背景图可以和背景颜色同时设置，可以使用background-repeat用于设置背景图片的重复方式 1、background-image的语法是怎样
阅读全文
摘要：按钮用图片做背景hover时闪烁 一、总结 一句话总结： 原因：是因为背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，而加载图片需要时间 解决：将按钮切换的图片放在一张图片里面 二、按钮用图片做背景hover时闪烁 做完功能以后，发现在第一次切换图片时，会发
阅读全文
摘要：CSS3疑难问题 5、:before和::before的区别 一、总结 一句话总结： :before相当于是css3之前的写法，::before相当于是css3的写法，:before和::before都可以正常显示，但是推荐用::before 1、单冒号(:)和双冒号(::)在选择器中的使用场景分析
阅读全文
摘要：reset.css是什么 一、总结 一句话总结： The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font siz
阅读全文
摘要：伪元素和伪类在chrome浏览器里面还是比较好区分的 一、总结 一句话总结： a、伪元素比如:first-letter，style里面会很明确的写上Pseudo ::first-letter element，告诉你它是一个伪元素 b、伪类比如a:hover，出现的位置就是普通的class样式的位置，
阅读全文
摘要：伪元素选择器 一、总结 一句话总结： 一、::first-letter 第一个字 二、::first-line 第一行（以浏览器为准的第一行） 三、::selection 被选中的字行（鼠标选中的字段）只能向 ::selection 选择器应用少量 CSS 属性：color、background、c
阅读全文
摘要：响应式布局的两种实现形式 一、总结 一句话总结： 一是用媒体查询实现，二是用bootstrap的栅格系统实现 二、响应式布局的两种实现形式 转自或参考：响应式布局的两种实现形式https://www.cnblogs.com/luowen075/p/5907567.html 所谓的响应式布局，就是设计
阅读全文
摘要：范仁义css3课程 30、层模型小实例 一、总结 一句话总结： 层模型在日常开发中还是用的比较多的，比如相对定位配合绝对定位来做一些元素的精确定位，比如固定定位做导航和回到顶部的一些按钮等等 二、层模型小实例 博客对应课程的视频位置：30、层模型小实例https://www.fanrenyi.com
阅读全文
摘要：范仁义css3课程 29、层模型总结及实例分析 一、总结 一句话总结： 层模型中常见的有相对定位(relative)[相对于以前]、绝对定位(absolute)[相对于最近的设置了定位的祖先元素]、固定定位(fixed)[相对于浏览器窗口]三种，通过这三种定位可以非常精确和随意的操纵元素的位置。 1
阅读全文
摘要：范仁义css3课程 28、元素的层级 一、总结 一句话总结： 如果设置了定位的话，正常默认是下边的元素会盖住上边的，如果想改变定位元素的堆叠顺序，可以给元素设置z-index属性。z-index的值可以设置为整数，数越大层级越高。 1、元素层级的特点有哪些？ 1、如果定位元素的层级是一样，则下边的元
阅读全文
摘要：范仁义css3课程 27、固定定位 一、总结 一句话总结： 固定定位是定位的一种，固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样，比如脱离文档流，和绝对定位不同的是固定定位永远都会相对于浏览器窗口进行定位。用position: fixed可以设置固定定位，通过top、bottom、left
阅读全文
摘要：范仁义css3课程 26、绝对定位 一、总结 一句话总结： 绝对定位是定位的一种，绝对定位会脱离文档流，用position: absolute来设置，通过top、bottom、left、right可以设置定位的偏移量 1、绝对定位的基本操作？ 对元素设置position属性为absolute，然后用
阅读全文
摘要：范仁义css3课程 25、相对定位 一、总结 一句话总结： 相对定位是层布局的一种，相对定位不脱离文档流，用position: relative来设置，通过top、bottom、left、right可以设置定位的偏移量 1、相对定位小实例？ 设置position为relative，然后设置偏移 .b
阅读全文
摘要：范仁义css3课程 24、层布局模型介绍 一、总结 一句话总结： 层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，能够对每个图层进行精确定位操作。通过postion属性来设置。常见的有相对定位(relative)、绝对定位(absolute)、固定定位(fixed)三种。 二
阅读全文
摘要：CSS的7阶层叠水平（stacking level） 一、总结 一句话总结： 1、层叠上下文 background/border；2、负z-index 3、block块状水平盒子：正常流式布局，非inline-block，无position定位（static除外） 4、float浮动盒子：无posi
阅读全文
摘要：深入理解 CSS 属性 z-index 一、总结 一句话总结： 注意z-index不仅可以作用于定位元素，还可以作用于css3中的一些元素，也要知道有 7阶层叠水平(stacking level) 这么个东西 1、z-index对哪些样式有用？ css中的定位(position:relative/a
阅读全文
摘要：css 布局的几种方式 一、总结 一句话总结： 布局比较常用的是浮动布局和弹性布局和层布局（定位），还有另一个维度的响应式的布局 1、响应式布局的几种方式？ 1、meta 标签：meta name="viewport" content="width=device-width, initial-sca
阅读全文
摘要：CSS3疑难问题 4、父子元素相邻的垂直外边距重叠的问题 一、总结 一句话总结： 可以通过给父元素设置伪元素:before来增加一个空的table元素来解决 .box1:before{ content: ""; display: table; } 二、父子元素相邻的垂直外边距重叠的问题 博客对应课程
阅读全文
浙公网安备 33010602011771号