CSS
关注
分享
扫一扫
Dora_5537
这个作者很懒，什么都没留下…
展开
-
【CSS】Position 定位
一个完整的页面是由很多个页面堆积形成的，如下图所示。那么如何实现页面的堆积，就需要CSS中position的定位属性了。position 属性指定了元素的定位类型，共有五个值，分别是static relative fixed absolute sticky点击上述五个值可直接跳转到菜鸟教程的CSS Position (定位)篇章。这里，我只重点说 absolute、f...原创 2019-02-26 15:45:04 · 1646 阅读 · 0 评论 -
【CSS】CSS3 动画
1. 动画属性：transition、animation(CSS3新增)。2. animation 可以通过 @keyframes (关键帧) 构建一些 transition 的动画效果。3. CSS3一共有八个子属性：animation-name、animation-duration、animation-timing-function、animation-delay、animation...原创 2019-08-09 22:36:48 · 203 阅读 · 0 评论 -
【CSS】CSS 预处理器 之 Sass 和 Less 的区别
一、CSS 预处理器CSS 预处理器是一种脚本语言，用一种专门的编程语言来进行 Web 页面样式设计，然后再转换为正常的 CSS 样式，进而实现构建动态 CSS 样式。CSS 预处理器为 CSS 增加了一些编程的特性，无需考虑浏览器的兼容性问题。Sass 和 Less 就是两种常见的 CSS 预处理器，我们可以把 Sass 和 Less 编辑的样式转换为正常的 CSS样式。他们引入了...原创 2019-08-26 16:10:55 · 595 阅读 · 0 评论 -
【CSS】CSS3 2D 和 3D 转换
CSS3转换，通过 transform，我们可以移动，旋转，缩放，和倾斜元素。2D 转换1. translate()根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 translateX 表示只在X轴(水平方向)移动。translateY 表示只在Y轴(水平方向)移动。 translate（50px，100px）是从左边移动50个像素，并从顶部移动100像素。2....原创 2019-08-26 16:50:18 · 755 阅读 · 0 评论 -
【CSS】display、position、float 三者的优先级
1. display 的值是 none如果 display 的值是 none，则 position 和 float 无效。否则，继续进行2。2. position的值是 absolute或 fixed如果 position的值是 absolute或 fixed，则浮动失效，并且 display 的值 按照 对应表 设置。否则，继续进行3。此时，元素的位置将由 ‘top’，’...转载 2019-08-29 14:51:57 · 1647 阅读 · 0 评论 -
【应用】实现一个包含 Header、Sider、Content、Footer 的布局容器
题目描述：实现一个包含 Header、Sider、Content、Footer 的布局容器，如下图所示：代码如下：<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>...原创 2019-04-21 13:21:25 · 1564 阅读 · 0 评论 -
【应用】三列布局 - 两边固定宽度,中间自适应,高度一致
一、Flex 布局图1<!DOCTYPE html><html><head> <title>三列布局-两边固定宽度,中间自适应,高度一致</title> <style> html,body{ margin: 0; padding: 0; } #main{ width: 100%...原创 2019-10-05 12:08:04 · 1307 阅读 · 0 评论 -
【CSS】对 BFC 规范的理解
常见的定位方案定位方案用于控制元素的布局，有三种常见方案:1）普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。2）浮动 (floa...转载 2019-08-09 17:25:56 · 468 阅读 · 0 评论 -
【CSS】用CSS实现一个三角形
用CSS实现一个三角形，如下图所示：<div class="demo"></div><style type="text/css"> .demo{ width: 0; height: 0; border: 40px solid transparent; border-top-c...原创 2019-06-09 22:40:09 · 233 阅读 · 0 评论 -
【CSS】Border 边框
总结1. 基本属性border-width:设置边框的粗细 border-color:设置边框的颜色 border-style:设置边框的类型（1）简写语法：border: border-width border-style border-color 注意：三个属性的顺序任意，个数任意，但是这三个属性中必须要有 “border-style”。（2）对边框...原创 2019-05-13 22:51:11 · 1434 阅读 · 0 评论 -
【CSS】行内元素、行内块元素和块级元素
总结1.行内元素（内联元素）（1）常见的行内元素：行内元素 说明 <span> <a> 最常使用（文本、链接） <b> <i> 修饰字体（加粗、倾斜） <sup> <sub> 上标、下标（） <input> <img> ...原创 2019-05-14 23:59:43 · 709 阅读 · 0 评论 -
【CSS】水平居中、垂直居中、水平垂直居中
总结1. 水平居中（1）使用 text-align：把父元素设置为：text-align: center 该方法均适用于行内元素、行内块元素、块级元素。 注意：如果块级元素设置了宽度，则需要把块级元素设置为行内元素或行内块元素：display: inline 或 display: inline-block；（2）使用 margin：把元素设置为：...原创 2019-05-09 22:52:53 · 264 阅读 · 0 评论 -
【CSS】渐进增强和优雅降级
总结1.渐进增强和优雅降级都是一种开发方式，更是一种设计理念。2.渐进增强是指在编写Web页面时，首先保证最基本、最核心的功能实现，并让所有的浏览器（包括旧式、低端的浏览器）都能看到站点的内容；然后再考虑使用高级但非必要的CSS和JavaScript等增强功能，为当前和未来的浏览器提供更好的支持。3.优雅降级是指在编写Web页面时，首先必须完整的实现站点的所有内容(包括功能和效果...原创 2019-05-15 10:10:42 · 298 阅读 · 0 评论 -
【CSS】浮动和清除浮动
一、浮动1. 浮动的定义：浮动是指让元素脱离标准流(文档流)，漂浮在标准流之上，和标准流不是一个层次。而且，浮动元素会按照指定的方向发生移动，遇到父元素边界或者相邻的浮动元素时停下来。 注意：浮动元素设置宽高有效。2. 实现浮动的途径：float、absolute、fixed 。3. 以 div 为例，用 float 来实现浮动：（1）首先，div 是块级元素，在页面中独占...原创 2019-05-15 16:36:10 · 505 阅读 · 0 评论 -
【CSS】选择器及样式优先级
总结1.选择器类型 ID选择器 类选择器、属性选择器、伪类选择器 元素选择器(标签选择器)、关系选择器(层次选择器)、伪元素选择器 通配符选择器2.样式优先级注意：(1)... > 通配符 > 继承 > 浏览器默认属性。(2) 可以实现自动继承的样式：font-size、text-indent、line-heig...原创 2019-05-07 21:27:36 · 286 阅读 · 0 评论 -
【CSS】Flex布局
总结1. 任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}2. 行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}3. Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ displ...原创 2019-05-16 16:03:54 · 273 阅读 · 0 评论 -
【应用】两列布局 - 左边固定宽度，右边自适应
一、Flex 布局<!DOCTYPE html><html><head> <title>两列布局-左边固定宽度，右边自适应</title> <style> html,body{ margin: 0; padding: 0; } #main{ width: 100%; borde...原创 2019-10-05 15:31:16 · 310 阅读 · 0 评论