css 知识点

最新推荐文章于 2024-05-07 20:12:44 发布

weixin_42291794

最新推荐文章于 2024-05-07 20:12:44 发布

阅读量163

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42291794/article/details/108894463

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一. 元素

块元素
宽高，padding，margin，border都可以设置。
且影响布局，有视觉效果。
独自占一行。
内联元素
宽高不可以设置，为里面内容的宽高，高度完全由行高决定（行高默认为字体的1点几倍）。
padding和margin的左右，border可以设置，影响布局，且有视觉效果。
padding和margin的上下可以设置，不影响布局，有视觉效果。
与其他内联元素在一行。
内联元素的垂直padding会让幽灵空白节点显现。
行内块元素
和块元素类似，只是不独自占一行
宽auto的表现
最小宽度
最大宽度
包裹性自适应性
充分利用可用空间~外部尺寸

外部尺寸的情况：
正常流无宽度时。
绝对定位（absolute、fixed）且上下左右相对方向的属性同时存在时。相对属性不同时存在时表现为包裹性，即内部尺寸，由内部元素决定。

高的表现
高度由子元素撑起来。
高度auto时，值就为auto不能参与计算，子元素100%不生效。
当格式化高度时，即绝对定位时，和格式化宽度类似，高度auto为外部尺寸特性，有自适应性。
外部尺寸：尺寸由外部元素决定。
内部尺寸：尺寸由内部元素决定。
浏览器渲染：下载文档内容，加载样式资源，从上到下，从左到右，从外到内。先渲染父元素，再渲染子元素。父元素的宽度计算出具体值之后再计算子元素的100%。
min-width、min-height：默认为auto。
max-width、max-height：默认为none。
图片设置：max-width:100%;height:auto;
min、max优先级：超越！important，超越最大。
max-width覆盖width，覆盖!important。
min-width覆盖max-width。
width<!important<max-width<min-width
替换元素
内容可以被替换；内容即content，即盒模型中的content-box。
尺寸计算不受display值影响，规则优先级从低到高为固有尺寸，HTML尺寸，CSS尺寸。
替换元素去掉src会变成非替换元素，如img会和span一样。
替换元素和非替换元素的区别是有没有content或src。
基于伪元素的内容生成，:after:before的content。
伪元素是内联元素。
浮动元素
包裹性
自适应性
块级格式化上下文（设置浮动的元素，display会自动变为block或table）
破坏文档流（不在正常文档流上，浮起来）
父元素塌陷
浮动元素和行框盒子不重叠
图片的文字环绕
没有margin合并
设置clear属性的元素不与前面的浮动元素相邻；clear只对块元素有效。
定位元素
static：默认值，正常文档流。
relative：正常文档流，相对自己定位，保留原位置。
absolute：脱离文档流，层叠顺序改变，相对于最近的定位不为static的元素定位，不保留原位置。
fixed：脱离文档流，层叠顺序改变，相对于视口定位，不保留原位置。
BFC元素
元素设置BFC后，其内部子元素不会影响外部元素的布局。如浮动的父元素塌陷和margin合并都是影响外部元素的。
BFC和IFC：块级格式化上下文和内联格式化上下文。
触发BFC的情况：float不为none；position不为static、relative；overflow为auto、hidden、scroll；display为inline-block、table-cell、table-caption。
BFC自适应布局，设置BFC的元素，会自动填满除了浮动元素以外剩余的空间。
锚点
<a href=’’#con1’’ >

地址栏中的hash值和HTML中的id值一样会发生锚点定位。请求地址不包括锚点标志#及其后面的内容。

二. 属性

行高

vertical-align：baseline，x底边，替换元素下边缘。
vertical-align：middle，x交叉点
行高默认值为字体的1点几倍。
半行距=（行高—em-box）/2
半行距=（行高—字体）/2；
涉及属性：font-size、line-height、vertical-align、
空白字符处理规则：white-space（空格，回车，制表符）。
nowrap、pre-wrap、text-overflow:ellipsis
合并：所有空白字符合并为一个空格。
环绕：一行文字内容超出容器宽度时，会自动从下一行显示。

字符间距规则：word-spacing（只有空格）、letter-spacing（所有字符，包括字母、中文、空格）。
换行规则：word-break，word-wrap（overflow-wrap）。
上下行距近似相等实现垂直居中；中文字体下沉，半行距为3.5时，上半行距向上取整4，下半行距向下去整3。
em-box高度为1em，1em=font-size；em设置字体时，em相对于父元素字体大小的单位；em设置margin和padding时，em相对于当前元素的字体。
内容区域（内容区域与字体和字体大小相关，当为宋体simsun时内容区域和em-box相等），带背景色的区域。和设计图上量的（margin，font-size）文字上下边缘不一样，多出来了半行距。

纯内联元素：高度完全由行高决定。
替换元素：高度不受行高影响；行高影响的是幽灵空白节点的高度，决定内联元素的行框盒子的最小高度；行高要想有效果要设置得足够大，比图片高。图片和文字在一行，垂直对齐方式默认为基线。
块元素：高度不受行高影响；通过改变块元素里面的内联元素的高度来改变块元素的高度；块元素还可以通过改变盒模型中的其他属性来改变块元素高度。
在这里插入图片描述

font
font：[font-style||font-virent||font-weight]?font-size[/line-height]? font-family
font-size和font-family为必填，font-family可以随便写个系统不存在的字符。
？表示一个或零个，||表示或者。
@font-face规则
自定义字体
自定义字符小图标
字体重命名
字体默认样式设置

src
系统安装字体：local()
外链字体：url()
字体格式
ttf：android低版本
svg：ios低版本
eot：IE低版本
woff：web open font format万维网开放字体格式word wide web
woff2：
format：该功能符的作用是让浏览器提前知道字体的格式，以决定是否要加载这个字体，而不是加载完了之后再自行判断。

字体：本质上是字符集和图形的一种映射关系。字体图标就是把通常的字符映射成另外的图标形状。
字体图标：借助工具如iconfont. cn。
svg图标会代替字体图标。