【CSS学习】--- overflow属性

一、前言

  在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”。因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用CSS中的overflow属性来处理溢出的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        p.one{
            width: 100px;
            height: 50px;
            line-height: 20px;
            background: gray;
        }
    </style>
</head>
<body>
    <p class="one">
        这些文字溢出来了,并且它们层叠在下面的图片的下方。
    </p>
    <<img src="images/background.jpg">
</body>
</html>

二、overflow属性简介

  overflow 属性规定当内容溢出元素框(盒子模型)时发生的事情。

属性值:

注意:

如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

三、应用实例

四、最后

原文地址:https://www.cnblogs.com/huwt/p/10541675.html

时间: 2024-11-06 18:17:49

【CSS学习】--- overflow属性的相关文章

CSS学习_属性选择器

CSS选择器参考 [attribute]--选取带有指定属性的元素: [attribute=value]--选取带有指定属性和值的元素: [attribute~=value]--选取属性值中包含指定词汇的元素: [attribute|=value]--选取带有以指定值开头的属性值的元素,该值必须是整个单词: [attribute^=value]--匹配属性值以指定值开头的每个的元素: [attribute$=value]--匹配属性值以指定值结尾的每个的元素: [attribute*=value

关于css中overflow属性

定义和用法 overflow 属性规定当内容溢出元素框时发生的事情. 浏览器支持 所有主流浏览器都支持 overflow 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". overflow的值: visible: 默认的值,内容会呈现在元素框之外. hidden: 内容被修剪,被修剪掉的内容会被隐藏. 例: <html> <head> <style type="text/css&

CSS之overflow属性(2015年06月02日)

很基础的知识,每天get一个小技能...... 一.含义 overflow属性:属性规定当元素框中的内容溢出元素框时发生的事件 通俗来说就是当一个父元素里放置的子元素比它大时,要发生什么 二.属性值 三.测试例子 我们给一个div中包含一张图片,让图片的高度大于div的宽度,然后设置div不同的overflow值,看实际的页面效果 <!DOCTYPE html><html><head lang="en"> <meta charset="

[CSS学习] line-height属性讲解

记:本文可以作为张老师在慕课网上讲解课程的学习笔记 定义 line-height:通过查MDN文档可知 对于块级元素,CSS属性line-height指定了元素内部line-boxes的最小高度.对于非替代行内元素,line-height用于计算line box的高度.对于替代行内元素,如button/input等元素,line-height并没有影响. 查CSS参考手册,line-height表示字体最底端与字体内部顶端之间的距离,应该是不准确的. 张老师说:line-height表示两条基线

css学习----边框属性

CSS 边框属性 参考手册:http://www.runoob.com/css3/css3-borders.html 边框属性有三个 border-radius--------------------------处理边框圆角 box-shadow----------------------------处理边框阴影 border-image--------------------------在使用图片创建边框: border-radius:length(或者百分比)---简写统一设置四个角 每个半

css学习笔记——属性选择器

本笔记参考资料来自——妙味课堂 [attribute]只使用属性名,但没有确定任何属性值 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:

css的overflow属性

原文:https://www.jianshu.com/p/67b536fc67c1 ------------------------------------------- 事实上我挺长一段时间都没弄清楚overflow:scroll与overflow:auto的差别,今天测试了一下,总算是明白了. 语法 overflow:<overflow-style>; ps:<overflow-style>= visible | hidden | scroll | auto visible:

(转)CSS Overflow 属性

原文链接:http://www.qianduan.net/css-overflow-property.html 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的大小.位置和行为都可以用CSS来控制.对于行为,我的意思是当盒子内外的内容改变的时候,它如何处理.比如,如果你没有设置一个盒子的高度,该盒子的高度将会根据它容纳内容的需要而增长.但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么?这就是该添加CSS的overflow属性的时候了,它允许你设定该种

CSS中的overflow属性

导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法并不是如此简单的理解,在很多制作网页的场合我们都需要用overflow,本文介绍overflow的四种常用属性值以及使用. 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的大小.位置和行为都可以用CSS来控制.对于行为,我的意思是当盒子内外的内容改变的时候,它如何处理. 比如

Css学习之清除浮动的方法详解

本文和大家分享的主要是css中浮动清除相关内容,一起来看看吧,希望对大家学习css http://www.maiziedu.com/course/web/有所帮助. 当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. #div { background-color: blu