我们在实际工作中常会遇到需要设置居中的场景，居中分为水平居中和垂直居中。针对不同的情况又有不同的实现方式，例如行内元素和块状元素。 水平居中： 行内元素：text-align:center；//这个比较简单 块状元素：定宽的块状元素通过设置左右margin为auto实现，例如margin：10px ...
分类：
Web程序 时间：
2020-03-30 23:32:46
阅读次数：
84
1.标准流(文档流/普通流)排版 网页默认的排版方式，及块级元素,行内元素，行内块级元素在网页中的排版方式（块级元素独占一行，可以设置宽高/行内元素，行内块级元素不独占一行/行内元素不可以设置宽高/行内块级元素可以设置宽高） 2.浮动流排版 由图一变成图二有两种方法 1.把两个方块都变成行内块级元素 ...
分类：
Web程序 时间：
2020-03-23 15:15:47
阅读次数：
98
vertical-align 用法定义 该属性定义行内元素(或者行内块 一般也会把行内块当做行内元素看待)的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。 在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 <!DOCTYPE html> ...
分类：
其他好文 时间：
2020-03-18 11:32:46
阅读次数：
54
元素的分类和特征： 1.块级元素 （1）独自占一行 （2）可以设置宽高，如果不设置宽，默认是父标签的100%的宽 2.行内元素 （1）行内元素在一行内 （2）不能设置宽高 3.行内块元素 （1）在一行内显示 （2）可以设置宽高 /*元素隐藏*/ display:none; /*转为行内块元素*/ d ...
分类：
Web程序 时间：
2020-03-16 23:39:20
阅读次数：
108
1.盒子水平居中 div { text-align: center; /*可以让盒子内容（文字 行内元素 行内块元素）居中对齐*/ width: 300px; height: 100px; background-color: pink; /* margin: 0 auto; 通俗写法 0 auto ...
分类：
Web程序 时间：
2020-03-07 00:09:41
阅读次数：
98
<!-- <div>标签 块元素，表示一块内容，没有具体的语义 --> <!-- <span>标签 行内元素，表示一行中的一小块内容，没有具体的语义 --> <!-- p标签带有换行的样式，div不带 --> <!-- 含样式和语义的标签 <em> 行内元素，表示语气中的强调 <i> 行内元素，表示 ...
分类：
其他好文 时间：
2020-03-05 15:05:20
阅读次数：
75
元素为行内元素，设置父元素text-align：center； 如果元素宽度固定，可以设置左右margin为auto； 如果元素为绝对定位，设置父元素position为relative，元素设置为left：0；right：0；并设置margin：auto； 使用flex-box布局，是定justif ...
分类：
其他好文 时间：
2020-03-02 01:01:09
阅读次数：
76
1、html5中新增的标签 2、html中的嵌套关系 a、块级元素可以包含行内元素 ； b、块级元素不一定能包含块级元素（比如p）；c、行内元素一般不能包含块级元素（例外的是a是可以包含div） 3、html中的默认样式 html是自带默认样式，如果需要重置html的默认样式，这个时候就需要引入cs ...
分类：
Web程序 时间：
2020-03-01 00:30:03
阅读次数：
78
简单总结一下常用的水平垂直居中方案 直接在父级元素设置 text-align 和 line-height ,针对未浮动的行内元素 1 <div class="box"> 2 <span class="item">我是span标签</span> 3 </div> 1 .box { 2 width: 6 ...
分类：
Web程序 时间：
2020-02-28 13:36:26
阅读次数：
65
CSS的三种布局机制 普通流（标准流） 普通流中主要分为两个板块，一个是块级元素，一个是行内元素 块级元素 块级元素的特点就是独占一行，从上到下顺序排列 块级元素：div、hr、p、h1~h6、ul、ol、dl、form、table、... 行内元素 行内袁术会按照顺序从左到右的顺序排列，直到父元素 ...
分类：
Web程序 时间：
2020-02-26 01:03:52
阅读次数：
339
