前端开发知识点之 css

zhaot 发布于2019-08-30 13:48 / 3106人阅读

摘要：两个性质继承性。有一些属性给祖先元素，所有的后代元素都集成上了。层叠性是一种能力，就是处理冲突的能力。有着严格的处理冲突的机制选择上了，数权重，的数量，类的数量，标签的数量。因为会让写的很乱。

CSS

css两个性质：
1） 继承性。有一些属性给祖先元素，所有的后代元素都集成上了。

哪些属性能继承：color、font-、text-、line-

这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。

2） 层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制：

选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。

没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。

css 权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

  /*权重为1*/
  div{
  }
  /*权重为10*/
  .class1{
  }
  /*权重为100*/
  #id1{
  }
  /*权重为100+1=101*/
  #id1 div{
  }
  /*权重为10+1=11*/
  .class1 div{
  }
  /*权重为10+10+1=21*/
  .class1 .class2 div{
  }

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现! important不允许使用。因为会让css写的很乱。

同一个标签，携带了多个类名，有冲突：

我是什么颜色？

Answer :都是红色的,因为css中red写在后面。

float 水平居中 垂直居中 layout

三栏自适应

圣杯布局 Holy Grail Layout

首先渲染主体部分

全部左浮动

contianer 用padding挤出左右两栏的空间

左右两栏利用负margin + 相对布局 + left／right 移到相应位置

双飞翼布局 Flying Swing Layout

首先渲染主体部分

全部左浮动

contianer第一个div中的main利用margin挤出左右两栏的空间

左右两栏利用负margin移到相应位置

二栏自适应

云服务器 GPU云服务器前端开发基础知识 html5前端开发css3 前端知识前端知识阿里云

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115561.html

前端开发知识点之 html &css

摘要：声明允许表现性元素，废气元素以及。众所周知强制属性就是为禁用图片时的兼容性作考虑。而正确的遵循标签的语义，则是保证禁用时的兼容性。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 HTML&CSS 大纲对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox doctype 声...

Scliang 2019-08-01 17:48 评论0 收藏0
前端开发知识点之 html &css

摘要：声明允许表现性元素，废气元素以及。众所周知强制属性就是为禁用图片时的兼容性作考虑。而正确的遵循标签的语义，则是保证禁用时的兼容性。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 HTML&CSS 大纲对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox doctype 声...

felix0913 2019-08-30 13:47 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
前端每周清单半年盘点之 CSS 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。它能够为我们提供类似于预处理器命名空间等多方面的辅助。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：f...

RaoMeng 2019-08-29 13:21 评论0 收藏0