2021-11-07 16:31:33
CSS基本风格和盒子模型基础
1、CSS样式表引用方式
1.1、外部文件引用模式
link Rrel="样式表" href="mystyle.css "
1.2.使用@import引用外部CSS文件。
@ import URL(my style . CSS)；
1.3.内部文档标题模式
1.4.直列式
table style=" color:redfont-size:10pt "
2选择器
2.1基本选择器
标签/。类/#id/*通配符
2.2属性选择器
[name]匹配所有具有属性名名称的元素。
[名称='test']与属性名称名称=test匹配的元素。
[name~='test']属性包含独立的单词值。
[attribute*=value]属性，只要可以拆分单词值即可；
[name|='test']属性必须是完整且唯一的单词，或者用-
[name=' test']属性的前几个字母是value。
[attribute$=value]以value结尾。
2.3复合选择器：
后代选择器(空间)
子选择器()
兄弟选择器(~):选择以下所有兄弟元素。sub ~p p。
相邻选择器():选择下一个元素。sub p。
交集选择器(。方框#atr)
联合选择器(。方框，#atr)
2.4伪元素选择器(两个冒号)
:之前
之后：
:选举
:首字母(仅适用于块级元素，首字母)
:第一行(仅适用于块级元素，第一行)
2.5伪类(一个冒号)
:link
:次访问
:悬停
:活动
3.样式优先级
3.1选择器重量
内嵌样式1，0，0，0
id 0，1，0，0
类，伪类，属性0，0，1，0
标记，伪元素0，0，0，1
通配符，选择器0，0，0，0
3.2 !重要的
3.3邻近原则(层叠式)
4、基础样式
4.1字体
font:style样式、变体、重量、尺寸/线高、系列
字体系列
字体大小：偶数
font-style : unset/normal/inherit/initial；
字体变量：小写字母大写状态
字体粗细：数字(1-100)
/bold/normal/bloder/light；
4.2文本
颜色：颜色—— # ffffff，RGB (255，255，255)，关键字(红色)，rgba()
水平对齐：文本对齐：对齐
/居中/左/右/开始/结束；
竖向定线
:垂直对齐：中间/文本顶部/文本底部；
装饰线条
: text-decoration : none/underline/line-through/overline；
方向： tr，RTL；
缩进： text-indent :2 em；
文本转换
: text-transform :大写/小写/大写；
行高：行高：1.5 em；(适用于单行数据)
换行： white-space : nowrap；word-break : break-all；
text-overflow :省略号；
示例：单行文本换行处理
white-space : nowrap；
text-overflow :省略号；
隐藏飞越：
字间距：字间距；
字符间距为：字母间距；
4.3背景
背景色：
背景-image : URL()；
背景-repeat : repeat；不重复；重复-x；重复-y；
背景-位置：方向px方向px；(当左/右/上/下只写一个参数时，默认为居中；默认位置左上)
背景-附件： fixed；loacl滚动；
背景尺寸：封面；包含；100% 100%;
5、盒模型
5.1.元素分类
块标签块：独占线，可设置所有样式。
内线块标签内联块：不要独占一条线，可以设置样式；
*鬼影间距：但会处理中间断行，不能完全贴合。
*解决方案：将标签放在一行上；父元素设置字体大小：0；
内嵌标签内嵌：不是一行独有的，有些样式无法设置。
5.2.元素类型转换display
display : inline-block | inline | block | flex | inline-flex | table-cell | none；
5.3.盒模型
5.3.1组成
内容：内容
填充：内部边距
边框：边框
边距：外部边距
框大小=内容填充边框
5.3.2计算方式
宽度：设置盒子的宽度。
盒子大小
* content-box3360标准盒子模型，默认值，宽度=content-width；
*边框-box3360怪异(IE)框模型宽度=内容-宽度填充-宽度边框-宽度；
padding-box : width=内容填充；
盒子大小：边框盒子；//自动更改内容的宽度以适合设置的宽度宽度。
内容盒；//默认值
5.4.padding
右上，左下；
上、左、右；
5.5.margin
重叠现象(外边距合并):边距采用最大值。
折叠现象：当父元素和子元素都是块级元素时；第一个(最后一个)设置了页边距-顶部(底部)，父级会向对应的方向折叠；
外部距离折叠示例：
div class="box "
div class=" box 1 " box 1/div
/div
. box.box1{
宽度： 200 px；
高度： 200 px；
背景色：青色；
边距-top : 100 px；
}。方框{
宽度： 400 px；
高度： 400 px；
背景-颜色：蓟；
}
