CSS随笔记录20210105

CSS复习：

文本样式：

属性	含义	说明
justify	水平对齐
word-spacing	单词间距
letter-spacing	字母间距
text-indent	文本缩进
text-align	文本对齐方式	<center>标签：对文本进行居中排列
text-transform	调整文本大小写	*capitalize 对单词首字母进行大写处理
text-decoration	文本装饰	*blink 大多浏览器不支持(本意：文本闪烁) 文本装饰可以采用多条属性结合    *eg:    text-decoration:underline overline;  两属性之间用空格隔开
white-space	处理单词之间空格与换行	pre：保持原有文本字样；pre-line：与pre相比，多出自动换行与空白符合并； nomal：不保持原文样式，去除多余空格与换行符，并且自动换行； nowrap:英文翻译为不换行 (不自动换行,不保留换行符); pre-wrap:结合pre与wrap，在pre基础上增加自动换行
drection	文本方向	两个属性：ltr   rtl => left to right 与 right to left 意为从左到右 从右到左

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

字体：

属性	含义	说明
font-family	声明字体库	eg:{font-family:sans-serif}
font-style	字体风格	normal / italic / oblique 后两者都是倾斜，效果类似
font-variant	字体变形	normal / small-caps 显示小字体大写字符
font-weight	字体粗细	normal / bold / bolder / lighter 或者 直接采用数值设置字体大小  eg：400等同于nomal，700等同与bold
font-size	字体大小	xx-small ··· medium ··· xx-large  smaller 或 larger  相对与父元素更小或更大 length  eg:{font-size:50px} 或 {font-size:50} 　　　　浏览器默认字体大小为1em/16px  %  基于父元素，设置相对大小

 

 

 

 

 

 

 

 

 

 

 

 

 

列表&表格：

属性	含义	说明
list-style-type	列表样式类型	常规样式：circle(小圆圈) square(方块) decimal(数字) lower-roman&upper-roman(大小写罗马数字)等
list-style-image	列表图片样式	可用图片作为列表标志
list-style-postion	列表样式定位	inside outside 区别 inside 相当于对outside进行缩进
border	边框	可设置边框宽度，样式，颜色
border-collapse	单一边框	痛点：border会为各元素生成独立边框，不美观 将重叠的边框改成单一边框,只需在table样式中增加 table-collapse:collapse
vertical-align	垂直对齐	top bottom center 可结合text-align调整文字位置

 

 

 

 

 

 

 

 

 

 

 

 

框模型：

框模型 (Box Model) KEY

由内到外：元素长宽   --->   内边距padding   --->   边框border   --->   外边框margin

　　　　*  元素色彩显示区域为边框(border)内，元素长宽 + 内边距(padding)长宽，外边框(margin)透明无色

属性	含义	说明
padding	内边距	可设置为四种形式。单值则四周同值；双值则上下，左右同值；三值则一三两值为上下，第二值为左右；四值设置顺序为上 右 下 左； padding-left right bottom top 分别设置四条边内边距； 当设置长度时使用%，数值相对于父元素大小计算
border-style	边框样式	可设置为四种形式。单值则四周同值；双值则上下，左右同值；三值则一三两值为上下，第二值为左右；四值设置顺序为上 右 下 左； 与border-left-style;border-top-style;border-bottom-style;border-right-style等价 对图片，链接等都适用。 ***若要设置元素边框，则得先声明border-style；若发生只设置边框宽度，无边框样式，则无法显示边框
border-width	边框宽度	设置形式与上述border-style类似，这里称之为四值原则。 可对宽度进行值赋值，或适用三个关键词 thin 、medium（默认） 和 thick； 三个关键词无准确像素大小，在不同情况可能有不同数值
border-color	边框颜色	边框颜色设置满足四值原则。 赋值方式包括：颜色名，RGB，十六进制。 如果未设置边框颜色，则边框将继承文本颜色；如果发生少数情况，当前元素无颜色，则继承父元素颜色； ***若要设置透明边框，则设置border-color为transparent
margin	外边距	外边距设置满足四值原则。 当设置长度时使用%，数值相对于父元素大小计算; 特殊情况：在普通文档流中 　　　　　1. 如果两个元素处于上下临近状态，并且接触面设置margin，则接触面的margin数值不会叠加，而是采用高度较大者； 　　　　　2. 如果两个元素处于内外包含状态，并且接触面设置margin，则上下接触面margin也不会叠加，而是采用高度较大者； 　　　　　3. 如果一个元素无填充，而设置相对面的margin，则上下面margin会合并，变成一个外边距 (测试时未合并...)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CSS定位：

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

属性	含义	说明
relative	相对定位	相对定位的元素框会根据对应的参数进行偏移，元素原形状不变，原来占据的空间不变，但会覆盖其他元素
absolute	绝对定位	绝对定位元素会脱离文档流，该元素像是变成上一级图层，不占据空间； 绝对定位的位置以最近一个已定位的元素为依据
fixed	固定定位	固定定位类似于绝对定位，其区别在与fixed相对屏幕窗口来确定元素位置。
float	浮动	元素可在页面的左右两边进行浮动，且位置不处于普通流中；