CSS day_02(6.13) 尺寸与边框、框模型 、 背景

一、伪元素选择器

伪元素选择器是给选中的元素增加附加内容 ::before 指在元素内部的最前面增加指定的内容 ::after 指在元素内部的最后面增加指定的内容 content属性是必写属性，值可以为空，但必须写 我们还可以对content内容进行样式设置

/* 在每条论语前加 子曰： */ li::before {     content: '子曰：';      color: gold; } /* 在每条论语后加 --摘自《论语》 */ li::after {      content: '--摘自《论语》'; }

二、CSS样式优先级

1. 优先级原则

1. 当多个选择器发生冲突，渲染同一个元素，样式不同会同时生效，叠加效果 2. 相同的选择器，会按照顺序渲染，如果设置的属性值不同，后面的会覆盖前面的 3. 在CSS中，有一些属性是具有继承特性的，也就是父元素的CSS属性会传递到子元素上 4. 最近的祖先样式比之前的祖先样式优先级高，就近原则 5. 指定样式的优先级高于继承过来的样式

2. 选择器的不同权值计算

选择器	权值
!important 优先级最高	10000
style="" 行内(内联)样式	1000
id选择器	0100
类 伪类 属性	0010
标签 伪元素	0001
通配* 子选择器> 相邻兄弟选择器+	0000
继承样式	无

权值大的优先渲染

顺序：!important>行内样式>ID选择器>类选择器>标签选择器>通用选择器>继承样式>浏览器自带样式

权值跃进，组合的权值会累加，但不会越级，比如11个类选择器，值不是10*11=110，而是99.9,不会越到下一级

优先级记忆诀窍：控制范围越大的，优先级越低

三、CSS中的值和单位

1. CSS中的颜色表示法

色值：color background-color border-color......

2. CSS中的尺寸表示法

in英寸 cm厘米 mm毫米 生活中的单位 编程很少使用 px像素（Pixel）屏幕中最小的一个发光单位，绝对单位 %百分比 指的是占父元素的百分比 em倍率  1em表示1倍的当前字体大小 rem倍率  2.5rem指的是2.5倍的html元素的字体大小 数字，没有任何单位，透明度

3. CSS中的时间与角度

时间单位：1s=1000ms 多数显示器是由刷新率的，一般是60Hz，一秒刷新60次，间隔约为16.7ms

角度单位：0~360 度的单位deg ,可以有负数 270deg=-90deg

四、流与文档流

流Stream: 车流 水流 多个对象的有序排列称为流

文档流： 网页中的多个对象，有序排列，形成了文档流，也称为元素流 比如：块级从上往下排列，行内元素从左往右排列，流式布局最为稳定 文档流中元素的特点： 1）依次紧密排列，中间不能出现大的空白，多个div/span在竖直/水平方向紧挨着 2）流中的元素绝对不可能出现一个元素摞在另外一个元素上面的现象 如果项目中需要使用叠摞的效果，需要脱离文档流(后面学！)

五、页面元素的显示模式

一个HTML元素可以有多种显示模式：

块级元素 —— display:block; 常见标签：div h1~h6 p form table ul li body... 排列方式：按照标签的书写顺序从上往下依次排列 特点： 独占一行(一行指的是占父元素的100%) 可以设置宽度与高度

行内元素 —— display:inline; 常见标签：span a i b u .... 排列方式：按照标签的书写顺序从左向右依次排列 特点： 可以和其它元素共处一行，一行放不下才显示在下一行 无法使用height与width设置宽高，行内元素的大小是靠内容撑起来的 img是一个特殊的行内元素，作为行内元素也可以设置宽高

行内块元素 —— display:inline-block; 常见标签：input button .... 排列方式：按照标签的书写顺序从左向右依次排列 特点： 可以和其它元素共处一行（行内） 可以设置宽度与高度（块级）

六、盒子模型

1. 默认的盒子模型

 

1. 默认的盒子模型

一个HTML元素，内容需要占用页面空间、内容与边框间距可能也要占用布局空间、当前元素与其它元素间的距离可能需要留白，这些空间的总和称为"元素页面局部空间"

1. 蓝色部分：内容空间，比如一张图片、一些文字 2. 绿色部分：内间距padding,是内容到边框间的距离(填充物) 3. 黄色部分：边框border 4. 橙色部分：外间距margin,是元素与元素之间的距离

一个元素在水平方向上占用的总空间： 左外间距(margin-left)+左边框(border-left)+左内间距(padding-left)+元素本身的宽度(content)+右内间距(padding-rigth)+右边框(border-rigth)+右外间距(margin-rigth) 一个元素在竖直方向上占用的总空间： 上外间距(margin-top)+上边框(border-top)+上内间距(padding-top)+元素本身的高度(content)+下内间距(padding-botton)+下边框(border-botton)+下外间距(margin-botton)

7 边框

1边框的不同写法

对边框进行综合设置(最常用) border: 1px solid #f00; 粗细 线型 颜色 不存在顺序问题

如果有的元素默认有边框，想去掉边框时使用 border：none；

设置所有边框的颜色border-color: #00F; 设置所有边框宽度border-width: 20px; 设置所有边框的线型border-style: solid; (solid单实线 dashed破折线 double双实线)

设置某一个方向的边框 上边框border-top: 1px solid #f00; 右边框border-right: 1px solid #f00; 下边框border-bottom: 1px solid #f00; 左边框border-left: 1px solid #f00;

单独设置某一边框的颜色border-right-color: #000; 单独设置某一边框宽度border-left-width:5px; 单独设置某一边框的线型border-top-style: dashed;

2 边框的巧妙用法

学子商城首页搜索有个小三角，除了可以通过图片实现以外，还可以通过边框来实现： 写三角形需要派出一个块级元素(宽高可设) 不需要在元素中增加文字内容 一个元素在网页中的形状是矩形，可以依靠它的边框来完成

八、 拓展

1. 幽灵空白节点

内联元素(行内+行内块)因为自身与文字是同级的，天然携带一个叫做"幽灵空白节点"的文字节点

如果需要去掉幽灵空白节点的内联元素可以变为块级display:block;

幽灵空白节点其实就是内联元素下面的一条缝儿

注意：幽灵空白节点不是一定要去除的！根据具体情况看有没有需要

2. 块级元素与内联元素总结

3. verticle-align行内块元素

vertical-align: 行内块元素与同一行中的其他元素的竖直对齐方式

可取的属性值： baseline(默认值，基线)/top(顶线)/middle(中线)/bottom(底线) 提示：分处在两行中的行内块元素如果想在竖直方向上紧挨着，vertical-align可以取后3个值

第1条线叫顶线：top 第4条线叫底线：bottom 第3条线叫基线：baseline，默认值 第2条线没有名字，我们不使用这条线 还有一条表示上下正中间的中线：middle 印刷体的字母与顶线间也是有留白的，不是顶着线写