前端基本知识-CSDN博客

本文链接：https://blog.csdn.net/m0_71700209/article/details/125283831

行内与块元素

块元素：p h1 div header ul li

一般情况下，会在块元素中放行内元素，而不会在行内元素中放块元素

p元素中不能放任何块元素特殊的存在

列表

定义列表：

<dl>
	<!-- 下定义 -->
	<dt>结构</dt>
	<!-- 具体内容 -->
	<dd>表示网页的结构</dd>

	<dt>表现</dt>
	<dd>对页面进行修饰</dd>
	</dl>

超链接

2: target属性：可以用来指定打开链接的位置
	可选值：
	_self，表示在当前窗口中打开（默认值）
	_blank，在新的一个新的页面中打开链接
	可以设置一个内联框架（iframe）的name属性值，链接将会在指定的内联框架中打开

1）若将超链接的href属性设置为#，点击超链接后，页面会发生跳转，跳转到页面顶部

img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点

关系选择器：

/* 4:选择下面所有的兄弟(前面的不选)
				语法：兄～弟{}
				例子：（不包括p）p～span */
				p ~ span {
				background-color: tomato;
				}
选择器的权重
			内联样式 1000
			id选择器 100
			类和伪类选择器 10
			元素选择器 1
			通配符、子选择器、相邻选择器等。如*、>、+ 0000
			继承的样式没有优先级
			!important 最高优先级
2:百分比 %
		- 也可以将单位设置为一个百分比的形式，
		这样浏览器将会根据其父元素的样式来计算该值
		- 使用百分比的好处是，当父元素的属性值发生变化时，
		子元素也会按照比例发生改变
		- 在我们创建一个自适应的页面时，经常使用百分比作为单位
em
	- em和百分比类似，它是相对于当前元素的字体大小来计算的
	- 1em = 1font-size
	浏览器默认字体大小是16px
	- 使用em时，当字体大小发生改变时，em也会随之改变
	- 当设置字体相关的样式时，经常会使用em

	rem
	-rem是相对于根元素(html)的字体大小来计算的
* 对于单行文本来说，可以将行高设置为和父元素的高度一致，
					* 这样可以是单行文本在父元素中垂直居中

letter-spacing可以指定字符间距

text-indent 设置首行缩进

text-overflow 文本溢出包含元素时发生的事情。

可选值：

clip 修剪文本。

ellipsis [i'lipsis] 显示省略符号来代表被修剪的文本。

width: 300px;

white-space: nowrap;

/* 裁剪多余 */

overflow: hidden;

/* 多余部分设置省略号 */

text-overflow: ellipsis;

}

二p {
	width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	}

：1:图文垂直对齐方式

2:图片三像素的问题

父元素如果不设置高，由图片撑开，此时图片的底部就会有三像素的空白

解决方式一：vertical-align属性值不为默认值

解决方式二：给图片转成块元素

解决方式三：给父元素设置font-size为0

子元素是在父元素的内容区中排列的
	如果子元素的大小超过了父元素，则子元素会从父元素中溢出
	使用overflow属性设置父元素如何处理溢出的子元素
	可选值：
	visible 默认值子元素会从父元素中溢出，在父元素外部的位置显示
	hidden 溢出的内容将会被裁剪不会显示
	scroll 生成两个滚动条，通过滚动条来查看完整的内容
	auto 根据需要生成滚动条

垂直外边距的重叠：


兄弟元素
	* 兄弟元素之间的相邻外边距会取最大值而不是取和，谁大听谁的
	特殊情况：如果相邻的外边距一正一负，则取两者的和
	如果相邻的外边距都是负值，则取绝对值较大的
	兄弟元素的外边距重叠，对开发有利，不用处理


-父子元素
		如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素
		暂时解决方案：
		1:不用外边距
		2:使不相邻
		*/
		.outer {
		width: 200px;
		height: 200px;
		background-color: yellow;
		border: 1px transparent solid;
		/* 开启元素的隐含属性，BFC */
		/* overflow: hidden; */

		/* margin-top: 100px; */

		/* 方案1:用padding ，改父元素高度*/
		/* padding-top: 100px; */
		/* height: 100px; */
		/方案2:为outer设置一个上边框会改变盒子的大小，有个1px的边框/
		/* border-top: 1px transparent solid; */
		}

<select name="列表名称" size="行数">

<option value="选项的值" selected="selected">…</option >

<option value="选项的值">…</option >

</select>

<input type="checkbox" name="interest" value="sports"/>运动

<input type="checkbox" name="interest" value="talk" checked />聊天

<input type="checkbox" name="interest" value="play"/>玩游戏

<input name="gen" type="radio" value="男" checked />男

<input name="gen" type="radio" value="女" />女

<textarea name="showText" cols="x"（行） rows="y"（列）>文本内容 </textarea >

<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p>

<p><input type="file" name="files" />

<input type="submit" name="upload" value="上传" /></p>

<label for="id">标注的文本</label>

<input type="radio" name="gender" id="male"/>

<input name="name" type="text" value="张三" readonly>

<input type="submit " disabled value="保存" >

<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>

::first-letter 表示第一个字母
	::first-line 表示第一行
	::selection 选中的内容
	::before 元素的开始位置
	::after 元素的结束位置
	before和after必须要结合content使用 *