0

0

总结css中常见的四个定位属性(left right top bottom)

零下一度

零下一度

发布时间:2017-06-02 10:48:56

|

33582人浏览过

|

来源于php中文网

原创

DIV CSS left right top bottom定位 这四个CSS属性样式用于定位对象盒子,必须定义position属性值为absolute或者relative。 

left     当前元素的左侧与父元素左侧(就是原来默认位置)的距离值。

Right    当前元素的右侧与父元素右侧的距离值。

Top      当前对象顶部距离原位置顶部距离多少。 

Bottom   当前对象底部距离原位置距离多少。

一. CSS中left属性

立即学习前端免费学习笔记(深入)”;

1. CSS中left属性详细介绍

定义和用法

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

注释:如果 "position" 属性的值为 "static",那么设置 "left" 属性不会产生任何效果。

1490577393784953 (1).png

2. 详细介绍CSS之三栏布局的实例(图)

通过float left 和相对width实现

1c1b1f8421ef53494198b371bc186a0b-0.png

绝对定位,通过absolute 定位使其脱离文档流,可以自适应定义三栏宽度

1c1b1f8421ef53494198b371bc186a0b-1.png

使用自身浮动,float left 和float right

f5c25fde61d5b3823645e842516d0293-2.png

3. div中offsetLeft与style.left的区别

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
客户区指的是当前窗口。
如果父p的position定义为relative,子p的position定义为absolute,那么子p的style.left的值是相对于父p的值,这同offsetLeft是相同的

4. div的float:left与span标签

区别在于,p?是一个块级(block-level)元素,它包围的元素会自动换行。而span仅仅是一个行内元素(inline element),在它的前后不会换行。没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,就可以使用元素。需要注意的是,标记可以包含于标记之中,成为他的子元素,而反过来则不成立

二. CSS中right属性

1. CSS border-right-style属性设置元素的右边框样式

CSS border-right-style属性设置元素的右边框样式

边框的样式指的是边框的线条属性,指的是边框采用的是实线效果、短线效果还是其它的线条效果。

border-right-style属性设置的是某一元素的右边框的样式。

2. margin-right 不起作用?_html/css_WEB-ITnose

浏览器默认从左往右渲染元素,在没有超出父容器的宽度的前提下 如果子容器的宽度能够被容纳 设置margin-right是没有用的

3. css margin-left和margin-right使用方法总结

一般在css样式中,使用margin属性来设置外边距。如果只需要一边的外边距,可以使用单边外边距属性为元素单边上的外边距设置值。使用 margin-left 属性设置元素的左外边距。使用margin-right 属性设置元素的右外边距。它们的默认值都为0。在具体的实际使用中可以设置具体的单位值,也可以设置为百分比的形式。本文就来总结一下 margin-left 和 margin-right 的使用方式。

三. CSS中bottom属性

GoEnhance
GoEnhance

全能AI视频制作平台:通过GoEnhance AI让视频创作变得比以往任何时候都更简单。

下载

1. 使用CSS实现Footer置底的五种方式介绍

页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。

当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

201703161651278.png

2. css border-bottom(指定下边线的样式、宽度及颜色)

border-bottom属性用于指定下边线的样式、宽度及颜色,值之间用半角空格间隔,没有先后顺序。

关于border-bottom属性的样式的值,具体可参照边线的样式。边线的宽度的值,具体可参照边线的宽度

3. IE6下margin-bottom设置负数被隐藏的问题_html/css_WEB-ITnose

可是在IE6中当前选项卡的底边框不会盖住父级元素的底边框,网上说父级元素要出发haslaytout,试了都不行,最后在选项卡元素中同时设置 margin-bottom:-1px; position:relative; 这样才解决问题。

这里要注意的是:选项卡元素的高度必须必父级元素高度大1px。

四. CSS中top属性

1. 详细介绍CSS之三栏布局的实例(图)0

1496289037499296.png

在css样式中,margin-top 属性设置元素的上外边距。它可以允许使用负值。默认定义固定的上外边距的值是 0。所有主流浏览器都支持 margin-top 属性。通过本文我们来具体的说一说在前端页面中使用margin-top 属性经常遇到的一些问题,如设置后影响到了父元素怎么办?使用了margin-top 属性没有起作用该如何解决?等等

2. 详细介绍CSS之三栏布局的实例(图)1

这节关于CSS border-top属性用法学习起来就会轻松一些,border-top 简写属性把上边框的所有属性设置到一个声明中。

本文向大家描述一下CSS border-top属性的用法,border-top 简写属性把上边框的所有属性设置到一个声明中,相信本文介绍一定会让你有所收获的

3.  详细介绍CSS之三栏布局的实例(图)2

主要是向 div 元素的四个角添加圆角边框:

注意: border-top-left-radius属性的两个长度或百分比值定义了椭圆的四分之一外边框的边缘角落的形状。第一个值是水平半径,第二个是垂直半径。省略第二个值,它是从第一个复制。如果任一长度为零,角落里是方的,不圆润。水平半径的百分比是指边界框的宽度,而垂直半径的百分比是指边界框的高度。

定位属性(left right top bottom)的相关问答:

1. 详细介绍CSS之三栏布局的实例(图)3

2. 详细介绍CSS之三栏布局的实例(图)4

3. 详细介绍CSS之三栏布局的实例(图)5

4. 详细介绍CSS之三栏布局的实例(图)6

【相关推荐】:

1. 详细介绍CSS之三栏布局的实例(图)7

2. 详细介绍CSS之三栏布局的实例(图)8

3.详细介绍CSS之三栏布局的实例(图)9

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 26万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号