css的小知识3

1.补充

margin的margin:0 auto;会解决元素的居中,前提是给这个元素设置width

2.css的层叠问题

css有两个性质

  1.继承性

  2.层叠性  选择器的一种选择能力,谁的权重大就选谁

    A,选不中,走继承性,(font color text)继承性的权重是0

      a)有多个父级都设置了就这样 走就近原则

    B,选中了

      a)权重的问题,权重大,就选谁的样式

      b)权重相同,谁在后选择谁

      c)纯标签和类没有可比性,纯类和id也没有可比性。

3,标准文档流

  浏览器的排版是根据元素的特征(快和行级),从上往下,从左往右排版。这就是标准文档流。

  浮动 folat:left/right;

  效果:元素都加浮动,后面的元素会紧跟这前面的元素并排列。

A,只要加了float,这个元素就会脱离标准文档流。

第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就把他排在第一位。而第一个仍然存在,所以就会叠加。

行级加float

行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,能并排排列。

Display就没有任何意思了。

B,浮动的元素会紧紧贴靠在一起

C,浮动的元素会文字环绕

拓展 使元素脱离标准流的方法

  1. 浮动float

  2. 绝对定位position:absolute;

  3.  固定定位positions:fixed;    fixed固定的

浮动带来的坏处

  1,给元素加了浮动,撑不起父级的高度了

清除浮动的方法

  1.给浮动的fu元素添加高度

  2.给父级添加overflow:hiden;

  3.给浮动元素的后面添加一个空的 div 添加样式为clear:both

  4.给浮动元素的父级添加一个叫clearfix

  这个类写的样式属性有

伪类选择器

  只要选择器后面带;都可以说他是伪类选择器

  a:link{}      a:hover{}  a:visited{}         a:active{}  a:after{}  abefore{}

a的四种状态的顺序不能变

伪元素 和伪类选择器的区别

伪元素有两个冒号   如p::after{}    伪类选择器有一个冒号p:hover{}

原文地址:https://www.cnblogs.com/guhuai/p/9651470.html

时间: 2024-10-05 21:40:54

css的小知识3的相关文章

HTML+css零碎小知识

1.设置了float浮动的元素和绝对定位position:absolute的元素会脱离正常的文档流.但是设置absolute的元素不会占据空间,相当于隐形了. 2.相对定位position:relative是指相对于文档流中的其它已经定义的元素位置进行定位.在不设置top/left/right/bottom/Z-index等值的情况下和默认值static表现一样. 3.绝对定位position:absolute是相对于上一个不为static默认定位的父元素进行绝对定位.若父元素没有指定posit

css + html 小知识总结

Html+CSS基础之Html 注:本文摘自慕课网http://www.imooc.com   HTML+CSS基础课程: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下拉菜单.或鼠标滑过表格的背景颜色改变.还有焦点新闻(

12个css小知识

1.CSS的color属性并非只能用于文本显示对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方.它可以把页面上的所有的东西都变颜色.比如:无法显示的图片的alt文字list元素的边框无序list元素前面的小点有序list元素前面的数字还有hr元素 2.CSS里的visibility属性有个collapse属性值:collapse对于CSS里的visibility属性,相信你用过不下

12个你未必知道的CSS小知识

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员都使用过.如果你并不是一个特别有经验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方. 请注意,上面的代码里只使用了一个color属性,就是在body元素上,设置成了yellow.但是,你也看到了,所有这个页面上的东西都变成了黄色

11个提高CSS技巧的小知识,你知道吗?

前端开发越来越侧重于效率和性能,使用LESS和SCSS资源的预处理器为我们前端CSS编写工作提供了很大的便利.但是也有很多简单的方法可以编写小巧快速的CSS代码,提高开发效率并解决许多常见的问题. 1.使用CSS reset 像normalize.css这样的CSS重置库非常受欢迎,它为您的站点样式提供了一个清爽的选择,能确保浏览器之间更好的一致性.而实际上并不是每个项目都需要这些库中包含的所有规则,我们可以通过一些简单的css规则就能规避浏览器之间的差异.请看下面的盒模型代码: 1 * { 2

【前端词典】几个有益的 CSS 小知识

今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTM

几个有益的 CSS 小知识

样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 样式选择器中间的空格是什么?它的名字是 —— 后代选择器. 为什么会更消耗性能呢? 因为浏览器首先会找到所有p标签,然后再向上查找包含class为div标签.这样一来如果代码中有很多p标签,无疑是会做很多重复工作的. 所以可以减少使用 HTML 标签来定义 CSS 的方式,换成使用具体的class. 浏览器

html、css中常用的小知识记录

好多东西过一段时间不用就忘记了,为此写了这篇文章,用来记录每次想不起来的小知识! 1.鼠标停留显示提示,使用title .如:title

Android 48个小知识

1.判断sd卡是否存在 boolean sdCardExist = Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED); 2.TextView部分文字设置颜色 TextView tv = new TextView(this); //添加css样式 tv.setText(Html.fromHtml("<font color="#ff0000">红色<