原创

CSS-关于布局居中、水平、垂直、对齐经验积累、设置div水平分布

一、水平布局：
1、布局使用百分比加左右浮动（两个块级元素实现水平布局）（往下可能需要清除浮动 可能需要加一个div过渡，这个div可能需要设置clear：both，paddin-top值）
2、用使用内联元素也能实现水平布局

优先使用:
  display: flex;
  flex-direction: row;
// row-reverse
二、设置居中：

 优先使用:
  display: flex;
  flex-direction: column;
// column-reverse

span 中的text_align仅仅针对文字，设置上下居中 设置相同的height和line-height 
margin:0 auto（好像需要设置父级宽度 设置无效加display: block;） 
div中用align=center 主要用于设置水平居中，不能设置垂直居中（style中用vertical-align:可能无效) 
div中的子元素也可使用text-align: center;注：
  	（父元素需要设置相应宽度；子元素为非块级元素设置display: block，父元素好像不是必须为块级元素）
上下居中 也可以尝试用padding:20px 0;
补充：
A:line-height:xxxpx;vertical-align:middle
B:(高级)display:table-cell;vertical-align:middle
C:position:absolute;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;
(absolute 会占用高内存)

移动版优先（可能）：
A：
     display:-webkit-box;
     -webkit-box-pack:center;
     -webkit-box-align:center;
B(高级)：
     display:-webkit-flex;
     -webkit-justify-content:center;
     -webkit-align-items:center;

C：div中的span垂直居中，放在父类，最好再设置下高度
display: table-cell;
vertical-align: middle;
text-align: center;  
注意：布局时经常设置居中无效，那就在外围包裹一层并设置宽高填充，里面的再设置居中（适合安卓和H5）

三、div中的span靠左居中
<div style="text-align:left;"><span>abc</span></div>
设置宽无效加上display属性。

四、
处理布局内容溢出(overflow):灵活使用最大最小高度宽度maxHeight、minHeight，移动设备按钮之类布局用图片代替文字。

五、
关于设置div水平分布-float浮动
浮动时最好给每一行的控件设置display: inline-block;①
父级div上也要加float: left;（关键）
（往下可能需要清除浮动 可能需要加一个div过渡，这个div可能需要设置clear：both，paddin-top值）
例子一：
<div style="float: left; height: 50px;background-color: gold;width: 100%;">
		 <div id="" align="center" style="float: left;background-color: red;height: 50px;line-height: 50px;width:20%;">
		 序号序号序号序号序号序号序号
		 </div>
		 <div align="center" style="display:inline-block;background-color: green;float: left; height: 50px;line-height: 50px;width: 80%;">
		内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
		 </div>
</div>

例子二、（关键：父类div设置float: left、设置宽度，子类div设置float: left、设置width比例）
（往下可能需要清除浮动 可能需要加一个div过渡，这个div可能需要设置clear：both，paddin-top值）
<div style="float: left; width: 90%;margin: 0 5%;">
	<div id="" style="float: left;width: 15%;">
			 备 注
	</div>
	<div style="float: left;width:85%;">
			<textarea name="" rows="5" style="border-radius: 5px;" placeholder="请输入备注"></textarea>
	</div>
</div>

六、关于设置父控件中的子控件布局思想
 父相对，子绝对

七、
有时设置水平方向一排元素，分别为左中右，左边的元素（父级）设置了宽度为比例，左边的元素的子元素设置了一个固定宽度，此时，在小屏幕手机上，中间部分会偏左。
解决方案，左边的控件（父级）设置min-width等于子元素的固定宽度
.comment_left {
	width: 10%;
	min-width: 50px;
	float: left;
	background-color: red;
}

注：
①：display：inline-block 把控件变成内联，block把控件变成块元素

正文到此结束

所属分类：前端基础

本文标签： CSS
本文链接： https://code.jiangjiesheng.cn/article/11
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。

CSS-关于布局居中、水平、垂直、对齐经验积累、设置div水平分布

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息