前记：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. Tcl 和 Raft 发明人的软件设计哲学

    John Ousterhout(斯坦福大学教授,Tcl 语言.Raft 协议的发明人...真的是超级牛人,Title 好多好多,这里就列几个大家熟悉的),在 Google 做了一次演讲,题目就叫 「A ...

  2. TS/ES/PS

    数字信号实际传送的是数据流,一般数据流包括以下三种: ES流(Elementary Stream): 也叫基本码流,包含视频.音频或数据的连续码流. PES流(Packet Elementary St ...

  3. sublime text 2 卸载与重装

    很多同学使用 sublime text2 的时候,出现一些奇怪的bug,且重启无法修复. 于是,就会想到卸载 sublime text2 再重新安装. 然而,你会发现,重新安装后,这个bug任然存在, ...

  4. yii2 memcache 跨平台交互 键和值不一样

    1 首先在配置文件中加载 web\basic\config\web.php ........ 'components' => [ 'request' => [ // !!! insert ...

  5. redis事务,分布式锁

    事务:一组命令集合 主要命令multi 和exec multi set a 1 sadd s1 a ...... exec 错误处理 (1)语法错误 127.0.0.1:6379> multi ...

  6. selenium webdriver——JS滚动到最底部

    JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...

  7. 浅析JavaScript中的typeof运算符

    对JavaScript中的typeof运算符进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果typeof的运算符是数字.字符串或者布尔值,它返回的结果就是"numb ...

  8. 跟我学算法-xgboost(集成算法)基本原理推导

    1.构造损失函数的目标函数 2.对目标函数进行泰勒展开 3.把样本遍历转换成叶子节点遍历,合并正则化惩罚项 4.求wj进行求导,使得当目标函数等于0时的wj的值 5.将求解得到的wj反导入方程中,解得 ...

  9. 使用libcurl显示下载进度

    使用libcurl显示下载进度 http://blog.csdn.net/zhouzhenhe2008/article/details/53876622

  10. IOS 文件解析

    import java.io.BufferedInputStream; import java.io.File; import java.io.FileInputStream; import java ...