#HTML+CSS基础课程# 第六课:CSS盒模型与布局模型
来源:互联网 发布:大数据培训机构 骗局 编辑:程序博客网 时间:2024/06/08 06:19
盒模型
元素分类
块级元素
<div>
<p>
<h1>
<form>
<ul>
<li>
display:block /*可将元素转化为块级元素*/
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。内联元素(行内元素)
<span>
<a>
<label>
<input>
<img>
<strong>
<em>
display:inline /*可将元素转化为内联元素*/
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。内联块状元素
<img>
<input>
同时具备内联元素、块状元素的特点display:inline-block /*可将元素转化为内联块状元素*/
内联块状元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒模型要点
- 块状元素都支持盒模型
- 盒模型具有四个方向:
top
,bottom
,left
,right
margin
:盒子与盒子之间的距离,称为边界border
:盒子的边框padding
:盒子中边框到内容之间的距离,称为填充 在写CSS时,若不指定方向,则按照顺时针“上右下左”,例如
div{padding:20px 10px 15px 30px;}
如果上、右、下、左的填充都为10px,例如
div{padding:10px;}
如果上下填充一样为10px,左右一样为20px,例如
div{padding:10px 20px;}
盒模型--边框
盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
例如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框:
div{ border:2px solid red;}等同于:div{ border-width:2px; border-style:solid; border-color:red;}
注意:
border-style
(边框样式)常见样式有:dashed
(虚线)|dotted
(点线)|solid
(实线)border-width
(边框宽度)中的宽度也可以设置为:thin
|medium
|thick
(但不是很常用),最常还是用象素(px)
盒模型--宽度和高度
css内定义的宽(width)和高(height),指的是填充以里的内容范围
因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
布局模型
CSS包含3种基本的布局模型:
- 流动模型(Flow)
- 浮动模型 (Float)
- 层模型(Layer)
流动模型(Flow)
流动布局模型具有2个比较典型的特征:
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
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>
层模型(Layer)
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作。
层模型有三种形式:
- 绝对定位(
position: absolute
)- 相对定位(
position: relative
)- 固定定位(
position: fixed
)
层模型--绝对定位
如果想为元素设置层模型中的绝对定位,需要设置position:absolute
,这条语句的作用将元素从文档流中拖出来,然后使用left
、right
、top
、bottom
属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body
元素,即相对于浏览器窗口。
层模型--相对定位
如果想为元素设置层模型中的相对定位,需要设置position:relative
,它通过left
、right
、top
、bottom
属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float
)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left
、right
、top
、bottom
属性确定,偏移前的位置保留不动。
层模型--固定定位
fixed
:表示固定定位,与absolute
定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;
属性功能相同。
Relative与Absolute组合使用
相对于其它元素进行定位必须遵守下面规范:
1、参照定位的元素必须是相对定位元素的前辈元素:
2、参照定位的元素必须加入position:relative
;
3、定位元素加入position:absolute
,便可以使用top
、bottom
、left
、right
来进行偏移定位了。
- #HTML+CSS基础课程# 第六课:CSS盒模型与布局模型
- HTML+CSS基础课程之盒子模型
- 【Html】css布局模型
- Html+Css基础之样式布局模型
- css基础-布局模型
- css页面布局基础盒模型
- CSS基础之布局模型
- HTML基础笔记之CSS盒子模型1(布局)
- Web基础之CSS盒模型和CSS布局
- css盒模型基础
- CSS布局模型/网页布局基础
- HTML+CSS基础入门-第十七天(CSS-盒模型)
- #HTML+CSS基础课程# 第五课:CSS继承与排版
- Html(11)CSS的布局模型
- CSS基础(二)--盒模型与浮动
- css的盒模型和布局模型
- css布局之盒模型
- CSS-弹性盒模型布局
- 【android应用】——设置控件的透明度
- 成为嵌入式开发工程师几个步骤
- 习题2—3完善版本
- Ubuntu 14.04 LTS下安装 LNMP环境
- 盘点Linux下的开源云平台&&云存储服务
- #HTML+CSS基础课程# 第六课:CSS盒模型与布局模型
- Windows下invalid()与paint()之间的关系
- 安装openssl ERROR:POD document had syntax errors at /usr/bin/pod2man line 71
- 【Java基础之内部类】Java内部类作用和详解
- sublime text
- Oracle exists理解
- C常用基础操作
- #HTML+CSS基础课程# 第七课:CSS代码缩写,单位和值
- C++资源管理的利器:RAII