CSS （层叠样式表）

• 概念
  • 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  • CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

总结：css 就是网页中元素展现的一种格式/样式

CSS 布局

尺寸显示轮廓属性

• width:设置元素的宽度
• height:设置元素的高度

显示属性

• display:
  • none 不显示
  • block 块级显示
  • inline 行级显示
  • flex 弹性布局
    • https://www.cnblogs.com/likun123/p/9518466.html
• border:
  • 绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
  • 常用属性：
    outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);
  • 设置轮廓的样式
    outline-color:red;设置轮廓的颜色
    outline-width:10px设置轮廓的宽度

盒子模型的作用：理解css+div 定位和布局

浮动

• 属性 float

属性名	说明
left	左浮动
right	右浮动
clear	清楚周围的浮动
none	:默认值，不浮动

• 对clear属性进行说明

属性名	说明
left	清楚左浮动
right	清楚右浮动
all	清楚两边的浮动
none	:默认值，不浮动

• 效果图
  
• 弊端
  • 设置的位置会根据浏览器大小改变

margin和padding

margin \padding 顺序

margin/pading	等效
margin：10px	margin-top,-right,-bottom,-left-：10px
margin:10px,20px	[margin-top,-bottom:10px] [margin:-left,-right：10px]
margin:10 px,20px,30px	margin-top:10px -left,-rigt:20px, -bottom:30px
margin:10px,20px,30px,40px	margin-top:10px ,-rigt:20px, -bottom:30px-left:40px

• 按照顺时针
  

定位属性

• 常见属性：相对定位(relative)，绝对定位(absolute)，固定定位(fixed)

相对定位(relative)

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

• 示意图
  

• 绝对定位(absolute)

  • 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框.

• https://blog.****.net/dkr380205984/article/details/84836375

• 示意图
  * 4.6.3 固定定位(fixed)

  ​ 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

CSS 优先级

内联样式表 >内部样式表|外部样式表 (优先级和书写的顺序有关，后书写的优先级别高)