设置文本或者内容 在一个盒子中间位置的两种方式:
text-align:center
使内容居中。垂直方向使得行高=盒子高度
以达到文本或内容居中的效果。<div class="main"></main>
<div class="main">
<div class="header">
头部
</div>
<div class="center">
中间
</div>
<div class="footer">
底部
</div>
</div>
<div class="center">
<div class="left">
侧边栏
</div>
<div class="right">
右边内容
</div>
</div>
圣杯布局是最早出现在国外网站上的一个说法。在西方,圣杯是表达“渴求之物”的意思;它是一种两栏或者三栏的布局方式,其中核心点是 主体内容区宽度可变,也就是自适应页面大小。
方案一:
设置父容器为一个固定宽度,让左右盒子都浮动,右边盒子的大小为计算值
方案一:
-中间区域宽度%
,右边区域的外边距为-盒子宽度
,清除父盒子浮动网页中的一个元素(盒子),其在网页上的位置,有如下三种方式来确定:
标准模式:普通文档流
标准模式就是元素没有进行浮动也没有进行明确定位时的“默认模式”,这也被称为标准流。
浮动模式:浮动层的元素
浮动模式就是使用float属性使其往左边或右边进行浮动而表现出来的位置。这被称为脱标流。
定位模式:定位元素 可以在普通文档流中 也可以是定位层
就是使用明确的“位置设定”信息来让一个盒子定位到指定的位置。
定位模式中,有的是标准流的,有的是脱标流的。
定位设定可以确定一个盒子在下述两个方面的位置:
在css中 使用position属性 设置元素的定位方式:
?
relative:相对定位,它是相对于自己原先在网页中的位置来设置坐标。并且它定位之后 会保留原先的位置
fixed:固定位置,是相对浏览器窗口来设置坐标,它也脱离文档流,一般使用fixed来实现吸顶效果。
pre:格式化输出标签,它能让以代码编辑的格式在页面中显示。
cursor:设置鼠标在某个盒子上的时候的光标形状。
box-shadow:设置盒子的阴影效果
text-shadow:设置文本的阴影效果
border-radius:设置圆角边框
text-overflow:当一行的文字在一行中放不下,但又不适宜(不允许)换行时(通常是标题性质的文字)。
该属性的设置有三个前提:
1)盒子的overflow为非visible,通常为hidden;
2)盒子的width为非auto,通常是设定为固定宽度;
3)文字的换行特性white-space为不允许换行(nowrap);
box-sizing:设置盒子内容区的大小。默认的盒子模型中,width和height设置的是内容区的大小。也可以通过该属性 设置width和height所包含的区域:
width/height-边距-边框
的大小vertical-align:垂直方向对齐
vertical-align 这个看上去很美好的一个属性, 实际有着不可捉摸的脾气,否则我们也不会这么晚来讲解。
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块级元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白缝隙。
解决的方法就是:
给img vertical-align:middle | top等等。 让图片不要和基线对齐。
给img 添加 display:block; 转换为块级元素就不会存在问题了。
设置父盒子的font-size:0。
原文:https://www.cnblogs.com/xiaoyixiang/p/14902194.html