CSS：层叠样式表（级联样式表）
作用：修饰html元素，美化元素外观；将结构与表现进行分离，方便维护应用与二次开发。
减少标签的嵌套：
1、嵌套层次深、编译性能低下
2、不利于seo优化
3、不利于二次开发与维护
书写规范：
1、头部样式
<head>
<style>
css 代码片段
选择器{
css样式属性：值；
css样式属性：值；
……
}
选择器{
css样式属性：值；
……
}
</style>
</head>
CSS 选择器（selector）
作用：匹配页面上需要修饰的元素（找元素）；
四大基本选择器：
1、通配选择器 :匹配页面的所有元素（html）
*{
css样式：值;
}
样式初始化
2、标签选择器:匹配某种特定类型的标记
标签名{ } a{} p{}
3、类选择器：匹配具备 class 属性的元素
<p class=”p1″></p>
.p1{
}
4、ID选择器 ： 匹配具备 ID 属性的元素
id：具备唯一性
<p id=”p1″></p>
#p1{
}
选择器是有执行权重的：优先级
通配<标签<类<id
常用css样式属性：
文本：
color:
font-size:16px | 2em;
font-weight:bold;
font-style:italic;
font-family:”字体”;
text-decoration: none | underline;
text-align:center| left| right | justify(两端对齐)
text-indent:2em; 文本缩进
边框：
border : 大小 类型 solid ｜dashed ｜ double 颜色；
border-left：
border-right：
border-top:
border-bottom:
border-radius:边框倒角
背景：
background-color:背景色
background-image:url(路径)；
background-size:100% 100%；
background-repeat:no-repeat; 平铺方式
通用属性：
width:
height:
line-height:行高 （设置元素中每一行内容的高度），垂直居中
布局容器：首选 块级元素
h1-h6
p
ul li ol li (适合布局)
table (不太适合 层级深)
盒子（容器）： 没有任何功能的块级元素
<div></div>
没有任何功能的内联元素
<span></span>
容器实际占位计算：(盒子模型展位)
x轴方向： width+ br + bl + pr+pl+mr+ml
y轴方向： height+ bt+ bb + pt+pb+mt+mb
内边距：padding
盒子的内容与其边框之间填充的间隙（视觉效果 容器宽度或高度被拉伸）
padding-left
padding-right
padding-top
padding-botttom
外边距：margin
盒子的边框外围填充间隙（视觉效果 容器看起来发生偏移）
坑点1：内联元素不支持 垂直方向的外边距调整
坑点2: 外边距重叠问题，具备父子关系布局 当任何一个元素调整了垂直方向的外边距可能导致 外边距重叠。
/* 解决垂直方向的外边距重叠 */
/* border: 1px solid transparent; */
padding: 1px;
属性：修饰html元素，突出功能性
1、兼容性(不通用)
width
height
2、多元化
size : 大小、高度、宽度
复合类型的选择器：
群组选择器：多个选择器作用同一样式的时候
选择器，选择器…{
}
后代选择器：匹配某个元素的所有 后代元素
选择器 选择器..{
}
子代选择器：匹配某个元素的直系子元素
选择器>选择器{
}
浮动布局：float : lefta | right |none;
解决多个块元素横向排列
特性：
1、脱离文档流（不占用body标准位置，漂浮）
2、没有设置宽高的块 宽度重置为内容的宽度
清除浮动：解决浮动造成的影响
1、加挡板元素
<p class=”clearFix”></p>
.clearFix{
clear:both;
zoom:1;
}
2、使用超出隐藏（有bug）
父元素添加
overflow: hidden;
zoom:1;
3、万能清除
.box::after{
display:block;
height:0;
content:””;
clear:both;
zoom:1;
}
.box::after{
display:block;
height:0;
content:””;
clear:both;
zoom:1;
}
伪类选择器：捕获客户端行为操作
移入移出
:hover
获取焦点
:focus
元素的缩放：
transform:scale(number) 元素大额缩放
定位：position
relative：相对定位（相对自身所处位置来定位，占用标准文档流）
absolute：绝对定位（默认依赖浏览器左上角，否则依赖父、祖先元素具备relative的定位方式来定位）
fixed：固定定位（依赖浏览器窗口定位，脱离文档流）
transform:scale(number) 元素大额缩放
定位：position
relative：相对定位（相对自身所处位置来定位，占用标准文档流）
absolute：绝对定位（默认依赖浏览器左上角，否则依赖父、祖先元素具备relative的定位方式来定位）
fixed：固定定位（依赖浏览器窗口定位，脱离文档流）
附链接：CSS基础入门学习笔记，作为开发基础补充知识内容。
原创文章，作者：czhdawn，如若转载，请注明出处：https://www.czhdawn.cn/archives/4637
