在这里我所介绍的方法尽量做到了出现的bug最少、自适应强，而且高效、实用、简捷地实现常见网页布局
从上到下，详细描述内容我就不一 一 解释啦，如字体、颜色、大小、项目符号、下划线等等，请自己体会哦！
CSS左右布局典型方法：
第一、网页中实现 logo 和导航栏的左右多列布局
logo 和 nav 都是宽度不确定，根据内容而定的，div、a、Ul 等标签均不用width/height 来确定宽高，目的有利于改动内容；
一、html结构如下：
html
二、CSS具体步骤：（html从内到外的写法）
1、将a标签里的两个span的内容通过margin、padding……属性放到合适位置；
2、重要一步：将垂直分布的导航栏排列到水平线上 ：
1、.topNavBar nav > ul > li{ float: left; } //水平线上排列
2、给 Li 的父级元素 Ul 添加.clearfix::after{ content: ""; display: block; clear: both；} // 消除float 带来的bug
3、载通过margin 、padding 属性将导航条和 logo 至于同一个高度；
4、这一步也是在导航条中常见的样式： 给最外面的 div 添加 .topNavBar{ position:fixed;} /*相对屏幕固定， 将logo 及导航条始终位于可视页面的顶部 */
三、网页效果如图：
导航条
第二、页面中间实现左右两列布局
一、html结构如下：
html
二、CSS具体步骤：
1、.userCard .picture{ float: left; } ;
.userCard .text{ float: left; } //将picture 和 text 浮动起来，分为左右两部分
2、<div class="pictureAndText clearfix"> // 给父级元素添加clearfix,消除float 带来的bug
3、.userCard dl dd,.userCard dl dt{ float: left; } // 将text里面的 dt、dd 内容 浮动起来
4、.userCard dl dt{width: 30%;} /* 根据内容,将 dt、dd 占有合适的宽度，只要两者之和
.userCard dl dt{width: 30%;} 等于100% 即可，若有paading则宽度适可而止*/
三、网页效果如图：
产品描述
在此，外面两列左右布局，内部text 内容再次左右两列布局；
在这里，hello是以图片形式显示的，具体做法就不介绍了，有兴趣可以点击下面链接了解具体做法：https://htmlpreview.github.io/?https://raw.githubusercontent.com/cnqinglin/The-Shapes-Of-Css.github.io/master/index_shape.html 复制蓝色部分可以查看源代码哦
第三、页面中间实现左右多列布局
一、html结构如下：
html
二、CSS具体步骤：
1、.userCard > footer.media > a{ display: inline-block; } // 以内联元素形式显示、块级元 素 形式排列
2、.userCard > footer.media{ text-align: center;} /*通过给父级元素text-align：cernter;使a 元素居中，inline-block 的好处是不管 有多 少a 标签都会居中，以内容来决定宽度*/
3、.media > a >svg{ vertical-align:center;} //消除dispaly:inline-block；的bug;使图片上下间隙 一样
三、网页效果如图：
media
CSS左右布局简单的其它方法：
1、简单的块级元素里头内容居中时外面块级元素添加 margin:auto; 里面内联元素添加 tex-align: center;即可；
2、想把图片放到任意位置：最好用绝对定位：给父级元素position：relative;给自己元素position:absolute;再用 top/left/right/bottom布局；
CSS水平居中方法：
1、内联元素内文字水平居中：
直接加text-align:center;
2、块级元素内部文字或图片居中：
先将内容浮动，把他父级元素居中就行；比如：ol/ul 的li 里面有内容居中时，给ol/ul 外面加div，再给div添加text-align:center;
举例：
html:
<div>
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
<li>内容四</li>
<li>内容五</li>
<li>内容六</li>
<li>内容七</li>
<li>内容八</li>
<li>内容九</li>
<li>内容十</li>
</ol>
</div>
css
div{
border:1px solid red;
text-align:center;
}
ol{
list-style:none;
display:inline-block;
}
li{
float:left;
padding-right:30px;
}
结果：
内外两次水平居中
CSS垂直居中方法：
1、块级元素里内容垂直居中：
(1) 想要一个把 div 高度最终设为为 30px，div 里有内联元素（一行字)垂直居中，字的大小为 14px :
方法一:给 div 的样式为 font-size: 14px; line-height: 20px; padding: 5px 0;
方法二：给 div 的样式为 font-size: 14px; line-height: 24px; padding: 3px 0;
方法三：给 div 的样式为 font-size: 14px; line-height: 30px;
(2) div里面有个div，想把里面的div垂直水平都居中：
第一种情况：
需要外部div设为屏幕一样宽高（外部div高确定）里面的居中，（定宽定高）则做法：
html: <div class='dad'><div class='son'></div></div>
css: .dad{ box-sizing:border-box;height:100vh;}
.son{ width: px; height: px; padding: px; margin:auto; position:absolute; right：0px; left:0px; top:0px;bottom:0px;}
第二种情况：
外部div的高度宽度都不确定，里面的div居中的做法：
html: <div class='dad'><div class='son'></div></div>
css: .dad{ display:flex;justify-content:center;align-items:center;}
.son{ width: px; height:auto; padding: px;}
2、内联元素里内容垂直居中：
方法一：给文字添加font-size.再给它设置一样的上下padding；
方法二：
<html>
<span>
hahhashshdd哈哈哈fkslj 发的水库和第三方库河水库防洪看 凤凰 u'k'f'sh'f'd'k'dasjkdkbsdfbfsdkhbshdbfhsdbhfb房贷首付fksdbfsdsf bhhahhhahhah是哈韩圣诞卡社保卡不哭哈不是靠好吧点回 复BASF吧
</span>
</html>
span{
border:1px solid red;（这个可忽略）
display:inline-block;
padding-top:20px;
padding-bottom:20px;
line-height:20px;
}
内联元素垂直居中
一般不使用vertical-align:center;display:inline-block;时出bug时才用到；
若在div中只有文字建议用第一个方法，div中有其他块级元素或结构较复杂，建议使用方法二：好处是不局限于内容多少
以上全部内容概括：布局问题都涉及到水平垂直居中，垂直居中较简单，而水平居中无非以下两种方法：
1、父元素：text-align:center;
子元素：display:inline-block; 通常这个方法有bug,比如ul>li水平居中时中间会出来空隙。
2、父父元素：text-align:center;
父元素 ： .clearfix{content:"";display:block;clear:both;} ; 在这里有时需要让父元素紧紧包围时不要写clearfix，不然会把整个宽度包含进来。
子元素：float：left/right;
定位问题：
1、绝对定位：脱离文档流
方法1： position:fixed; 相对于屏幕固定；一般用于背景图；
2、相对定位：没有脱离文档流，相对父级元素定位，就是相对于之前的位置而按要求移动
方法： 父元素：position:relative; //但是添加了这个属性后就不脱离文档流了
子元素：position:absolute; //这一步脱离文档流了
3、脱离文档流方法：
方法1： position:fixed; 相对于屏幕固定；一般用于背景图；
方法2： position:absolute; 相对于父级元素定位；
方法3： float:left; 浮动起来；
元素高度：
1、内联元素：
内联元素是不接受高度的，由内容来决定（行高）高度，非要给它设置宽高，添加display:inline-block;属性，display:inline-block;属性使元素以内联元素形式排列，块级元素样式显示；
（内联元素的左右会受margin\padding的影响，但高度不受影响；）
2、块级元素：
块级元素是由其内部文档流总和决定；
文档流Normal Flow：内联元素从左往右流动，遇到阻碍就会换行；块级元素从上往下、每一个元素占一行、（分别另起一行流动）、依次流动；
……………………………………div的高度有谁来决定：…………………………………………
1、在div中只有多个内联元素（span里文字）时：div的高度是有行高决定
文字省略溢出：
1、一行文本：给父级元素添加：white-space:nowrap; //多出的隐藏掉 overflow:hidden; text-overflow: ellispsis;
2、多行文本：直接在谷歌上搜：css moulti line text ellipsis 即可；
2、在div中有只块级元素时: 分情况：看看margin合不合并决定高度问题
margin合并问题：
<div class='dad'> 这种情况下阻止margin合并方法：(就是让子元素全部放在父元素里面)
<div class='son'></div> 方法1、.dad{ padding-top:xxx;padding-bottom:xxx;} 建议使用
</div> 方法2、.dad{ overllow:hidden;} 不是很建议这个方法，当需要做到悬浮层时就不能这样做；
3、在div中既有内联元素又有块级元素时：高度有div中内部文档中流元素总和决定；
总结：div的高度是由它内部文档流的元素总和决定；如果是里面元素脱离了文档流，则在计算高度时不算进来；
常用的两个页面效果：
1、实现一个一比一的div的方法：
<div></div>
div{ border: px solid red; padding-top:100%;}
2、写出「姓名」与「联系方式」两端对齐的方法：
css:
span {
display: inline-block;
width: 5em;
text-align: justify;
line-height: 20px;
overflow: hidden;
height: 20px;
}
span:after{
content: '';
display: inline-block;
width: 100%;
border: 1px solid blue;
}
html:
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
以后会不定期更新内容
网友评论