前记: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. java之 JVM 内存管理详解

    一.JVM结构 根据<java虚拟机规范>规定,JVM的基本结构一般如下图所示: 从左图可知,JVM主要包括四个部分: 1.类加载器(ClassLoader):在JVM启动时或者在类运行时 ...

  2. Hive之 hive的三种使用方式(CLI、HWI、Thrift)

    Hive有三种使用方式——CLI命令行,HWI(hie web interface)浏览器 以及 Thrift客户端连接方式. 1.hive  命令行模式 直接输入/hive/bin/hive的执行程 ...

  3. Fiddler显示响应时间 显示服务器IP

    在主界面菜单上 Rules->CustomRules 在class Handlers{}里添加class 如: 显示响应时间 class Handlers { …… ) function Tim ...

  4. Git自动换行符

    http://blog.csdn.net/jonathan321/article/details/51988242?locationNum=2 不同的操作系统有不同的换行符格式,跨平台协作时需要考虑版 ...

  5. 设置putty标题栏显示固定信息

    设置好后,登录服务器后,发现标题栏又显示root@sit:/opt/ihome,没有显示成我设置的title内容.原因是: 在Terminal->Features中一定要勾选Disable re ...

  6. OPENVPN2.3配置文档官方说明

    openvpn Section: Maintenance Commands (8)Index NAME openvpn - secure IP tunnel daemon. SYNOPSIS open ...

  7. C++中如何强制inline函数(MSVC, GCC)

    #ifdef _MSC_VER_ // for MSVC #define forceinline __forceinline #elif defined __GNUC__ // for gcc on ...

  8. T-SQL 总结

    SP0_AddLinkedServer.sql [创建Linked SQL Server ] USE [master] GO ) drop procedure dbo.SP_Temp_AddLinke ...

  9. Windows 程序 dump 崩溃调试

    Windows 程序捕获崩溃异常 生成dump 概述 事情的起因是,有个同事开发的程序,交付的版本程序,会偶尔随机崩溃了. 悲催的是没有输出log,也没有输出dump文件. 我建议他给程序代码加个异常 ...

  10. python twilio 短信群发 知识留存

    1. win7 32位系统,傻瓜安装Anaconda2(python 2.7) 2. 打开cmd, 输入命令pip install twilio,在线安装twilio 3. 打开Anaconda2的S ...