CSS布局那点事儿
布局
最开始老的一代网站开发,布局都是通过表格实现的。
这样可以形成规整的网格布局,但是也会带来一定的复杂性。比如想要新增某个页面元素,就有可能要改动整个表格,添加很多无用的行或者列。
后来,衍生出不少的CSS框架,他们屏蔽了底层的css语法,只需要按照特定的使用方式就能实现网格布局。这样对于开发者来说,好处自然是方便了;但是也带来了一定的麻烦,比如网格如果不符合用户的应用场景,需要自定义扩展,这就麻烦了;再比如作出的网站不易调试;网站需要引入额外的文件等等。总的来说,还是利大于弊吧,不然bootstrap等等也不会现在火成这样。
CSS布局
网上有很多关于布局的文章,什么双飞翼啊等等。
这里先从最原始的来介绍。考虑到屏幕的宽度不同,有可能造成网页的横向拉伸,为了避免一样过于长,从而导致难于阅读,因此一般的类似博客的网站都会把宽度设置为一个固定的值。当屏幕的宽度拉伸时,也不会改变页面的宽度:
设置的方式大致如下:
width: 920px;
margin: 0 auto;/*水平居中*/
text-align: left;
如果是左右布局,则会考虑把页面分成两个部分。
一个部分向左浮动,一个部分向右浮动。为什么这样呢?
这是因为如果全部采用向左浮动,如果主体部分由文本换行等,由于像素的偏差可能导致最右边的文本框挤出屏幕,导致无法阅读。因此一个向左,一个向右,中间留有一定的隔离区(空白的地方),当有挤出的部分也会显示在隔离区的部分,而不会影响阅读。
.content .primary {
width: 72.82%;
height: 400px;
background-color: yellow;
float: right;
display: inline;
}
.content .secondary {
width: 25%;
height: 400px;
background-color: blue;
float: left;
display: inline;
}
如果是三列的布局,则可以考虑先分成两部分。某一个部分再分成两部分,通过向左向右浮动的方式显示。
巧用min-width和max-width
min-width
和max-width
其实是很长用的。
比如在做响应式web时,考虑到浏览器的伸缩,想要网站也随之改变,那么就会设置宽度高度为一定的百分比,或者通过响应式的语法实现。这时,如果文本内容缩小的很小,宽度很窄可能会影响阅读,因此需要把宽度设置为一个最小值。只有屏幕宽度大于一定的值时,页面才会随之改变。类似的,避免屏幕过大网站拉伸变形,也可以设置一个最大的宽度值。
这个属性对于图片和div都有很好的效果。
CSS布局那点事儿的更多相关文章
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS 布局经典问题初步整理
CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
随机推荐
- Servlet简单增删改查
前台页面是别人给的. 例子: package cn.itcast.cus.dao; import java.sql.SQLException; import java.util.ArrayList; ...
- linux命令学习笔记(17):whereis 命令
whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和 源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度 ...
- 在Windows下搭建Android开发环境
随着移动互联网的迅速发展,前端的概念已发生很大的变化,已不仅仅局限在网页端.而Android系统作为智能机市场的老大,作为前端开发工程师, 非常有必要了解和学习.但面对众多学习资料,站在前端开发工程师 ...
- 说几个JS优化技巧吧
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...
- 冷备手工完全恢复(recover database,recover tablespace,recover datafile)
冷备手工完全恢复 1. 手工完全恢复三种级别: recover database: 所有或大部分datafile丢失,一般是在mount状态完成.recover tablespace: 非关 ...
- poj 1637 Sightseeing tour —— 最大流+欧拉回路
题目:http://poj.org/problem?id=1637 建图很妙: 先给无向边随便定向,这样会有一些点的入度不等于出度: 如果入度和出度的差值不是偶数,也就是说这个点的总度数是奇数,那么一 ...
- POJ 2017 No Brainer(超级水题)
一.Description Zombies love to eat brains. Yum. Input The first line contains a single integer n indi ...
- freeMaker的工具类
package com.ek.util; import java.io.BufferedWriter; import java.io.ByteArrayOutputStream; import jav ...
- 二叉搜索树的结构(30 分) PTA 模拟+字符串处理 二叉搜索树的节点插入和非递归遍历
二叉搜索树的结构(30 分) 二叉搜索树或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值:若它的右子树不空,则右子树上所有结点的值均大于它的根 ...
- 在java web项目中编写自己的代码生成器
在java web项目中编写自己的代码生成器