CSS
关注
分享
扫一扫
文章平均质量分 95
CSS学习
耳东蜗牛
社会的道路上越走越远，希望技术的道路上可以越走越近。
展开
-
css BFC
前置回顾先回顾前面的文章：css 视觉格式化模型 (visual formatting model ) 盒模型的尺寸和类型定位方案【正常文档流，浮动和绝对定位】文档树内部元素之间的关系外部信息（视口大小，图片的固有尺寸等）总结，visual formatting model决定浏览器如何显示如何处理文档树。盒子类型和定位方案决定元素盒子如何在文档树中显示和放置。正常文档流 Normal flow在普通流中，盒子会依次放置。在块格式化上下文中，盒子在垂直方向依次排列；而在行.原创 2021-04-19 23:11:26 · 391 阅读 · 1 评论 -
css 视觉格式化模型 (visual formatting model )
为什么需要了解视觉格式化模型？解释一些css效果，下面的两个问题？下面child1：一般为了水平居中会在水平方向上设置auto，这里在垂直方向上设置auto，会导致垂直居中的效果呢？ 下面两种方式一种是基于position，一种基于margin。可以观察chorme浏览器检查元素的不同水平垂直居中<html lang="en"> <head> <meta charset="UTF-8"> <title>Docu..原创 2021-03-29 23:03:29 · 771 阅读 · 0 评论 -
CSS - 引入CSS
W3C标准定义WEB包含三个层- 结构层（HTML）- 表现层（CSS）- 行为层（Javascript）提倡“结构、表现、行为，三者分离，互不干涉”的WEB页面- 内容：让访问者浏览的信息- 结构：使内容具有逻辑性和易用性- 表现：修饰内容的外在表现使之看起来美观- 行为：与内容的交互操作CSS 概述CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML...原创 2018-05-24 00:06:12 · 1364 阅读 · 0 评论 -
CSS - 选择器
CSS 的一个主要优势——尤其对设计者而言——是它能够轻松地把一组样式应用到同一类型的所有元素。印象不够深刻？想象这样的场景：通过编辑单行 CSS，你可以修改所有标题的颜色。不喜欢正在使用的蓝色？修改一行代码，把它们都变成紫色、黄色、栗色等等任何想要的颜色。这可以让你，设计师，专注于设计而不是繁琐的工作。下次会议中，有人想看绿色标题，你只需要编辑样式然而点击重新加载。瞧!几秒钟就完成了，每个人都可以看到。原创 2018-05-24 23:17:48 · 729 阅读 · 0 评论 -
w3c标准 - Css - （2）继承
w3c标准 - Css - （2）继承Css有全局作用域和局部作用域，全局作用域就相当于我们为整个html文档定义的属性和浏览器自己默认的属性设置，就像下图中黄色框标注的部分，局局部作用域就像红色标注的地方。还有像类选择器，属性选择器，其实这些属性针对当前应用到的元素都是一个相对应的全局作用域，因为这个不是仅仅是对应某一个标签，而是对应到某一类标签，其实也可以理解成，这个属性的设置没有设置到具体的某一个元素上，例如一个class属性，那它就相当于是在html元素定义的属性，所有的匹配这个class的元素都原创 2017-03-12 15:17:24 · 1147 阅读 · 0 评论 -
CSS - 选择器应用（自定义复选框 & 单选框）
当CSS 最初出现时，它对表单元素的样式控制力是极为有限的，而且现在仍然没有哪个CSS 规范明确定义了这方面的行为。不过这些年来，各种浏览器已经在逐步放开CSS 属性对表单控件的作用范围，从而允许我们设置大多数表单控件的样式。不幸的是，复选框和单选框不在此列。直到今天，这两种控件在绝大多数浏览器中仍然是几乎或完全无法设置样式的。<!DOCTYPE html> <html la...原创 2018-05-25 14:08:20 · 2876 阅读 · 0 评论 -
CSS - 选择器应用（开关式按钮）
开关式按钮与复选框的行为十分相似，可以用来切换某个选项的开关状态：启用时，它是被按下的状态；停用时，它就是浮起的状态。在语义上，开关式按钮和复选框并没有本质上的差别，因此可以放心地使用这个技巧，不用担心语义上有问题。<!DOCTYPE html> <html lang="en"> <head> <meta charset...原创 2018-05-25 14:28:34 · 1483 阅读 · 0 评论 -
CSS - 选择器优先级介绍
特殊性从CSS选择器文章中我们知道，与多种不同的方法选择元素。所以当我们使用多种规则的时候，我们必须要明确其中的优先级。但是在CSS选择器的规则中，称之为特殊性，特殊性越高，自然优先级越高。此时我们会先得到一个特殊性说明：！important 特殊性最高，详情访问重要性对于内联样式，加1000对于选中器中给定的ID属性值，加0100对于选择器中给定的类属性值，属性选择或伪类，加0010对于选择器中...原创 2018-05-27 15:54:10 · 16092 阅读 · 2 评论 -
CSS - 值和单位
CSS的所有工作中，基础都是单位。本章介绍数值，单位，颜色的相关知识。数字cssz中有两类数字：整数和实数。这些数字主要作为其他值类型的基础。html { width: 2000px;}百分数百分数值是一个计算得出的实数。其后跟一个百分比。百分数值几乎总是相对于另一个值。可能是同一个元素另一个属性的值，也可以是从父元素继承的一个值，或者是祖先元素的一个值。(1) 参照父元素宽度的元素ma...原创 2018-05-28 16:10:07 · 885 阅读 · 0 评论 -
CSS - 样式基本关键字
因为接下来就要开始学习具体的样式了，但是在学习样式之前，还是要将几个可能出现的样式关键字说明一下。样式关键字先看一个例子：先对下面的例子做一个简单的说明，首先可以查看文章确定下面的属性值的可继承性。下面例子中的可继承和不可继承的属性用来进行测试的，对于自定义的知识简单的将不同div展示出来。<!DOCTYPE html> <html lang="en"> &...原创 2018-05-28 19:02:49 · 3677 阅读 · 0 评论 -
CSS - 值和单位应用（灵活的背景定位）
灵活的背景定位主要是为了应用之前学习值和单位引用中说的background-position，以及em。本篇文章中涉及到background-position, background-origin, calc()函数原创 2018-05-29 12:11:43 · 655 阅读 · 0 评论 -
CSS - 字体
本文学习CSS字体的相关知识。CSS 字体系列，字体风格，使用字体，中文字体，字体加粗，字体大小，字体风格，字体变形，字体拉伸和调整（了解，几乎所有的浏览器不支持），复合属性font，@font-face。原创 2018-05-30 00:37:00 · 1315 阅读 · 0 评论 -
CSS - 基本视觉格式化
CSS有一种基础的设计模式是盒模型，定义了Web页面中的元素是如何看作盒子来解析的。在CSS中主要有这几种盒模型：inline, inline-block，block, table, absolute position, float。每一个盒模型是由以下几个属性组合所决定的：display, position, float, width, height, margin, padding, bord...原创 2018-06-04 16:46:32 · 764 阅读 · 0 评论 -
w3c标准 - Css - （3）盒模型与线模型
w3c标准 - Css - （2）盒模型与线模型原创 2017-03-26 22:39:39 · 1318 阅读 · 0 评论 -
CSS - 文本属性
缩进文本将Web页面上一个段落的第一行缩进，这是一种最常用的文本格式化效果。text-indent：[ <length> | <percentage> ] && hanging? && each-line?适用于：块容器<length>：用长度值指定文本的缩进。可以为负值。<percentage>：用百分比指定文本的缩...原创 2018-06-06 23:59:33 · 1666 阅读 · 0 评论 -
CSS边框应用 - 半透明边框
相信你以前肯定尝试过 CSS 中的半透明颜色， 比如 rgba() 和 hsla()。半透明颜色是 2009 年发生的一场重大变革。 从那以后， 我们终于可以在网页设计中使用它们了， 但是为了尝鲜还需要付出额外的代价。 .parent { background-color: teal; padding: 50px; height: 500px; width: 800...原创 2018-06-07 22:35:03 · 9641 阅读 · 0 评论 -
CSS边框应用 - 多重边框
当背景与边框还在草案阶段时，CSS 工作组内部有过很多讨论，关于是否应该允许多重边框，就像多重背景那样。不幸的是，当时一致认为这个特性并没有足够多的使用场景，而且网页开发者还可以使用border-image 来达到相同的效果。然而工作组忽略了一点：我们通常希望在CSS 代码层面以更灵活的方式来调整边框样式。可能会使用多个元素来模拟多重边框。box-shadowbox-shadow：none | &...原创 2018-06-08 14:05:43 · 835 阅读 · 0 评论 -
CSS - less
LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能。我的less的测试是基于angular-cli基础学习的。首先明确，本地静态测试不了，必须依赖于服务器。npm install less@latest --save-devangular-cli.json修改如下："defaults": { "styleExt": "...原创 2018-06-13 17:20:07 · 741 阅读 · 0 评论 -
CSS - 定位
基本概念利用定位，可以准确的定义元素框相对于其正常位置，相对于父元素或者相对于浏览器的相对位置。position：static | relative | absolute | fixed static：对象遵循常规流。此时4个定位偏移属性不会被应用。relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流...原创 2018-06-19 22:51:35 · 1462 阅读 · 0 评论 -
w3c标准 - Css - （4）CSS定位方案
w3c标准 - Css - （4）CSS定位方案 1. 定位之前看一下BFC（1） 解释 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域与外部毫不相干。（2）布原创 2017-04-03 21:36:58 · 1604 阅读 · 0 评论 -
CSS - flex
CSS2.1定义了四种布局方式，由一个盒与其兄弟，祖先盒的关系决定其尺寸与位置的算法。块布局：呈现文档的布局模式。行内布局：呈现文本的布局模式。表格布局：用表格呈现2D数据的布局模式。定位布局：能够直接地定位元素的布局模式，定位元素奴基本与其他元素没有任何关系。CSS3引入的flex布局，主要思想是让容器有能力控制子项目的高度，宽度（设置顺序）。以最佳方式填充可用空间（主要是为了适应所有类型的显示...原创 2018-06-24 19:00:01 · 1450 阅读 · 0 评论