首页 > 开发 > 前端 > 正文

CSS的一些基础知识总结

2017-07-12 18:00:20  来源:慕课网
什么是层叠样式?

浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。
覆盖的默认规则是后者覆盖前者
!important可以改变这种规则

浏览器如何渲染页面?

浏览器将载入的html变为dom树,但是此时没有任何显示样式。所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式,换句话说,标签从本质上来讲都是只是语义上的,浏览器默认样式为这些语义标签设置了样式

p {display:block} // p 默认设置的样式
li {display:list-item} // li 默认设置的样式
table{display:table} // table 默认设置的样式
h1{font-weight:border}不是天生的粗体,而是设置了font-weight:bolder的样式而已
* 号

号用于全局样式重置,但是选择器在遇到标签选择器时,是不会起作用的,及时它是“后加载”的。

strong 和 b 的区别?

b和i是样式上强调。
strong和em是语义上强调。

inline-block 是什么?

能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一整行

<img>元素底部为何有空白?

img是行内元素, 与其它元素对齐方式 默认是基线对齐,通过设置父容器的 font-size=0 其它元素的底线和基线重叠,从而消白边

关于行高

行高是指文字之间基线的距离,其值等于顶线和底线的距离

多标签选择器

选择一个祖先的所有子孙节点,例如 div p{…}
选择一个父元素的所有直属节点,例如 div > p{…}
选择某一个元素紧挨着的兄弟节点,例如 li + li{…}

属性选择器

属性选择器有两种情况:
只通过属性名选择:img[title]{… }
通过属性名和属性值选择:input[type=’text’]{…}

伪元素选择器

:before和:after 他们都有一个 content的属性 可以加入字符

选择器的优先级

!important优先级最高,高于上面一切。* 选择器最低,低于一切。

遇到一个id就往特指度数值中加100,遇到一个class就往特指度数值中加10,遇到一个element就往特指度数值中加1

盒子模型

设置的宽度都是内容宽度,不是整个盒子的宽度。

而整个盒子的宽度是:(内容宽度 + border宽度 + padding宽度 + margin宽度)之和

box-sizing:border-box

设置了box-sizing:border-box之后,300px的宽度是内容 + border + 边框的宽度(不包括margin),这样就比较符合我们的实际要求了。

纵向margin的重叠

重叠并不是 BUG,而是在设置 margin 后不会出现文字上下双倍边距的情况

float

使用 float 的真实效果是使元素脱离文档流,并在内容分布上形成新的格局,从立体角度上讲,元素上浮了一层,下面的元素取代了原有浮动元素的位置, 从二维角度上来看,给整个页面划分了几个格局, 就好比是在田地里划分了篱笆地.

相对定位

relative会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。

absolute元素脱离了文档结构。

absolute定位起点是设置了相对定位的父元素,而并非直接父元素

解释一切的力量 BFC

浮动、绝对定位元素(position 为 absolute 或 fixed)、行内块元素 display:inline-block、表格单元格 display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素(除了该值被传播到视点 viewport 的情况)将创建一个新的块级格式化上下文。

BFC 的副作用

一个新的BFC可以通过给容器添加任意一个必要的CSS样式来创建,比如overflow: scroll,overflow: hidden,display: flex,float: left,或 display: table。尽管上述条件都可以创建BFC,但也会产生一些其他效果,如:

display: table 可能引发响应性问题
overflow: scroll 可能产生多余的滚动条
float: left 将把元素移至左侧,并被其他元素环绕
overflow: hidden 将裁切溢出元素
BFC 的作用

BFC 相当于划分出一块相对独立的区别,这个区别的修改不会影响到页面上的其它区别, BFC 可以包含浮动