前记:CSS样式核心就是DIV布局,一些基础知识省略不记,接下来的日志只关注最核心的布局问题。

一、一列布局

1.固定宽高

直接声明宽高,或用百分比表示。

width:400px;

width:70%;

2.固定宽高,居中

width:300px;
margin:0px auto;

注:auto让浏览器自动检测边距达到居中目的。

问题1:内容溢出

假如宽高固定,当div内的内容超出层的容纳范围时,会产生溢出。解决办法,通过设置overflow属性。

Overflow语法:
overflow : visible | auto | hidden | scroll

Overflow参数:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值,在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条

CSS定位DIV(一)一列样式的更多相关文章

  1. java基础57 css样式、选择器和css定位(网页知识)

    本文知识点(目录): 1.CSS样式    2.选择器    3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构    2.css(层叠样式表)在一个页面中负责了一个页面 ...

  2. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  3. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  4. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  5. css美化Div边框的样式实例*(转载)

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  6. CSS自学笔记(7):CSS定位

    很多时候,我们需要对一些元素进行自定义排序.布局等,这是就需要用到CSS的定位属性了,用这些属性对一些元素进行自定义排序.布局等操作,可以改变浏览器默认的死板的排序. CSS定位的功能很容易理解,它允 ...

  7. CSS 定位 (Positioning) 实例

    CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...

  8. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  9. CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

随机推荐

  1. linux nginx不区别大小写处理方法

    # 把所有的目录及文件名全改成小写,注意之后新增目录及文件只使用小写命名 递归转换目录或文件名方法:python把指定目录下的递归所有目录和文件名转换成小写或大写(http://www.cnblogs ...

  2. ffmpeg采集帧出错不退出的补丁

    在ffmpeg2.81.11和ffmpeg3.0.7上试验.ffmpeg没有FFERROR_REDO常量定义,但ffmpeg3.0.7上有. diff --git a/libavdevice/v4l2 ...

  3. 【并发编程】Future和FutureTask以及CompletionService

    Future接口 此接口主要用于: 代表异步计算的执行结果: 用于可取消的task:(比使用interrupt实现取消要方便 ) FutureTask类 FutureTask是Future的一个实现类 ...

  4. nohup 后台运行命令

    在Linux上部署zipkin,在SSH客户端执行java -jar zipkin-server-1.21.0-exec.jar,启动成功,在关闭SSH客户端后,运行的程序也同时终止了,怎样才能保证在 ...

  5. jvectormap地图开发和制作任意国家地图

    jvectormap官网上提供了世界地图和很多国家的地图,但不是所有国家的地图都有,比如沙特阿拉伯的国家地图就没有,怎么办呢? 在http://www.amcharts.com/svg-maps/上下 ...

  6. js 按字段分组

    var data = [{"id":"32b80b76-a81e-4545-8065-1e7c57180801","userId":&quo ...

  7. python数据库连接池基于DBUtils

    DBUtils模块的使用的两种方式 DBUtils是Python的一个用于实现数据库连接池的模块 安装 pip install DBUtils 1.使用姿势一(不建议此方法) 为每个线程 (资源占用过 ...

  8. Java遍历一个目录下的所有文件

    Java遍历一个目录下的所有文件   Java工具中为我们提供了一个用于管理文件系统的类,这个类就是File类,File类与其他流类不同的是,流类关心的是文件的内容,而File类关心的是磁盘上文件的存 ...

  9. 【HTTP请求】、详解

    一.协议介绍 HTTP(HyperText Transfer Protocol,超文本传输协议)是一套计算机通过网络进行通信的规则,使HTTP客户端能够从HTTP服务器端请求到信息和服务,目前的版本号 ...

  10. Apt-Cacher-ng 搭建缓存服务器

    docker pull minimum2scp/apt-cacher-ng docker run -d -p 3142:3142 --name=cache -e ACNG_BACKENDS_DEBIA ...