浮动和表格的属性

浮动和清除

float 属性规定元素如何浮动

clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动

float属性

float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值

left元素浮动到其容器的左侧
right元素浮动在其容器的右侧
none元素不会浮动

基本语法

img.float_r {
  float: right;
}

img.float_l {
  float: left;
}

img {
  float: none;
}

clear属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值

none允许两侧都有浮动元素(默认值)
left左侧不允许浮动元素
right右侧不允许浮动元素
both左侧或右侧均不允许浮动元素

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时,应该对清除与浮动进行匹配:如果某个元素浮动到左侧,则应清除左侧。您的浮动元素会继续浮动,但是被清除的元素将显示在其下方

表格

表格的宽度和高度由 widthheight 属性定义。

下例将表的宽度设置为 100%,将 <th> 元素的高度设置为 50px:

table {
  width: 100%;
}

th {
  height: 50px;
}

效果

商品单价数量总价
三只松鼠麻辣味小米锅巴 60g9.9219.8
达利园好吃点香脆核桃饼 208g10.9110.9
可口可乐汽水碳酸饮料 300ml3.513.5
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 CSS 表格浮动框架的示例代码: HTML 代码: ```html <div class="container"> <div class="sidebar"> <h2>Sidebar</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> <div class="content"> <h1>Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, leo sed vulputate congue, sapien arcu aliquet est, id interdum justo magna ac quam. Sed id lectus eget nibh iaculis hendrerit. Donec auctor pulvinar lacus a efficitur. Sed vel dui a eros fringilla feugiat. Nam euismod, orci in dignissim vestibulum, sapien enim lacinia elit, non interdum nibh quam vel sapien. Proin ullamcorper libero sed tristique commodo. Duis ut nisi et sapien tempor tristique. Quisque non mi semper, bibendum nulla a, bibendum quam. Praesent ut mauris interdum, accumsan velit vel, aliquam ipsum. Praesent suscipit diam non risus congue, in commodo sapien condimentum. Pellentesque malesuada justo vel sapien cursus, eu blandit odio lacinia.</p> </div> </div> ``` CSS 代码: ```css .container { display: table; width: 100%; } .sidebar { display: table-cell; width: 25%; padding: 20px; background-color: #f0f0f0; vertical-align: top; } .content { display: table-cell; width: 75%; padding: 20px; } ``` 在此示例中,我们使用 CSS 表格布局来创建一个带有侧边栏和内容区域的页面。 `.container` 类用于创建一个表格容器,其中 `.sidebar` 和 `.content` 类表示表格单元格。我们使用 `display: table` 属性将容器和单元格转换为表格元素,以便它们可以相对于彼此进行布局。我们还使用 `display: table-cell` 属性来指定单元格的布局类型。最后,我们使用 `vertical-align: top` 属性来将侧边栏与内容区域顶部对齐。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值