css 5——常见”display”属性、浮动(float)、如何清除浮动带来的影响、定位(position)、列表样式、其他样式补充

本文详细介绍了CSS中重要的样式属性,包括块级元素与行内元素的`display`转换,浮动效果及清除方法,定位原理与应用,列表样式的设置,以及元素可见性、光标样式的控制。通过这些概念,可以帮助前端开发者更好地理解并控制网页布局。

1、标签的几种常见”display”属性

block“块”元素
inline“行内”元素
inline-block 行内块元素
none隐藏

块元素、行内元素和行内块元素可以互相转化

2、浮动(float)


  float :  left    左浮动
  float :right   右浮动
  float : none  默认 不浮动

加了浮动的元素会自动块化

3、如何清除浮动带来的影响

 1.给父元素加height
 2.给父元素加overflow:hidden
 3.在所有有浮动的元素后加一个空元素div,给此空元素添加样式clear:both
      clear:left   清除左浮动
      clear:right    清除右浮动
      clear:both   清除左、右浮动
  4.给父元素添加伪元素,在此伪元素上清除浮动
     .clearfix::after{
           display:block;
           content:"";
           clear:both;
     }

4、定位(position)

(1)static   默认  正常文档流定位
(2)relative    相对定位   相对于原来的自己定位
(3)absolute   绝对定位
              a)包含框无定位,相对于浏览器定位
              b)包含框有定位,相对于离自己最近的有定位的元素定位
 (4)fixed     固定定位     始终相对于浏览器定位

 配合left、right、top、bottom的值来改变元素位置,z-index  z轴的堆叠顺序(只有在定位中才管用)

5、列表样式


list-style-type   列表样式类型(disc/square)
list-style-image  列表样式图片
list-style-position  列表样式位置(outside / inside)

6、其他样式补充


元素不可见  display:none    
                    visibility:visible/hidden
                    opacity:取值0-1
光标样式      default   默认  白箭头
                     text   默认  文本工字型
                     wait   等待状态
                     help   帮助状态
                     pointer  链接样式   小手状
                     url("图片路径"),auto   自定义光标样式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值