css:
1.导入
导入样式文件的四种方法:行内式、嵌入式、链接式、导入式
link与@import的区别:1.link属于链接式,与页面同步加载;而@import属于导入式,在页面加载完毕后再去加载css,容易造成延时。2.link是标签,用在head标签内;@import是规则,先于其他所有规则加载,用在style标签内,style标签用在head标签内。3.link不存在兼容问题,而@import是css2.1提出的,只能被ie5以上识别。4.在非模块开发中尽量不使用
@import,当有多个独立的css文件时使用link方式引入;在模块开发中,使用webpack工具开发时,有依赖的css文件只能用@import引入,最后构建好的文件将css合并,不会出现import。5.link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import 是CSS提供的,只能用于加载CSS。6.import在网速慢时会出现闪烁。
(错误)
题解:见shadow 介绍dom【在这种情况下link也有可能出现闪烁】
FOUC,也就是 flash of unstyled content,指的是网页渲染时,外部样式还没加载好,就以浏览器默认样式短暂地展示了部分内容,等到外部样式加载完成,又恢复正常的这个页面闪烁的过程
2.css3盒模型 box model
W3C标准盒子模型:
width与height为content部分的属性,盒子总长宽为width+border+padding+margin(left and right)与height+border+padding+margin(top and bottom)
ie怪异盒模型:
width与height为margin内部分属性,content部分长宽为width-border-padding(left and right)与height-border-padding(top and bottom),盒子总长度为width+margin(left and right)与height+margin(top and bottom)。
box-sizing属性可以指定盒子模型种类,content-box指定盒子模型为W3C(标准盒模型),border-box为IE盒子模型(怪异盒模型)。inherit为从父元素继承该属性的值。padding-box(另)指的是width和height属性包括padding的大小,不包括border和margin。
3.行内元素和块级元素
区别1:display:block块级元素 display:inline行内元素,可以用该属性切换行内元素和块级元素
区别2:块级元素占一整行,默认情况下宽度自动填满父元素,行内元素顺着一行排列;块级元素可以指明宽度高度,但仍然占据一行,行内元素不可以设置,由内容大小来决定宽高。
区别3:块级元素可以设置maigin padding,而行内元素可以使用margin padding的水平方向来设置左右边距,但竖直方向不能产生边距效果。
区别4:块级元素可以包含行内元素和块级元素,行内只能包含文本和其他行内元素。
行内元素的特性:
1.可以与其他行内元素在同一行内,不用另起一行。2.宽度,高度,顶部,底部距离设置不起作用。3.高宽由内容决定
(1)行内元素有:a b span(常见内联容器,文本内区块) img input select (表单控件,用于在表单中接收用户输入)strong(强调的语气,加粗)
(2)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4… p
空元素:没有闭合标签,意思是开始标签与结束标签内没有内容,所以叫空元素
常见的空元素:
<br>、<hr>、<img>、<input>、<link>、<meta>
鲜为人知的是:
<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>
display:
block是块级元素,能设置宽高,margin/padding都有效前后都有换行符
inline设置宽高无效,margin,padding在竖直方向无效,前后无换行符
inline-block可以设置宽高,margin/padding有效,前后无换行符
为什么img作为行内元素可以设置宽高,margin与padding也不受影响:
img是可替换元素,这类元素的展现效果不是由CSS来控制的。他们是一种外部对象,外观的渲染独立于CSS。内容不受当前文档的样式影响,CSS可以影响可替换元素的位置,但是不会影响到可替换元素自身的内容。(比如iframe,可能有自己的样式表,不会继承父文档的样式)
可替换元素有内置宽高,性质同设置了inline-block一样。
4.伪类和伪元素
参考:伪类和伪元素 - 学习 Web 开发 | MDN (mozilla.org)
应用类:
在标签内添加class="first",在css文件中添加.first{其中为对该标签内容添加的样式}
伪类:一种选择器,帮助选择特定的元素并对其施加样式,表示向文档的某个部分应用了一个类,以冒号开头的关键字。例如::first-child表示应用在该标签相应第一个元素上
:last-child
:only-child
匹配没有任何兄弟姐妹的元素:invalid
任意内容未通过验证的 <input> 或其他 <form> 元素 .
用户行为伪类::hover指针指向激活(多见于鼠标悬浮效果) :focus键盘选定激活
伪元素:类似于向文档中添加元素,而非向某部分应用类。创建一些文档语言无法创建的虚拟元素,或者创建不存在的元素。
::first-line
::first-letter
::grammar-error
::spelling-error
::after ::before(配合content使用向文档中添加内容,具体应用有插入图标作为视觉提示,但不希望屏幕阅读器读出它,使用伪元素添加的不会被屏幕阅读器读出。)
5. css选择器
选择器参考手册:CSS 选择器参考手册 (w3school.com.cn)\
按照以下顺序权值从大到小:
!important 在css样式的某个属性后添加,最高优先级
内联样式:将css样式直接编写在标签的style属性中
id选择器 #id{}
class选择器 .class{}(同伪类选择器和属性选择器)属性选择器如下:
元素选择器 p{} div{}(同伪元素选择器)
通配符选择器 *{}(同子选择器 h1>strong{},相邻选择器)如下:
继承的样式没有权值