前端入门应该掌握的html+css知识点

时间 2019-11-17

标签前端入门应该掌握 html+css html css 知识栏目 CSS 繁體版

原文原文链接

* 文档流css

元素从上自下从左到右排列，即文档流html

（因此一个普通的元素前面有一个向右浮动的元素，这个元素不会和这个浮动元素发生重叠，可是若是这个普通元素前面是一个向左浮动的元素，能够看到css3

元素会和浮动元素重叠）bootstrap

* 布局种类app

布局分为：块级布局（float、多列）、行级布局、定位布局、表格布局、弹性布局、网格布局ide

（多列：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts）wordpress

* inline、inline-block、block元素的区别布局

块级元素（block）老是独占一行，从上自下排列，能够包含块级元素也能够包含行级元素字体

内联元素（ inline）老是在一行排列，直到一行排满再换行排列，能够包含行级元素不能包含块级元素ui

内联块级元素像内联元素同样排列，一行排满再换行排列，像块级元素同样，能够包含块级元素也能够包含行级元素

* 常见布局

一、三列布局：

a) 对于三列宽度都是固定的状况，能够利用position:absoult/float/display:inline-block来实现布局

b) 对于左右宽度固定，中间宽度自适应，父容器由最高的子元素撑开的状况用绝对定位和inline-block都不可行：

inline-block实现左中右三列布局，三个模块必须设置固定宽度，中间宽度没法作到自适应；

absolute，父元素高度最多只能作到由中间元素撑开，且左右两边的元素脱离了文档流。

划重点- 双飞翼或圣杯布局实现三列布局：

圣杯布局和双飞翼布局都是采用float布局，中间模块优先渲染，宽度设置为100%，自适应宽度；左右模块固定宽度，而后利用负外边距让左右两个模块布

局到合适的位置的模式建立三列布局。

划重点- 圣杯布局与双飞翼的不一样之处：

圣杯布局与双飞翼布局的不一样之处在于中间元素的内容被左右两个模块挡住时的处理方式不一样，圣杯布局采用的是父容器设置合适的左右padding值，而后

左右两个模块设置为相对定位，分别利用left、right来调整元素的位置。而双飞翼布局是在中间的元素的内容外面在加一层div，而后为这个div加左右margin

值，来让左右元素不遮挡中间的元素内容。

划重点- 负外边距：

负外边距能够影响普通文档流中的元素，也能够影响浮动元素和绝对定位的元素：

负外边距对普通文档流中的元素的影响：它不一样于relative定位，负外边距偏移元素以后，元素位置改变以前元素在文档中占据的空间不会保留，因此会影响其余元

素的布局；relative定位，在偏移元素以后，会保留元素以前占据的位置，因此不会影响其余元素的布局。

负外边距对浮动元素的影响与对处在普通文档流中的元素的影响同样。

负外边距对绝对定位的元素的影响，利用负外边距和绝对定位让元素水平垂直居中显示。

能够利用负外边距改变元素的宽度：

父容器设置固定宽高，子容器设置固定高度，不设置宽度，而后子元素利用负外边距能够增长容器大小，利用这一特色能够实现如下布局：

但愿靠最右边的元素没有白色的空白

                  <div style="width: 430px; border: 10px solid #f00; margin-top: 20px;">	
                  <ul style="height: 210px; list-style: none; overflow: hidden; margin-right: -10px;">
				<style scoped>
					li {
						float: left;
						width: 100px;
						height: 100px;
						margin-right: 10px;
						background: #000;
						margin-bottom: 10px;
			                  }
				</style>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>				
			</ul>
		      </div>

但愿靠最右边的元素没有白色的空白，还能够将父容器宽度设置为430px，子容器宽度设置为440px，默认子容器多余的10px会被裁剪掉，可是子元素

里面的元素仍然能够并排显示。

http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#undefined

以外的总结：

* float浮动不越过父容器的padding值（在圣杯布局中，父容器设置了左右padding值，中间元素自适应容器宽度，没有多余的空间，左边的元素经过

margin-left偏移上去以后，右边的元素不会由于浮动自动显示在中间元素的右侧，由于没有多余的空间，因此右边的元素也须要经过margin-left设置

来偏移到中间元素的右边）

* margin-left、margin-right等margin值不管取正值仍是负值，都不会把容器的padding值计算在内（一个元素在一个有padding值的父容器中，该元素利

用margin偏移的时候不会将父容器的padding值计算在内，当一行显示不下全部元素时，剩余元素会在下一行显示，可是这些元素仍然是在父容器中，

偏移原理同样，偏移时不将父容器的padding值计算在内）

未设置margin-left:-100%

设置了margin-left：-100%

* position中的top、left等属性取正值时，若是父容器有padding，则以padding为基准。元素position默认为static，静态元素没有top、left等属性。

* position: relative能够和float一块儿使用

圣杯布局： https://alistapart.com/article/holygrail

二、左右布局：

三、居中对齐：

行级元素垂直居中对齐：

块级元素垂直居中对齐：

行级元素水平居中对齐：

块级元素水平居中对齐：

应用场景：

文本相对旁边的行内块级元素居中显示（在容器中居中对齐）

四、自适应屏幕高度：

（关于布局全部：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout）

让子元素的高度等于父元素的高度，子元素设置为100%，必须给html和body都设置height为100%

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

多列等高

* float的理解以及清除浮动的使用

float的理解：

浮动元素会脱离文档流，设置了浮动的元素会显示为块级布局（例如给一个行级元素设置浮动就能够为行级元素设置宽高），浮动元素会沿着容器的左侧或右侧排列，

文本或内联元素（inline或inline-block元素）会环绕浮动元素布局。

浮动元素的做用：一般利用浮动布局来水平排列元素或让文字环绕图片显示。

一个浮动元素，若是前面的元素也是一个浮动元素，且这个两个元素是在同一方向浮动，后面的元素会紧跟随前面的元素排列；若是这两个浮动元素是在两个相反

的方向浮动，那么它们分别在左右两边排列。

若是浮动元素的前面是一个处在文档流中的普通块级元素，那么这个浮动元素会在新的一行排列。

若是浮动元素后面是一个处在文档流中的普通块级元素，那么浮动元素会和后面的普通元素重叠。（这个普通元素会移动到浮动元素的左侧位置开始排列）

（关于浮动更多内容：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats）

清除浮动：

一、直接经过clear来清除，clear能够取的值有none、left、right、both、inherit。（对块级元素有效，行级元素都是围绕浮动元素显示，因此clear对行级元

素没有意义）

（clear的做用是指定一个元素是否能够在以前的浮动元素旁边或者说必须向下移动在它下面。例如：设置了clear：left 的元素旁边不能有左浮动的元素，设置了

clear：right的元素旁边不能有右浮动的元素。

clear能够做用于浮动元素或非浮动元素，做用于非浮动元素，会将非浮动元素的边框边界移动到全部相关浮动元素的外边界下方；看成用于浮动元素时，

会将元素的外边界移动到全部相关的浮动元素的外边界的下方。)

验证：

 <style> * { margin: 0; padding: 0; } body { background: #989EA4; font-size: 62.5%; } /*.clearfix:after { display: block; content: ''; clear: both; }*/ .wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width:20%;} .red { float: right; margin: 0; background-color: red; width:20%; } p { width: 45%; } </style> <div class="wrapper"> <p class="black"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. 
 Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. 
 
 </p> <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. 
 Duis mattis varius dui. Suspendisse eget dolor.
 </p> <p class="both clearfix">This paragraph clears both.</p> </div>

二、给元素设置overflow:hidden或auto

三、经过伪元素：after设置clear替代

       .clearfix:before, .clearfix:after {
                content: " ";
                display: table;
       }
            
        .clearfix:after {
                clear: both;
                overflow: hidden; 
       }
            
       .clearfix {
                zoom: 1;
       }

https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

为何要清除浮动：一、让浮动元素也能撑开容器高度；二、让浮动元素不影响其余元素的布局

三种清除浮动方式的使用场景：一、clear做用于非浮动元素，让前面的浮动元素不影响后面元素的布局，可能但愿后面的元素可以在新的一行显示。

二、overflow：hidden或auto，容器中有浮动元素，但愿容器的高度能由里面的元素撑开时。

三、利用伪元素after设置clear的方式，和利用overflow清除浮动同样，可让浮动元素撑开容器高度。

（与overflow不一样的是它的原理不是将浮动元素高度计算在内，而是加了一个空元素将整个容器撑开，clear做用于

一个非浮动元素时，这个非浮动元素的边框边界会移动到相关浮动元素的外边界下方显示，就是这个原理）

其余：

* BFC IFC

BFC：

BFC即块级格式化上下文，设置为BFC元素，它的布局是独立的，元素不受外面元素布局的影响，元素的布局也不影响外面的元素。

生成BFC元素的方式： float不为none

overflow不为visible

display设为table-cell、table-caption、inline-block等

position不为static或relative

设置元素为BFC的做用：不让元素与浮动元素重叠。处在BFC中的元素，每个元素的左边界老是要与包含块的左边界相接触，而建立了BFC的

元素不能与浮动元素相重叠。

清除内部浮动。处在文档流中的普通元素，不会将浮动的子元素的高度计算在内，而BFC元素会将其浮动的子元素的高度

计算在内。（可让浮动的元素，仍就能够撑开容器）

不让相邻两个元素的垂直外边距发生重叠。处在同一BFC的两个相邻的元素的垂直外边距会发生重叠的现象。

BFC元素不会和其余元素的垂直外边距发生重叠。 (垂直方向具备margin值的上下相邻的两张图片，外边距不会发生重叠，

图片默认为inline-block布局)

* 外边距重叠

外边距的三种状况：

相邻两个元素的垂直外边距发生重叠。

处于同一文档流的两个相邻元素的垂直外部距会发生重叠现象：

当两个相邻元素的垂直外边距相等时，会合并为一个外边距；

当一个外边距的值大一个外边距的值小时，外边距为值大的哪个；

当两个外边距都为负数时，外边距取绝对值大的那一个；

当一个为正一个为负时，外边距为两个值求和以后计算的值。

父元素与子元素的垂直外边距发生重叠。父元素与子元素处在同一文档流中。

自身没有内容填充时上下垂直边距发生重叠。

* 关于盒模型

* 能够继承和不能够继承的元素属性

能够继承：font有关的，color、backgrond等

不能够继承：width、height、padding、margin、opacity等

* css中的各类单位

px：绝对大小单位，相对于屏幕分辨率而言

em：相对大小单位，相对于父元素的字体大小计算（默认1em = 16px）

rem：相对大小单位，相对于根元素的字体大小计算

https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

* overflow的使用

* 响应式布局

http://getbootstrap.com/css/

* background的使用

a) 能够设置背景图片的起始位置、大小、是否重复、指定初始位置的相对区域、指定背景外延的位置、背景显示的方式、背景色

background：url(), 0% 0%, repeate, fixed...

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

b) 下面两个属性能够取的值有：border-box、padding-box、content-box（inherit），分别是至关于元素边框、元素内边距、元素内容。

background-origin: padding-box （背景图为fixed显示时，此属性不起做用）
background-clip: border-box

background-attachment能够取值：fixed、scroll（默认）、local

c) fixed相对于视口，不随着内容滚动而滚动

scroll相对于元素自己，不随着内容滚动而滚动

local相对于元素内容，若是元素有滚动机制将随着内容的滚动而滚动

一、给元素添加背景图片

给元素添加背景图片能够同时添加多张，并分别指定背景图的初始位置：

.examplethree {
background-image: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"),
url("https://mdn.mozillademos.org/files/7693/catfront.png");
background-position: 0px 0px, center;
}

* line-height的使用

一、行高字面意思即一行文字的高度，具体的就是两行文字间基线之间的距离。

二、能够设置的属性值有：normal、inherit、长度值（px/em）、百分比、数值

三、对于没有设置高度的块级元素而言，line-height决定其元素的高度（包含内容的元素，下面同理）

四、对于非替换行级元素（span、a等标签元素），font-size决定其元素的高度，最终元素的布局取决于父元素与子元素中行高值最大的那一个

五、对于可替换行级元素，line-height能够影响部分可替换行级元素的布局（影响高度），例如button、input等，对于img的布局没有明显影响。

通常设置行高的值采用设置数值的方式：

行高设置成百分比，行高的值等于这个百分比乘以当前元素的字体大小，后代会继承这个最终算出来的行高值，不能自适应

行高设置成em，行高的值等于这个设置的值乘以当前元素的父元素的字体大小（若是当前元素有字体大小则乘以当前元素的字体大小），不能自适应

行高设置成数值，行高的值等于这个数值乘以当前元素中的文本的字体大小，后代继承的是父元素的这个行高的数值值，能够自适应（子元素不一样字体大小有不一样的行高）

注：一个没有设置高度的块级元素，高度取决于line-height，若是这个行高的值是以数值的形式设置的，则最终行高的值等于这个数值乘以元素中的文本的字体大小，这个文本的字体大小多是由另一层包裹的元素来决定的

* vertical-align的使用

一、vertical-align用来调整行级元素的基线，只对行级元素有效

二、能够取的值有：百分比、数值、normal、inherit、text-top、text-bottom、top、bottom

三、 text-bottom（text-top）与bottom（top）的区别：

一个是元素的底端与父元素字体的底端对齐，另外一个是元素及其后代的底端与整行的底端对齐。

.box1{background:black; color:white; padding-left:20px; display: inline-block; line-height: 4;} 
.dot1{display:inline-block; width:4px; height:4px; background:white; vertical-align: text-bottom;}

.box2{background:black; color:white; padding-left:20px; display: inline-block; margin-left: 20px; line-height: 4;} 
.dot2{display:inline-block; width:4px; height:4px; background:white; vertical-align: bottom; }

           <span class="box1"> 
			<span class="dot1">				
			</span> 
			我是一段文字。
	    </span>
	    
	    <span class="box2"> 
			<span class="dot2">				
			</span> 
			我是一段文字。
	    </span>

　a)元素没有设置行高时表现一致：

b)设置行高以后，能够看到二者的差异：

行高增大了父元素的高度（应该说是增大了文字整行的高度因此整个高度增大了），text-bottom相对父元素字体的底部对齐，不动；bottom相对的是整行的底部对齐，父元素增高底部变化，bottom的位置随之变化。

c) 若是不要行高，直接使用height给box设置高度，表现以下：

说明设置行高时，增大的是整个一行文字的高度，vertical-align设置为bottom时，相对整行的底部定位，在最底部；而直接给box设置height高度时，增大的是父元素的高度，父元素中文字这一行的高度并无变，因此，vertical-align设置为bottom时，不会有变化。

* ::before ::after的使用

css3以前用:来表示伪元素，css3修订后用::来表示伪元素

做用：在元素后面或前面添加内容

一、元素内容前面添加文本：

二、元素内容前面添加图片：

content用于在:before 、:after中为元素添加内容，它除了能够在元素中添加文本、图片，还能够经过open-quote等属性给特定的文本添加引号，

经过attr属性还能够获取元素中某个属性的值，而后将读取的值添加在元素内容中：

content详细语法：

更多关于content：https://developer.mozilla.org/zh-CN/docs/Web/CSS/content

* animation、transition、transform的区别

* 文本内容超出容器不断行问题

默认word-break为normal，内容为数字和英文时超出容器不会断行,给元素添加word-break：break-all

更多关于word-break:

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/

持续更新...