css学习03——定位、布局、浮动、水平和垂直对齐、组合选择器

最新推荐文章于 2022-08-18 18:41:21 发布

菜鸟Jon

最新推荐文章于 2022-08-18 18:41:21 发布

阅读量294

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/csdnmgq/article/details/90233997

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css学习03——定位、布局、浮动、水平和垂直对齐、组合选择器

1、定位

position: static;/*静态定位，不受top,left等的影响*/

position:fixed;/*固定位置，窗口滚动也不受影响*/
top:30px;
right:5px;


position:relative;/*相对正常位置定位*/
left:20px;

/*绝对定位元素的位置是最近已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>*/
position:absolute;/*绝对定位，可将位置放在任意位置*/
left:100px;
top:150px;

/*粘性定位，滚动之后定位任然不动。*/
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;

/*剪辑一个绝对定位的元素*/
position:absolute;
clip:rect(0px,60px,200px,0px);

/*设置当元素的内容溢出其区域时发生的事情。即当内容溢出时出现滚动条*/
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;

2、布局 - Overflow

/*控制内容溢出元素框时显示的方式。*/
background: #4CAF50;
color: white;
padding: 15px;
width: 80%;
height: 100px;
overflow: scroll;

3、浮动(float)

float:right;/*图片浮动在文字之上*/

4、水平、垂直对齐

/*靠右对齐*/
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;/*内边框与元素之间的大小*/

/*水平、垂直对齐*/
padding: 70px 0;
border: 3px solid green;
text-align: center;

5、组合选择符

/*在div中的都可以被修饰*/
div p
{
	background-color:yellow;
}

/*div中的p标签才能被修饰*/
div>p
{
  background-color:yellow;
}