div固定大小文字溢出自动缩小_CSS样式更改——框模型、定位、浮动、溢出

2024-04-12 22:33:42

前言

上篇文章主要介绍了CSS样式更改篇中的列表、表格和轮廓，这篇文章主要介绍CSS样式更改中框模型、定位、浮动、溢出基础知识。

1.框模型Border Model

从上图可以得知，如果把一个网页比作一个方框，那么border padding margin 所扮演的角色。

通过通用选择器，可以设置所有的元素的border padding margin 初始值为0：

*{
margin:0;
padding:0;
border:0
}
所有的边距都可以用em  px 百分比来设置
它们都有四个值，你可以单个设置，也可以一起设置，顺序为top-right-bottom-left

2.定位Position

1).相对定位relative

相对于其正常位置进行定位

div{position:relative
}

2).绝对定位absolute

相对于 static 定位以外的第一个父元素进行定位

div{position:absolute
}

3).静态定位static

没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

div{position:static
}

4).固定定位fixed

相对于浏览器窗口进行定位

div{position:fixed
}

3.浮动Float

元素内的内容向某个方向移动

div{float:left
}
left  左浮动
right 右浮动
none  不浮动

4.溢出Overflow

元素内容超过了框架的大小

div{overflow:scroll
}
visible 内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

参考文档：W3C官方文档（CSS篇）

总结

这篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识，希望让大家对CSS样式更改有个简单的认识和了解。想要学习更多，请前往Python爬虫与数据挖掘专用网站：http://pdcfighting.com/ 想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

div固定大小文字溢出自动缩小_CSS样式更改——框模型、定位、浮动、溢出相关推荐

jQuery实现 div里面的文字如何自动缩小，避免文字溢出
今天用 jQuery实现 div里面的文字如何自动缩小,避免文字溢出的一个例子代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
div固定大小文字溢出自动缩小_【高并发】高并发环境下如何防止Tomcat内存溢出？看完我懂了！！
写在前面随着系统并发量越来越高,Tomcat所占用的内存就会越来越大,如果对Tomcat的内存管理不当,则可能会引发Tomcat内存溢出的问题,那么,如何防止Tomcat内存溢出呢?我们今天就来一起 ...
div固定大小文字溢出自动缩小_Figma 教程 | 文字工具
想看更多 Figma 教程.资源请访问 Figma 中文网:https://figmacn.com 欢迎来到 Figma 教程.在这个教学视频中,我们将一起学习文字工具和字体的基本使用. 在设计中文字 ...
css文本换行_CSS样式更改——文本Content
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法 1)).首行缩进文本 <div style='text-indent:2em'& ...
css 不换行_CSS样式更改——文本Content
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法 1)).首行缩进文本 2)).文本对齐方式 3)).字间距 4)).文本间距 5)). ...
css文字竖直显示_CSS属性设置 -- 盒子模型
Ⅰ 简介 HTML文档中的每个元素都被比喻成盒子,盒子模型通过四个边界来描述 margin -- 外边距,一个相框与另外一个相框之间的距离 border -- 边框,边框指的就是相框 padding ...
php textarea 属性,html表单中textarea属性怎么固定大小？textarea属性实例介绍
本篇文章主要的介绍了关于HTML表单中的textarea属性的固定的大小使用的文本域,可以用作网页的留言框,下方还有具体的表单页面详解,接下来就让我们一起看这篇关于HTML表单中的textarea属性 ...
ios 自动缩小字体_CSS：禁用iPhone上字体大小的自动缩放
如解释here,Apple iPhone(即Safari)在视区更改时(即,从纵向到横向或反之亦然)重新缩放字体大小.CSS:禁用iPhone上字体大小的自动缩放接受的回答这个问题说,为了禁止这种行 ...
div文字溢出自动加省略号（…）
CSS3属性之五:text-overflow 语法: text-overflow : clip | ellipsis 取值: clip: 不显示省略标记(...),而是简单的裁切. ellipsis: ...

最新文章

热门文章