web前端-3

最新推荐文章于 2024-09-15 21:53:51 发布

小范的一天

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量340

点赞数

分类专栏： web前端文章标签： css html

本文链接：https://blog.csdn.net/qq_43574317/article/details/107127282

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Web前端

盒子模型

外边距

什么是外边距: 元素距上级元素或相邻兄弟元素的距离
赋值方式：

/* 单独某个方向添加外边距 */
/* margin-left: 50px;
margin-bottom: 50px;
margin-top: 50px;
margin-right: 20px; */
/* 给四个方向添加外边距 */
/* margin: 20px; */
/* 上下和左右赋值 */
/* margin: 20px 40px; */
/* 块级元素居中 */
/* margin: 0 auto; */
/* 上右下左赋值 顺时针*/
margin: 10px 20px 30px 40px;

上下相邻两个元素外边距取最大值, 左右相邻外边距累加
粘连问题: 当元素上边缘和上级元素上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元
素添加overflow:hidden解决此问题

边框

赋值方式: border:粗细样式颜色;
单独方向赋值: border-left/right/top/bottom:粗细样式颜色
圆角:border-radius: 5px; 值越大越圆，值大于宽高一半时为圆形
border:none; 去掉边框 border:0;

内边距

什么是内边距: 元素内容距离元素边缘的距离称为内边距
给元素添加内边距会影响元素所占的宽高
赋值方式: 和外边距类似

padding-left/right/top/bottom:10px; 单独某个方向赋值
padding:10px;
四个方向10
padding:10px 20px; 上下10 左右20
padding:10px 20px 30px 40px;

CSS的三大特性

继承性: 元素可以继承上级元素的文本和字体相关样式, 部分标签自带效果不受继承影响,比如:超链接的字体颜色, h1-h6字体大小不受继承影响.
层叠性: 多个选择器有可能选择到同一个元素,如果添加的样式不同则全部层叠生效,如果样式相同
则由优先级决定哪个生效
优先级: 选择器作用范围越小优先级越高,
id>class>标签名>继承

定位方式

文档流定位(静态定位)
元素默认的定位方式

特点: 块级元素从上到下排列,行内元素从左向右排列
通过外边距控制元素位置格式:position:static;

相对定位

格式: position:relative;
特点: 元素不脱离文档流(仍然站着原来的位置)
通过left/right/top/bottom控制元素的显示位置, 值是相对于元素的初始位置
场景: 当需要移动某个元素,并且其它元素位置不变的时候使用相对定位

绝对定位

格式: position:absolute;
特点: 元素脱离文档流(不占原来的位置)
通过left/right/top/bottom控制元素的显示位置,值是相对于窗口(默认)或某一个上级元素 (需
要在上级元素中添加position:relative)
场景:当需要在页面中添加一个元素,这个元素不会影响其它元素的位置,这时使用绝对定位
相对定位和绝对定位总结: 如果需要实现多个元素的层叠效果,则需要将默认的文档流定位改成相对
定位或绝对定位,如果元素需要保留原有位置则使用相对定位,不需要保留原有位置则使用绝对定位