![](https://img-blog.csdnimg.cn/2020081109294225.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
CSS
Lomon6
Talk is cheap ...
展开
-
关于body的背景
body背景画布 canvas一块区域特点:最小宽度为视口宽度最小高度为视口高度HTML元素的背景覆盖画布BODY元素的背景如果HTML元素有背景,BODY元素正常(背景覆盖边框盒)如果HTML元素没有背景,BODY元素的背景覆盖画布关于画布背景图背景图的宽度百分比,相对于视口背景图的高度百分比,相对于网页高度背景图的横向位置百分比、预设值,相对于视口背景图的纵...原创 2019-08-08 11:01:45 · 435 阅读 · 0 评论 -
块级格式化上下文
文章目录定义常规流块盒的布局特点BFC的渲染区域如何触发BFC(常见举例)元素触发BFC后的特点定义块级格式化上下文简称BFC:规定了在该区域中,常规流块盒的布局方式常规流块盒的布局特点常规流块盒在水平方向上必须撑满包含块(即margin+border+padding+width在水平方向上必须撑满外层元素)常规流块盒在包含块的垂直方向上依次摆放常规流块盒若外边距无缝相连接,则进行外...原创 2019-09-08 14:42:44 · 70 阅读 · 0 评论 -
块级格式化上下文
定义:块级格式化上下文简称BFC,是一块独立的渲染区域,它规定了在该区域中常规流块盒的布局详细解释:1. 块级格式化上下文简称BFC,是一块独立的渲染区域,它规定了在该区域中常规流块盒的布局常规流块盒的布局1.水平方向:常规流块盒水平方向上,必须撑满整个包含块2.垂直方向上:常规流块盒垂直方向上一次排列3.高度塌陷:常规流块盒的自动高度和摆放位置,无视浮动元素4.margin合并...原创 2019-08-07 20:52:13 · 169 阅读 · 0 评论 -
web字体和字体图标
web字体和图标web字体用户电脑上没有安装相应字体,强制让用户下载该字体使用@font-face指令制作一个新字体格式如下: /* 制作一个新的字体,名称叫做good night */ @font-face { font-family: "good night"; src: url("./font/晚安体.t...原创 2019-08-08 20:44:42 · 409 阅读 · 0 评论 -
属性值的计算过程
属性值的计算过程一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行渲染每个元素的前提条件:该元素的所有CSS属性必须有值一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程属性值的计算详细步骤确定声明值层叠冲突使用继承使用默认值总结特殊的两个CSS取值:inherit:手动(强制)继承,将父元素的值取出应用到该元素in...原创 2019-08-08 16:42:44 · 573 阅读 · 0 评论 -
css的三大特性
文章目录继承性层叠1. 比较重要性2. 比较特殊性3. 比较源次序应用优先级继承性子元素会继承父元素的某些CSS属性通常,跟文字内容相关的属性都能被继承特殊性:①. a标签的颜色不能继承,必须对a标签本身进行设置②. h标签的字体大小不能修改,必须对h标签本身进行修改层叠声明冲突:同一个样式,多次应用到同一个元素层叠:解决声明冲突的过程,浏览器自动处理(权重计算)1. 比较重要...原创 2019-08-08 16:12:42 · 114 阅读 · 0 评论 -
居中总结
文章目录居中总结行盒(行块盒)水平居中常规流块盒水平居中绝对定位元素的水平居中单行文本的垂直居中行块盒或块盒内多行文本的垂直居中绝对定位的垂直居中居中总结居中:盒子在其包含块中居中行盒(行块盒)水平居中直接设置行盒(行块盒)父元素text-align:center常规流块盒水平居中定宽,设置左右margin为auto绝对定位元素的水平居中定宽,设置左右的坐标为0(left:0, r...原创 2019-08-08 11:35:55 · 172 阅读 · 0 评论 -
堆叠上下文
文章目录堆叠上下文创建堆叠上下文的元素同一个堆叠上下文中元素在Z轴上的排列堆叠上下文堆叠上下文(stack context),它是一块区域,这块区域由某个元素创建,它规定了该区域中的内容在Z轴上排列的先后顺序。创建堆叠上下文的元素html元素(根元素)设置了z-index(非auto)数值的定位元素同一个堆叠上下文中元素在Z轴上的排列从后到前的排列顺序:创建堆叠上下文的元素的...原创 2019-08-08 11:35:17 · 153 阅读 · 0 评论 -
深入理解字体
文章目录参考线-深入理解字体文字font-size行高vertical-align可替换元素和行块盒的基线行盒的垂直对齐多个行盒垂直方向上的对齐图片的底部白边参考线-深入理解字体font-size、line-height、vertical-align、font-family文字文字是通过一些文字制作软件制作的,比如fontforge制作文字时,会有几根参考线,不同的文字类型,参考线不一...原创 2019-08-08 11:30:16 · 344 阅读 · 0 评论 -
html+css中的项目案例小点
文字超过指定最大宽度,超出部分隐藏并用···代替 <style> a{ text-decoration: none; } a:hover{ background: plum; } div{ height: 20px; ...原创 2019-09-09 10:27:48 · 1137 阅读 · 0 评论