在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。 （1）背景色过渡变化 下面鼠标移入后，按钮背景色会慢慢地变成黄色。鼠标离开 ...
分类：
Web程序 时间：
2020-06-07 16:35:02
阅读次数：
232
边距重叠 统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况： 首先把所有的margin格式清空 <head> <title>边距重叠</title> <style> html *{ margin-top: 0px; padding: 0px; } </styl ...
分类：
其他好文 时间：
2020-06-07 12:56:38
阅读次数：
73
CSS核心基础 CSS样式规则 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} CSS代码结构中的特点 CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分 ...
分类：
Web程序 时间：
2020-06-06 23:27:19
阅读次数：
99
盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 网页就是多个盒子嵌套排列的结果。 内边距出现在内容区域的周围，当给元素添加背景色或背景图 ...
分类：
其他好文 时间：
2020-06-06 23:25:53
阅读次数：
92
一.元素显示模式 1.概念 元素显示模式就是元素（标签）以什么方式进行显示。 2.分类 分为块元素和行内元素 3.块元素 常见的块元素 <h1>~<h6> <p> <div> <ul> <ol> <li> 等。 特点 ： 1.独占一行 2.高度，宽度，行边距，都可以控制 3.宽度默认是容器（父级）宽 ...
分类：
Web程序 时间：
2020-06-06 12:51:38
阅读次数：
57
1、盒子模型作用：盒子模型就是一个盒子，封装周围的html元素。允许我们在其他元素和周围元素边框的空间放置元素。2、组成：外边距（margin）：相邻的两个盒子margin，会发生折叠，可为负数边框（border）：内边距（padding）：实际内容（content）：百分比相对于父容器的conte ...
分类：
Web程序 时间：
2020-06-05 21:05:11
阅读次数：
93
这一期给大家讲解一下盒模型的概念以及它的组成部分吧 每一个标签在页面中都会生成一个盒模型，而每个盒模型都有四个组成部分，由外到里是margin外边距，border边框，padding内边距，content内容部分组成。 如上图所示，蓝色部分就是内容content区域。 border取值简写就是bor ...
分类：
其他好文 时间：
2020-06-05 20:54:45
阅读次数：
85
1、作用：控制元素和元素之间，或者元素和内容之间的位置关系； 2、概念：盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素之间的相互关系，CSS定义所有的元素都可以有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界（外边距） 3、盒模型的组成：content（内容区）+p ...
分类：
Web程序 时间：
2020-06-05 19:30:50
阅读次数：
67
圣杯布局的三种实现 圣杯布局是一种很常见的css布局。他要求： 上部和下部各自占领屏幕所有宽度。 上下部之间的部分是一个三栏布局。 三栏布局两侧宽度不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 本文会用三种方法来实现圣杯布局，分别是浮动，flexbox以及css gri ...
分类：
其他好文 时间：
2020-06-05 19:24:09
阅读次数：
91
首先回顾下CSS常出现的几个样式问题1当子元素添加上边距时，父元素也会向下移动 解决方法:给子元素添加display:inline-block;或者用父元素的padding-top代替给可以 2子元素浮动后，父级元素检测不到其高度3当元素浮动后，兄弟元素的内容超过其高度后会侵占它的区域（其实问题原因 ...
分类：
Web程序 时间：
2020-06-04 21:57:44
阅读次数：
96
