CSS基础重点标签总结

本文详细介绍了CSS中display属性的用法,包括如何将行内元素转换为块级元素,以及块级元素转换为行级或行内块元素。此外,还探讨了背景图片的重复、定位以及如何在网上扒取图片。对于浮动和清除浮动,解释了其原理和应用场景,并提供了多种清除浮动的方法。最后,文章提到了内边距的设置以及在布局中可能遇到的行内块元素之间的间隙问题。
摘要由CSDN通过智能技术生成
  • display:block 块级元素的转换 如:把超链接转换为块级元素,点击一块区域就能进行跳转而不只是点击超链接行级元素
a{
dispiay:block;
}
  • display:inlien; 块级元素转换为行级元素
div{
display:inlien
}
  • display: bolck-inlien 行内块元素
span{
display: bolck-inlien
}
  • 取色小工具

在这里插入图片描述

  • backgroud-repeat属性
    图片不平铺backgroud-repeat:no-repeat;
    图片平铺:backgroud-repeat:repeat;
    图片沿着X轴平铺:backgroud-repeat:repeat-x;
    图片沿着Y抽平铺:backgroud-repeat:repeat-Y;
  • 背景图片的位置
    background-position:x y; x坐标,y坐标
方位名称,顺序无关
 background-position:center top;
 background-position:top right;
  background-position:right;
  background-position:top;
  background-position:-+20 -+39;
  background-position:centen -28
  • 网上扒图片方法
    1、f12-打开网站的图片Css样式-右键-点击open in new tap-打开一个新的窗口-点击图片另存为就好了
    在这里插入图片描述

  • 背景图片固定
    background-attachment:scroll 图片随着滚动条滚动 | fixed 图片固定

  • boder-collapse:collaspe 合并边框

  • 清楚内外边距

*{
padding:0px;
margin:0px;
}
属性解释
padding:10px内边距上下左右都为10
padding:10px 20px内边距上下为10px,左右为20px
padding:10px 20px 10px上 左右 下
padding:10px 20px 10px 10px上右下左
  • float浮动
    1、float属性用于创建浮动框,将其移动到浏览器的最左端或者最右端,比如:两个div都加了右侧浮动,一个div先浮动到浏览器最右侧另外一个也浮动过去紧挨着第一个div 所有起到了一行显示的作用
    2、脱标:脱离标准普通流的控制(浮)移动动到指定位置(动)
    3、浮动盒子不再保留原先的位置
    个人理解:浮动相当于浮起来了,后面的补齐,从上往下看,浮起来的盒子会压住底下的盒子
float:left;
float:right;
float:none;
  • 权重
    复合选择器会有权重叠加的问题,权重会叠加不会进位
    那个权重大 运行哪个
    ui:0001
ui li 权重计算: 0,0,0,1+0,0,0,1=0,0,0,2 {}
.nav li 权重计算:0010+0001=0011{}
a:hover 权重计算:0010+0001=0011{}


  • 清除浮动
    A、 为什么要清除浮动
    父子盒子有时候不方便给高度,但是 加了浮动的盒子会浮起来,最后父级盒子的高度为0,后排的div会自动填充位置,布局会乱
    1、父级没有高度
    2、子盒子浮动了
    3、影响下面的布局,我们就应该清除浮动了
    B、 清除浮动的方法
    1、额外标签法(闭合浮动/隔墙法)
    必须是块级元素
<style>
.clear{clear:both}
</style>
<div class="box">
<div class="damao">大毛</div>
<div class="damao">二毛</div>
<div class="clear">清除浮动</div>
</div>

2、父级添加overflow属性

.box{
overflow:hidden;
overflow:auto;
overflow:scroll;
}

3、父级添加after伪元素

 .clearfix:after{
 centent:"";
 display:block;
 height:0;
 clear:both;
 visibility:hidden; 
}
.clearfix{
*zoom:1;
}
<div class="clearfix"></div>

4、父级添加双伪元素

 .clearfix:before,.clearfix:after  相当于前面堵了一面墙后面堵了一面墙不然浮动盒子跑位{
 centent:"";
 display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{为了照顾低版本浏览器设定的标签
*zoom:1;
}
<div class="clearfix"></div>

行内块元素:表单、图片 单元格 行内块元素中间会有空隙,导致两个盒子再父级装不下换行显示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小六妹妹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值