CSS基础知识与应用

1、浮动

在css中浮动顾名思义就是在一个地方移动;那么浮动在css中的定义是:

浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止,所以说我们可以通过浮动轻易地改变div或者别的元素的位置。

浮动有两种代码一种是左浮动,float:left;一种是右浮动,float:right;在浮动的时候是可以脱离固定的文档流的,如果我们想让两个div并排但不想用display-inline-block时候,我们便可以使用浮动这个代码

2、定位

css中有三种定位:固定定位 相对定位 绝对定位

​ 固定定位:相对于浏览器窗口定位,翻页时候位置不变(position: fixed;)

相对定位:相对于原本文档流中的位置进行定位,仍然占据原位置(position: relative;)

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

 固定定位也就是说当你拖动网页上下移动的时候已经被固定定位的元素是不会因为你的移动而消失,他是会一直位于浏览器的那个固定位置。

三中定位的含义不一样同时用法也不一样,他们定位的元素也大不相同,所以请在定位的同时想好其中的关系在使用相对正确的定位,比如你想要一个导航条在你的浏览器的位置一直提醒人,那你便可以

选择三个定位中的固定定位。

3、在敲百度网页的时候也有一些知识

例如你想要一个元素当你的鼠标放上去的时候变成一个小手,你便可以在相应的css中输入cursor: pointer;

在超链接的时候你觉得下划线并不美观想要取消掉可以输入text-decoration: none;变成别的颜色也可以使用text-decoration

还有无序列表前面的黑点我们也可以通过list-style的使用来取消(none)或者改成其他的图形

justify-content: space-around; (是让文字均匀分布在标签中)

还有一点是在css的编辑中你发现在编辑一个元素里的孙元素或者子元素,发现代码没有错误,但是确不在网页中显示出来,那么你可能是权重或者是优先级不高,

不同的权重值:行内样式1000,id100,class10,tag1。比如你要写一个class,但是前面你编写了行内样式+id  如果你只是行内样式+class的时候那么你的权重总值变没有行内样式+id的高

那么你的css效果就不会出现

posted @ 2021-12-18 19:58  小马学编程  阅读(92)  评论(0)    收藏  举报