目录------------
一.选择器;
二、特殊性(优先级);
三.文本相对长度单位;
四.盒子模型;
五.
利用CSS画图
一.选择器;
1.
ID选择器:以#开始,引用时使用id,如id="div1"
2.类选择器:以.开始,使用class属性引用,可以有多个,如class="cls1 cls2 cls3"
3.标签选择器:以标签名称开始,如p,span,div,*
4.伪类选择,a:hover,a:link,a:visted,a:active。
1.1、基础的选择器
其中:
p.info的意思是p元素中必须有class="info"属性将被选择,p .info是选择后代元素
1.2、组合选择器
1.3、属性选择器
1.4、伪类
1.5、伪元素
二、特殊性(优先级);
三.文本相对长度单位;四.盒子模型;
五.
利用CSS画图
a)、同类型,同级别的样式后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
d)、具体 > 泛化的,特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)
内嵌样式:内嵌在元素中,span
内部样式表:在页面中的样式,写在中的样式
外联样式表:单独存在一个css文件中,通过link引入或import导入的样式
f)、!important 权重最高,比 inline style 还要高
三.文本相对长度单位;四.盒子模型;
五.
利用CSS画图
em
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
(相对父元素的字体大小倍数)
rem
rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
(相对是的HTML元素的字体大,默认16px)
可以利用rem在变屏幕变宽时元素大小也随之发生变化,但这里并没有考虑高度,但为响应式布局与hack提供了思路。
四.盒子模型;
五.
利用CSS画图
盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。
content-box
: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding,但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。
border-box
: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,当box-sizing: border-box时的宽度设置会包含border与padding,但不包含margin,但margin也会占用位置。
五.
利用CSS画图
1.三角形
2.心形
(未完 待更新~~~ 前端新人,如有错误,欢迎指正!)