转自:http://www.cnblogs.com/erliang/p/4092192.html

CSS布局模型学习

 

参考链接
慕课网:HTML+CSS基础课程

知识基础

1. 样式

  • 内联
  • 嵌入
  • 外部

2. 选择器

  • 类选择器(“.”)
  • id选择器(“#”)
  • 子选择器(“>”)
  • 包含后代选择器(“ ”)
  • 通用选择器(“*”)
  • 伪类选择符(“:”为状态设置样式)
  • 分组选择符(“,”)

3. 权值

  • 继承的权值为0.1,标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
  • 重要性

    p{color:red!important;}

4. 元素分类

在CSS中,html中的标签元素大体被分为三种不同的类型:

1. 块状元素(display:block)

  • 常用
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
  • 特点
  1. 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

2. 内联元素(display:inline)

  • 常用
    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
  • 特点
  1. 和其他元素都在一行上;
  2. 元素的高度、宽度、行高及顶部和底部边距不可设置;
  3. 元素的宽度就是它包含的文字或图片的宽度,不可改变。

3. 内联块状元素(display:inline-block)

  • 常用
    <img>、<input>
  • 特点
    同时具备内联元素、块状元素的特点
  1. 和其他元素都在一行上;
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

css布局模型

1. 流动模型(Flow)

默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

2. 浮动模型 (Float)

块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。

div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>

3. 层模型(Layer)

图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。
但是在网页上局部使用层布局还是有其方便之处的。
层模型有三种形式:

1. 绝对定位(position: absolute)

将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。

div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>

2. 相对定位(position: relative)

通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px,向右移动100px。

#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>

3. 固定定位(position: fixed)

与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。
以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

4. Relative与Absolute组合使用

相对于其它元素进行定位
1. 参照定位的元素必须是相对定位元素的前辈元素:

<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。
2. 参照定位的元素必须加入position:relative;

#box1{
width:200px;
height:200px;
position:relative;
}
  3. 定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}

这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。

代码简写

1. 盒模型代码简写

padding,border,margin
通常有下面三种缩写方法:

  1. 如果top、right、bottom、left的值相同,如下面代码:

    margin:10px 10px 10px 10px;

    可缩写为:

    margin:10px;
  2. 如果top和bottom值相同、left和 right的值相同,如下面代码:

    margin:10px 20px 10px 20px;

    可缩写为:

    margin:10px 20px;
  3. 如果left和right的值相同,如下面代码:

    margin:10px 20px 30px 20px;

    可缩写为:

    margin:10px 20px 30px;

2. 颜色值缩写

关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
例子1:

p{color:#000000;}

可以缩写为:

p{color: #000;}

例子2:

p{color: #336699;}

可以缩写为:

p{color: #369;}

3. 字体缩写

网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:

body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句:

body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}

注意:

  1. 使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
  2. 在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
    一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:

    body{
    font:12px/1.5em "宋体",sans-serif;
    }

    只是有字号、行间距、中文字体、英文字体设置。

CSS布局模型学习的更多相关文章

  1. CSS布局模型学习(Float、Position、Flexbox)

    一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...

  2. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  3. 从零开始学习html(十二)CSS布局模型——上

    一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...

  4. 从零开始学习前端开发 — 6、CSS布局模型

    一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元 ...

  5. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

  6. 浅析css布局模型1

    css是网页的外衣,好不好看全凭css样式,而布局是css中比较重要的部分,下面来分析一下常见的几种布局. 流动模型 流动模型是网页布局的默认模式,也是最常见的布局模式,他有两个特点: 1.块状元素都 ...

  7. CSS 布局模型

    css布局模型 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上.又不同于我们常说的 CSS 布局样式或 CSS 布局模板.假设说布局模型是本.那么 CSS ...

  8. 前端之CSS布局模型

    一.css布局模型: 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 1.流动模型: 页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型: ...

  9. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

随机推荐

  1. POJ 1170 Shopping Offers(完全背包+哈希)

    http://poj.org/problem?id=1170 题意:有n种花的数量和价格,以及m种套餐买法(套餐会便宜些),问最少要花多少钱. 思路:题目是完全背包,但这道题目不好处理的是套餐的状态, ...

  2. UVa 10943 全加和

    https://vjudge.net/problem/UVA-10943 题意: 把K个不超过N的非负整数加起来,使得它们的和为N,有多少种方法? 思路: d[i][j]表示用i个数加起来为j的方法数 ...

  3. 总结关于express vue-cli

    零零散散,拼起来,花了不少时间,这回把一些东西拼一下吧,免得到时又得重头开始,Blog还没弄好,打算用这些重新写一个,稍接不上,就落后了,这是技术,技术是不断更新换代的,明天这个框架,可以后天就有一个 ...

  4. MongoDB中的数据聚合工具Aggregate和Group

    周煦辰 2016-01-16 来说说MongoDB中的数据聚合工具. Aggregate是MongoDB提供的众多工具中的比较重要的一个,类似于SQL语句中的GROUP BY.聚合工具可以让开发人员直 ...

  5. 网络安全:攻击和防御练习(全战课), DDos压力测试

    XSS 跨站脚本攻击: Cross-site scripting(简称xss)跨站脚本. 一种网站的安全漏洞的攻击,代码注入攻击的一种.XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法 ...

  6. jquery性能优化的十种方法

    jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...

  7. IOS-网络(文件压缩和解压缩)

    // // ViewController.m // IOS_0206_文件上传 // // Created by ma c on 16/2/6. // Copyright © 2016年 博文科技. ...

  8. CF 483B. Friends and Presents 数学 (二分) 难度:1

    B. Friends and Presents time limit per test 1 second memory limit per test 256 megabytes input stand ...

  9. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  10. 彻底解决WP的TextBox中文字过长显示不出来的问题

    文字如果过长的话在TextBox中会显示不完全,这个大家都知道了,后来有人做了ExTextblock增强控件,大部分文字是可以显示出来了,不过,在某些情况下还是会有显示不全的情况. 这个时候一个解决方 ...