对css规范的理解,我对Css的一些属性的理解

因为Css包含的属性实在太多太多，博主就写一点这几天遇到的问题的总结吧。

元素高度到底由什么决定？

div高度由其内部的文档流元素的高度综合决定。

内联元素的流动方向: 从左往右流动 如果遇到宽度不够 就另起一行

内联元素 设置宽和高无效

宽由内容决定

高度由文字的建议行高(line-height)决定

这里强烈推荐看一下张鑫旭老师的关于line-heigt的视频教程，讲的非常清晰明了，没有废话。

https://www.imooc.com/learn/403

块级元素的流动方向:从上往下流动每一个块都会占一行

关于高度

尽量不要设置高度，给元素设置高度绝逼是引发bug的嫌疑犯。非绝对，但是最好不要设置，要尽量通过内部设置padding的办法，没有bug，也能够自适应，何乐不为。例如

display: inline-block; /* 将内联元素转化为行内块级元素 */

padding: 4px 16px; /* 从内部往外写，推荐的写法！ */

line-height: 22px; /* 最好还是要将文字的line-height与块级元素高度相同 */

如何让一个div水平居中

margin-left：auto; margin-right：auto;

如何让一个绝对定位的元素紧贴在父级元素的下面

top: 100%; /* 距离上面100% */

脱离文档流

1. clearfix

1.所有需要并排的元素float浮动

2.在父级style中添加clearfix

3.Css中写上

.clearfix::after{

content: '';

display: block;

clear: both;

2.绝对定位

position: absolute;脱离文档流，现对于祖先中的第一个position: relative定位。

写法：

1.在子元素上写绝对定位 position: absolute

2.然后再其父级身上写相对定位 position: relative

3.position: fixed

position: fixed; /*可以让元素脱离文档流，可以相对于窗口定位。*/

如何让banner居中，并按比例填充框架？

.banner{

height: 515px;

background-image: url(../img/wallhaven.jpg);

background-position: center center; /* 这个属性是让图片在屏幕中 */

/*

background-size: cover 是按比例填充框架，图片按比例放置在框架中。可能会被裁剪，但用的最多。

background-size: contain 是按比例适合内容，图片全部放置在框架中，可能会有宽度和高度不够而透出来的问题

*/

background-size: cover;

}

关于包裹不住的解决办法

/*

设置下边框3px，同时给了上下内边距5px,

发现li的高度和a标签高度不同，所以给了display:block属性，使li能够完全包裹住a标签

*/

.topNavBar nav > ul > li >a {

font-size: 12px;

color: #B7B7B7;

text-decoration: none;

font-weight: bold;

border-top: 3px solid transparent; /* 因为下边距给了3像素，为了使文字在高度的视觉上水平居中，所以我们给了上描边3像素，并设置为透明(transparent) */

border-bottom: 3px solid transparent;

padding-top: 5px;

padding-bottom: 5px;

display: block;

关于设置鼠标经过时候 距离文字有一些距离的设置

.topNavBar nav > ul > li >a {

font-size: 12px;

color: #B7B7B7;

text-decoration: none;

font-weight: bold;

border-top: 3px solid transparent; /* 因为下边距给了3像素，为了使文字在高度的视觉上水平居中，所以我们给了上描边3像素，并设置为透明(transparent) */

border-bottom: 3px solid transparent;

padding-top: 5px;

padding-bottom: 5px;

display: block;

}