CSS基本样式和盒子模型基础
1.CSS样式表的引用方法
1.1、外部文件引用方法
link Rrel=" style sheet " href=" my style . CSS "
1.2，用@import引用外部CSS文件。
@导入URL(my style . CSS)；
1.3.内部文档标题模式
1.4.内联样式表style=" color:redfont-size:10pt" /
2选择器
2.1基本选择器
标签/。class/#id/*通配符
2.2属性选择器
[名称]匹配所有具有属性名称的元素。
[name=test]与属性name=test匹配的元素。
[name~=test]属性中包含的独立单词是value。
在[attribute*=value]属性中做字符串拆分，只要是word值就可以拆出；
[name
=test]属性必须是完整且唯一的单词，或者用
[name= test]属性的前几个字母应该是value。
[属性$=值]以值结尾。
2.3复合选择器：
后代选择器(空格)
子选择器()
兄弟选择器(~):选择以下所有兄弟元素。sub ~p p。
邻居选择器():选择下一个元素。子p。
交叉点选择器(。方框#atr)
联合选择器(。方框，#atr)
2.4伪元素选择器(两个冒号)
:之前
:after
:选举
:首字母(仅适用于块级元素，缩写)
:首行(只能用于块级元素，首行)
2.5伪类(冒号)
:链接
:次访问
:悬停
:活动
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-size:偶数
font-style : unset/normal/inherit/initial；
Font-variant:small-caps小写字母大写状态
Font-weight:数字(1-100)/粗体/正常/黑色/浅色；
4.2文本
Color :color3354 # ffffff，RGB (255，255，255)，关键字(红色)，rgba()
Align : text-align 3360水平对齐/居中/左/右/开始/结束；
垂直对齐：-垂直对齐3360中间/文本-顶部/文本-底部；
修改线： text-decoration 3360 none/下划线/线穿过/轮廓；
rtl方向： ltr；
indent : text-indent :2 em；
文本转换：text-transform:大写/小写/大写；
行高：行高33601.5 em(适用于单行数据)
:空白：新换行；断字：全断；
text-overflow :省略号；
示例：单行文本换行处理
空白： nowrap；
text-overflow :省略号；
溢出：隐藏；
字间距为：字间距；
字符间距为：字母间距；
4.3背景
背景色：
背景-image : URL()；
背景-repeat : repeat；不重复；重复-x；重复-y；
背景-位置：direction px方向px；(左/右/上/下只写一个参数时，默认值是居中；默认位置的左上角)
背景-附件： fixed；loacl滚动；
background-size :封面；包含；100% 100%;
5.箱状模式
5.1.元素分类
区块标签区块：专属线，可设定所有样式。
inline block标签inline-block:可以设置没有专属线的样式；
*Ghost spacing:不过中间会处理断行，完全贴不进去。*解决方案：标签放在一行上；父元素设置font-size :0；
内嵌标签inline:一行不独占，有些样式不能设置。
5.2.元素类型转换显示
display : inline-block
inline
block
flex
inline-flex
表格单元格
none
5.3.箱状模式
组成
内容：内容
填充：内边距
边框：边框
边距：外部边距
框大小=内容填充边框
计算方法
Width:箱宽套装
盒子尺寸
*content-box :标准盒模型，默认值，width=content-width；
*border-box:怪异(IE)框模型宽度=内容宽度填充宽度边框宽度；
padding-box : width=内容填充；
框定大小： border-box；//自动改变内容的宽度以适应设定的宽度
内容框；//默认值
填充
右上，左下；
上、下、左、右；
利润
重叠现象(外边距合并):边距为最大值。
塌陷现象：当父元素和子元素都是块级元素时；如果为第一个(最后一个)设置了margin-top(bottom ),父级将在相应的方向折叠；
外部边缘塌陷的示例：
div class="box "
div class=" box 1 " box 1/div
/div
. box.box1{
宽度： 200 px；
height: 200px
背景色：蓝绿色；
margin-top : 100px；
}。方框{
宽度： 400 px；
height: 400px
背景色：蓟；
}
