css常用效果

1.辅助线

border: 1px solid red;

2.水平垂直居中

 display: flex;
 height: 100%;
 align-items: center; /* 垂直居中 */
 justify-content: center; /* 水平居中 */

3.子元素相对于父元素进行定位
父元素

position:relative;

子元素

position:absolute;
/* 再对子元素进行left/right/top/bottom操作，会使子元素相对于父元素进行位置的变换 */

4.position定位
static：position 属性的默认值，元素在文档常规流中当前的布局位置，此时 top, right, bottom, left 和 z-index 属性无效。
relative：相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。 它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离。
absolute：相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。它有一个重要的限制条件：定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html。另外，absolute 定位也必须搭配 top、bottom、left、right 这四个属性一起使用。
fixed：相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。元素的位置通过 left、top、right 以及 bottom 属性进行规定。
5.display属性
定义建立布局时元素生成的显示框类型
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block：行内块元素。既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。使用inline-block 会产生了元素间的空隙。
6.行内元素的水平居中
在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素
7.块状元素的水平居中（定宽）
当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。
8.块状元素的水平居中（不定定宽）
可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。
当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block（设置为 行内元素 显示或行内块元素）
9.垂直居中
首先设定两个条件即父元素是盒子容器且高度已经设定，子元素是行内元素，高度是由其内容撑开的，这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中。
10.css的三大布局机制
标准流：

块级元素：垂直方向上一个接一个的排列
行级、行块级元素：水平上依次排列（换行或者空格会被解析为一个小空隙）

定位：可以使元素自由摆放自己的位置，由定位模式和边偏移属性构成
浮动：使元素实现水平排列（没有间隙）
11.常用的九大选择器

1.类选择器 .p1
2.id选择器 #text
3.标签选择器 p
4.分组选择器 p,a,li
5.后代选择器 div ul li
6.属性选择器 [name=“pra1”]
7.通用选择器 *
8.兄弟选择器 p+a
9.直接父子选择器 div>p

12.块级元素不换行

1、对div设置float浮动样式使div不换行
2、对div设置display并排样式display:inline

13.定义span的宽高
默认是没有高宽的，高宽是随着span内元素的数量来决定的，如果想设置span元素的宽高那么你需要设置dispaly为line-block
14.flex的对齐
justify-content：flex-end(右对齐)
justify-content：center(居中对齐)
参考文章：
CSS定位详解
css中的对齐方式
定位、定位技巧、层级属性、浮动与定位的对比、表单、表单属性
flex 右对齐_flex布局