CSS复习笔记规则和布局

Posted 2021-09-14 江寒

CSS

（让块元素按照想法显示）

实体：

&nbsp
&lt
&gt

单位

绝对单位
10px

相对单位
1em em相对于元素的字体大小
1rem rem相对于html元素选择器中设定的字体大小

颜色
关键字 pink
十六进制 #ffffff #000 #f4f4f4
函数 rgb（ ， ，）
rgba（ ， ， ，）a表示透明度

标签文字化：

1.定义网络字体

@font-face{
  font-family："iconfont";
  src:"";
}

2.使用
基础样式

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
}

特殊样式

 .icon-aixin:before{
     content："\\e8ab"；
 }

引用
<span class:"icon-aixin">

一、规则

文本规则：(针对盒子内容修饰，可继承)

text-align:center

盒子居中：margin： 0 auto
盒子里面的内容水平居中：text-align：center
盒子里面的内容垂直居中：heigjt：50px；；line-height：50px；

vertical-align（行内元素垂直排列）

middle

text-decoration

underline（下划线）
overline（上划线）
line-through（删除线）
text-decoration-color（速写形式）

overflow：hidden/visable/initial/scroll（滚动）

overflow-x（左右）
overflow-y（上下）

字体规则：（针对盒子内容修饰，可继承)

字体：

font-family：\'Microdoft YaHei\'；

字体颜色

color：

字体粗细

font-weight：bold/light

字体样式

font-style：italic/normal

字体速写

font：font-weight font-size/line-height font-family（font：）Microdoft YaHei
12px/1.5

背景色

background-image:url("")
background-repeat:no-repeat
裁切起点background-clip:padding-box
铺设起点background-orgin:content-box
background-size:cover/contain
background-position:50px 100px/center
background-color:

列表规则

list-style：none

表格规则

border-collapse：

collapse（td添加边框时，加在table上可以合并隔壁的边框）
opacity（透明度）

二、浮动布局（块元素一行当中排列的问题）

盒子模型（块元素）

外边距margin
边框border：1px solid #ccc

border-top

border-top-style
border-top-width
border-top-color

border-right
border-bottom
border-left
boder是border-top，border-right，border-bottom，border-left的速写形式

内边距padding

padding-top
padding-right
padding-bottom
padding-left
速写：

  0 5px   上下0 左右5
  0 5px 10px 上0 左右5  下10
  0 5px 10px 20px 上右下左

宽width
高height
1）怪异盒模型（ie） jquery

vue/react/angular 不支持ie8——
box-sizing:contenr-box
盒子所占的宽度=width（包含boder+padding+内容宽度）

1）传统盒模型
box-sizing:contenr-box

盒子所占的宽度 = border+padding+width
多个块元素在一行显示

1.float：left/right

块元素脱离默认文档流，默认宽度为0，失去对父元素支撑的能力

在浮动流中，多个浮动元素在一行中显示，并且会自动换行。
一个i
2.清理浮动
为容器添加一个子元素，一般使用为伪元素

ul.list::after{
    content:"";
    display:block;
    clear:both;
}

二、定位布局

position：static//默认静态

relative
相对点：该元素所在文档流的初始位置
是否脱离文档流：不脱离
如何使用：一般不移动，作为相对点

absolute
相对点：距离最近的父定位元素元素，若没有则相对于浏览器视口
是否脱离文档流
看
fixed
相对点：相对于视口，不会随着浏览器的滚动而滚动
是否脱离文档流：脱离

sticky
相对点
是否脱离文档流

当position的取值为上述四个之一，则称之为定位布局，可以使用定位属性：left，right，top，bottom

相对点
是否脱离文档流