web前端笔记(3)-css属性

浮动

定义

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

文档流

文档流也就是文本的布局，遵循从上往下，从左往右的顺序。

使用float脱离文档流时，其他盒子会无视这个元素，产生覆盖效果。但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

左浮动：float:left   

右浮动:   float:right  

元素怎样浮动

1.元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

2.浮动元素之后的元素将围绕它。

3.浮动元素之前的元素将不会受到影响。

4.如果图像是右浮动，下面的文本流将环绕在它左边

浮动注意事项

两个div之间不能有空格或换行,使用display: inline-block会有空隙,则需要使用float浮动来操作

定位

• 固定定位(fixed):相对于浏览器窗口定位,翻页时位置不变(随着滚动条的变化而不发生改变)

• 相对定位(relative):相对于原本文档流中(不加定位)的位置定位,仍然占据原位置

• 绝对定位(absolute):相对于离他最近的已定义父级进行定位,一直找到浏览器窗口为止

常见css属性

• width:宽度;

• height:高度;

• background:背景;(是一个复合属性)

• background color:背景颜色;

• background-repeat: no-repeat;不平铺

• fout-weight:字体粗细;

• font-size:字体大小;

• text-align: center;文字居中

• text-indent: 首行缩进;

• line-height: 行高;

• line-height: 单行垂直居中;

• border-width: 5px;边距宽度

• border-style: soild;边框样式

• border-color: red;边框颜色

• border:5px solid red;边框宽度颜色样式

• margin-left: 50px;右移50

• margin-top: 50px 0 0 50px;上右下左

• margin: 0 50px 10px;上0 左右50 下10

• margin:20px 30px上下20,左右30

• margin:10px;四个方向都是10px

• margin-left: auto;

• margin-right: auto;左右居中

• margin: 0 auto;左右居中

• display: flex justify-content: space-around;弹性布局,均匀分布

• list-style: none;去列表黑点

• text-decoration: none;去下划线

• cursor: pointer;鼠标放上出变小手的符号