HTML与CSS基础知识小记

最新推荐文章于 2022-06-21 23:24:28 发布

烟花梦帘

最新推荐文章于 2022-06-21 23:24:28 发布

阅读量205

点赞数

分类专栏：个人随笔文章标签： HTML与CSS

本文链接：https://blog.youkuaiyun.com/u012476022/article/details/88666795

版权

个人随笔专栏收录该内容

4 篇文章

订阅专栏

1.行级元素不能设置宽和高，宽度和高度由内容区决定

2.行级块既可以像行级元素一样在一行排列，也可以拥有调整宽度和高度的特性

3.行级块元素拥有行级元素和文本元素的特性，所以换行的时候，换行符会被识别为文本的结束，因此当多个img元素换行时会出现大约6px的间隔，使用手工压缩（去除空格和换行符）即可去除间隔

4.块级元素拥有宽高

5.盒子包含内容区域和内边距及边框。

6.浮动，定位和overflow:hidden以及设置inline-block可以开启BFC

7.BFC中浮动导致的父元素高度塌陷，上下外边距塌陷可以被解决

8.浮动的元素不能被普通的块级元素看到，但是可以被文本元素(包括行级块元素)看到，最早应用于构建报纸的环绕效果。

9.解决浮动导致的父元素高度为0最好的解决办法是利用伪元素，设置伪元素

div:after {
	content:"";//启用伪元素
	display:block;//设置为块元素的原因是因为clear属性只对块元素生效
	clear:both;//不让左右存在浮动元素，自然下移
}

10.行级元素不能嵌套块级元素，P元素中不能嵌套DIV元素，否则P会被分隔成多段

11.设置position 和 float都会隐式将元素设置为inline-block;

12.行级(块)元素的需要与文字对齐或者在父元素中垂直方向居中，使用

vertical-align:middle

13.行级(块)元素中的文字需要垂直居中时，设置行高line-height与元素高度一致即可

14.固定宽度元素在父元素内部水平居中时，可以按照以下设置

div {
	width : 100px;
	height : 100px;
	margin 0 auto;//上下外边距为0，左右外边距相等，自然居中
}

还有一种方式，前提是父元素是启用了position或者是顶级元素：

div {
	position : absolute;
	width : 100px;
	height : 100px;
	left : 50%
	margin-left : -50px;// 1/2宽度外边距的负值
}

15.单行文本设置省略号结尾：

p {
	width:200px;
	white-space:nowrap;//不换行
	overflow:hidden;//超出部分隐藏
	text-overflow:ellipsis;//超出部分打点
}

16.多行文本截断：一般不在前端处理，如果处理，使用截断或者后台计算字符大小后控制
截断：

p {
	height:100px
	line-height:20px;//正好五行
	overflow:hidden;
}

17.当网速不稳定，浏览器采用默认加载策略之后，当CSS文件不能加载，渐进式背景图片处理：

<a href="xxx"> Hello CSS!</a>

a	{
	display : inline-block;
	text-decoration:none;
	width:190px;
	height:90px;
	background-image:url(xx.jpg);
	background-size:100px 100px;
	backgrount-repeat:no-repeat;

	<!-- 第一种-->
	text-indent:190px;
	white-space:nowrap;
	overflow:hidden;
	<!-- 第二种,利用padding区域可以显示背景，但是不能显示内容的特性-->
	height : 0;
	padding-top : 90px;
	overflow:hidden;
}

18.image元素设置宽度或者高度其一即可按比例缩放。

19.position共拥有四个值，默认为static，然后是相对定位relative，相对于自身位置定位，并且只会灵魂出窍，即身体不会脱离原位置，然后是绝对定位absolute，不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并（这是因为开启了BFC）。fixed，固定元素定位，不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
最后一种是sticky，因为没有见过应用场景，暂时未解。

20.letter-spacing 可以调整字符间距，负值则会让字符贴的更紧。

21.对于带有行级属性的元素，包括inline及inline-block，如果想在父元素(块级元素)中水平居中，我们可以使用text-align:center

22.对于某块元素的背景渐变色，我们可以使用linear-gradient()，例如：

.test5 {
	background: linear-gradient(to top right, #000, #f00 50%, #090);
}

23.对于盒模型类型，主要有两种，一种是标准盒模型，总的宽度=宽度 + 内边距 + 边框
另外还有一种是IE盒模型，在这种模式下，宽度即为总宽度，边框和内边距都包含其中。
可以通过属性 box-sizing来设置，border-box即为IE盒模型，content-box即为标准模式

24.网页布局个人心得：首先划分大的区域，将总体的区块宽度和高度划分出来，然后再对每一个区域进行细分，使用各种HTML元素的时候我们需要首先明确元素是行级元素还是块级元素或者是行级块元素，如果是块级元素我们就有必要设置对应的宽度和高度，内边距等，其次我们需要考虑标签的语义特点，例如ul li标签适合列表类，<i>,<em>标签适合作为小型图标的背景图，<img>适合大型展示性图片使用,<h>适合标题使用,有超级链接的元素我们首先想到是不是使用<a>标签，对于一些尺寸不够的图片，我们可以结合渐变的背景色来布局，同级元素之间的距离调整我们使用margin，内部元素的位置调整我们可以使用relative，absolute，边距使用padding。

25.绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案
绝对定位的元素完全从文档流当中移走，所以他们的尺寸无法影响到父元素的尺寸。
如果你真的想实现绝对定位还能撑开父元素，只能通过JavaScript实现：获取到绝对定位的子元素的高度，再设置给父元素。
或者不使用绝对定位，用 float: left / float:right 还有 margin 来调整位置，子元素再通过父元素设置的overflow:hidden来撑开父元素。
未完待续…