css学习第五天

yx25900

已于 2023-09-26 16:59:11 修改

阅读量42

点赞数

文章标签： css 学习前端

于 2023-09-21 16:02:36 首次发布

本文链接：https://blog.csdn.net/yx25900/article/details/133131996

版权

一,浮动

介绍:浮起来可以动 float ,属性值可以设置为 left right
功能
1. 在最初，浮动是用来实现文字环绕图片效果
2. 现在浮动是主流的页面布局方式之一。
元素浮动后的特点
1. 脱离了文档流(又叫标准流)
2. 不管之前是什么元素,浮动后都可以设置宽高了
3. 不独占一行,可以和其他元素公用一行
4. 没有margin的合并塌陷问题,可以完美设置 4个方向的margin和padding
5. 不会像行内块一样被当成文本处理
影响
1. 对兄弟元素的影响,后面的兄弟元素,会占据浮动元素原来的位置
2. 前面的兄弟元素没有影响
3. 对父元素的影响,不能撑起父元素的高度，导致父元素高度塌陷,但父元素的宽度依然束缚浮动的元素。
解决浮动的影响
1. 在所有浮动元索的最后面，添加一个块级元素，并给该块级元索设置 clear:both。
2. 给浮动元素的父元素，设置伪元素 xx::after {content='';display:block;clear:noth;}，通过伪元素清除浮动，原理与方案四相同。
总结元素浮动后,元素浮动后,脱标,有文字环绕图片效果(行内和行内块可以看成文字),影响后面的兄弟元素,还是会被父元素的宽度束缚

二,相对定位和绝对定位和固定定位

设置相对定位 position(位置):relative(相对的)
1. 可以用 left right top bottom来调整位置,当同时写了上和下,左和右时候,不管另一个写多少,只执行 top 和 left 上的值
相对定位参考点
1. 参考是的自己原来的位置,如写 top:100px,此时不会是盒子向上移动100px,而是向下移动100px,改变后的位置向上移动了100px就变成了原本的位置
相对定位元素特点
1. 不脱离文档流:还是标准流,还是占着位置的,永恩开E,和浮动(脱离标准流) 不一样,
2. 层级比普通的高:谁写了它,写了的会盖在没写的上面. 都写了的话,后来着居上
3. left和right不能一起设置 top和bottom不能一起设置
4. 相对定位的元素可以添加浮动和调整margin 但是不推荐
设置绝对定位 position(位置):absoulute(绝对的)
1. 可以用 left right top bottom来调整位置,当同时写了上和下,左和右时候,不管另一个写多少,只执行 top 和 left 上的值
绝对定位参考点
1. 参考它的包含块
  1. 对于没有脱离标准流的元素,父元素就是包含块
  2. 对于脱离标准流的元素,第一个开启定位的祖先元素,就是它的包含块(如果所有祖先都没有定位,包含块就是整个页面, 在根元素（<html>）或浏览器视口, 根元素的默认定位通常是 position: static;，这意味着它不会被特别定位，而是按照文档流默认布局。)
2. 所以说子绝父相 (子元素开启绝对定位的同时,为避免出现问题,父元素要开启相对定位)
绝对定位元素特点
1. 脱离标准流,会对后面的兄弟元素、父元素有影响。
2. left和right不能一起设置 top和bottom不能一起设置
3. 绝对定位,浮动不能同时设置,如果同时设置,浮动会失效,以定位为主
4. 相对定位的元素可以添加浮动和调整margin 但是不推荐
5. 无论什么元素设置为绝对定位后,就变成了定位元素

定位元素:宽高都被内容撑开,且可自由设置宽高

总结下来就是: 相对定位没脱标,绝对定位脱标,一个参照自己原来的位置,一个看包含块,子绝夫相,都别加什么 margin padding,绝对定位比浮动牛一些,都不能同时设置left和right,只会执行 top 和 left

7.固定定位设置 position:fixed

1. 可以用 left right top bottom来调整位置,当同时写了上和下,左和右时候,不管另一个写多少,只执行 top 和 left 上的值

8.固定定位参考点

产考它的视口

1.对于pc浏览器,视口就是网页

9.固定定位元素特点

                1.脱离文档流，会对后面的兄弟元素、父元素有影响。
                2. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
                3.固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
                4.固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
                5.无论是什么元素(行内、行内块、块级)设置为固定定位之后，都变成了定位元素。

10.布局

1.布局要确定版心(一个固定宽度且水平居中的盒子) 取名为 container

2.常用类名顶部导航条 topbar(拖把) 导航nav 页头header 页脚 footer 搜索框 search

侧边栏aside 主要内容 main content 广告、横幅、宣传图：banner

3.重置默认样式

1）* {xx} 不推荐使用

2）自定义css文件 reset.css

3) 标准化css 文件 Normalize.css