CSS布局(一)

本节内容:

没有布局

display属性

margin:auto;

max-width

盒模型

没有布局

如果想把所有内容都塞进一栏里,那么不用设置任何布局也是可以的。然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常不适:读完每一行之后,你的视觉焦点要从右向左一大段距离。

display属性

dispaly属性是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的display值,这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个block元素通常被叫做块级元素。一个inline元素通常被叫做行内元素。

block:

div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括p、form以及html5中的新元素:header、footer、section等等。

inline:

span是一个标准的行内元素。一个行内元素可以在段落中,包裹一些文字而不会打乱段落的布局。a元素(链接)是最常用的行内元素。

none:

另一个常用的display值是none。一些特殊元素的默认display值是它,例如script。display:none通常被JavaScript用来在不删除元素的情况下隐藏或显示元素。

它和visibility属性不一样。把display设置成none不会保留元素本该显示的空间,但是visibility:hidden;还会保留。

每个元素都有一个默认的display类型。不过可以随时随地的重写它。可以把有特定予以的元素改成行内元素。常见的例子是:把li元素修改成inline,制作成水平菜单。

margin:auto;

<div id="main" style="width:600px;margin: 0 auto;border:1px solid black">
</div>

设置块级元素的width可以阻止它从左到右撑满容器。然后就可以设置左右外边距为auto来使其居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。以上的div会居中显示在浏览器中间。

问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚懂条来容纳页面。接下来改进这个方案......

max-width

<div id="main" style="max-width:600px;margin: 0 auto;border:1px solid black">
</div>

在这种情况下使用max-width代替width可以是浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要,调整以下浏览器即可见到效果。(所有的浏览器包括IE7+在内都支持max-width)

盒模型

当设置了元素的宽度,实际展现的元素却能够超出设置:因为元素的边框和内边距会撑开元素。情况如下(两个div设置了一样的width值,大小却不一样):


simple类的div元素的盒模型(Chrome上显示,可见元素没有内边距padding值,border实际值时0.667,实际设置是1像素;上下外边距是20像素,左右外边距是361.333两边自动平分,实际div大小是蓝色的块状)。

fancy类的div元素的盒模型。内边距padding值是50像素,border值是0.667,实际设置是1像素;margin设置和simple一样。而实际div的大小和simple一样。

时间: 2024-10-10 16:40:22

CSS布局(一)的相关文章

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们

现在主流网站为什么都用div+css布局而不是用table

由于刚刚接触前端,一直觉得table布局在代码上看起来比div+css更整洁,div+css布局的页面,一堆的<div><div><div>...</div></div></div>看起来都让人犯密集恐惧症,那么为什么现在的主流网站还都乐此不疲呢?为什么div+css反而成了一种主流布局方式呢?一直对此不解.这篇文章好像是解决了我的问题,先摘录过来,以便查阅. 以下内容摘自:http://www.divcss5.com/wenji/w

&lt;转载&gt;div+css布局教程之div+css常见布局结构定义

在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索框.页脚(版权和有关法律声明). 通常采用DIV元素来将这些结构定义出来,类似这样: <div id="Container"></div> 页面层容器 <div id="header"></div> 页面头部 <di

&lt;转载&gt;Div+Css布局教程(-)CSS必备知识

目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 background:#09F; 2.背景图像 background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

CSS篇之DIV+CSS布局

<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">

css布局实践总结(part2)

一.总结: 在第一篇css布局实践心得总结中总结了通过给元素设置position:absolute的方式让元素处在BFC(块级格式化上下文)的环境中,处在BFC环境中的元素是独立的,它和外面其他元素毫无关系. 今天很兴奋的是实践到了通过将元素设置成line-block的方式让元素处在BFC的环境中,让其与外面的元素隔绝关系.还是引用这张图. 问题:如何让一个块级元素在没有采用float或position:absolute的情况下(采用这两种方式布局的元素,元素都会脱离文档流,元素大小由元素里面的

css012 css布局简介

css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的html代码数量应该尽可能减到最少,尤其是div标签的嵌套,当使用div标签有助于网页布局设计时,就很好用.但是并不是div嵌套的越多越好. 2.html5的分区元素 <div>  用于分割区域,块级元素 <span> 行内分区元素 <article> 给网页或者网页的分区提

div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)

站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见 同时不希望将初学的您 带入走火入魔的状态! 1 :css (cascading style sheet): 初学者可以下载一本css 2.0 手册 大概48小时的时间可以看完 试完.至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意 无论

一些css布局

# css布局 #---bootstrap   详情请看官方文档---首先要按照相应的官方规范引入相应的css js fonts等 container相当于一个容器 一般设置一个 接下来设置行 用row row里面套col col里面可以继续套row   row不能直接套row <div class="container">        <div class="row header">            <div class=&q

div css布局兼容性问题

在strict mode中:width是内容宽度 ,也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right; 在quirks mode中:width则是元素的实际宽度 ,内容宽度 = width – (margin-left + margin-right + padding-left + padding-rig