ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS常用选择器和定位

2022-06-05 10:00:42  阅读:148  来源: 互联网

标签:定位 父级 元素 选择器 ul id CSS


选择器

结构伪类选择器

/*选中ul的第一个子元素*/
ul li:first-child{

}
/*ul的最后一子元素*/
ul li:last-child{
	
}
/*选择p:定位到父元素然后选择子元素中第一个,但如果类型不符合则不改*/
p:nth-child(2){

}
/*选择p:定位到父元素下第二个p元素*/
p:nth-of-type(2){

}

属性选择器(用最多)

/*选择存在id属性的元素*/
a[id]{
   
}
/*或者id等于一个具体值*/
a[id=first]{
   
}

美化网页元素

1,颜色 color rgb rgba

2,文本对齐的方式 text-align=center

3,首行缩进 text-indent:2em

4,行高 line-height

5,装饰 text-decoration

6,文本图片水平对齐:vertical-align:middle

定位

相对定位

相对定位:position:relative

相对于原来的位置,进行指定的偏移 保留原来位置

绝对定位absolute

定位:基于xxx定位 上下左右

  1. 没有父级元素的前提下,相对浏览器定位
  2. 假设父级元素存在定位,我们通常会相对父级元素进行偏移
  3. 在父级元素范围内移动

相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,他不在标准文档流中,原来位置不被保留

固定定位fixed

相对于网页的定位

标签:定位,父级,元素,选择器,ul,id,CSS
来源: https://www.cnblogs.com/fieeDream/p/16343429.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有