9.盒子模型:
它讲了这样一个事实:在HTML里,在浏览器渲染页面时,所有的元素都是要占据一定空间的,而且这个空间一定是一个矩形的。在我们的浏览器中绝对不出现占据圆形、不规则图形这样空间的元素存在。
简单的来说,我们可以把页面上的所有元素都当做一个盒子看。
盒子由边框(border)、内边距(padding)、内容区(cotent)、外边距(mrgin)
内边距会影响盒子所占的实际空间大小
盒子在浏览器中所占空间大小是由:border、padding、width、height共同作用的。
(1)边框 border 属性
-
border 属性是由3个子属性构成,缺一不可。缺少任何一个子属性,都不能正常显示出边框
-
border 属性的3个子属性 :style、width、color
-
各个浏览器。对于border-style 的值,渲染出来的样子不是100%相同的。能100%相同的有:solid,double,dashed 如果说有特殊样式的边框,还要求必须100%的呈现效果一致,只能使用图片
-
在同一个盒子里,后出现的边框样式会覆盖先出现的边框样式。我们往往都先写一个合写的总的样式,然后再单独写某个方向上的边框样式,来达到某个方向上特殊的边框样式
-
边框的各个子属性可以给1个值,表示4个方向上的样式都一样
-
给2个值,分别代表的是(上下、左右)
-
给3个值,代表的是(上、左右、下)
-
给4个值,代表的是(上、右、下、左)
-
简单的说就是从上方向开始,顺时针转
(2)内边距 padding 属性
padding 也分着上、右、下、左四个方向
如果给盒子添加背景色,这个背景色会作用于整个盒子,包括padding 部分和 border部分
padding 只有 width 这1个属性,没有style、也没有color
(3)盒子的实际占用空间的大小是由3个属性决定的:border、padding、width
盒子的实际大小=border-width*2+padding*2+width
10.标准文档流:
标准文档流的概念:它不是一个东西,也不是一个物件,它其实是浏览器渲染页面的一个规则:所有的页面元素 ,都要按照它下Html文档中出现的先后次序,依次在浏览器中从左上角开始,从上到下,从左到右的顺序依次显示
标准文档流的几个性质
(1)空白折叠
(2)高低不齐,底端对齐
标准文档流把页面上的元素分为两大类:
(1)块级元素
1.单独的占一行
2.可以设置宽高
3.如果不设置宽度,那么它将默认占满父盒子的宽度
(2)行内元素
1.与其他元素自动并排在一行上
2.不能设置它的宽和高,它的宽和高就是自己内容的宽和高
(3)哪些是块级元素哪些是行内元素?
1.可以自动换行的是块级元素,不能自动换行的是行内元素
2.p标签 块级元素
块级元素都是容器级标签,文本级标签都是行内元素,p标签是个特列,它是文本级标签,但是它是个块级元素
(4)块级元素与行内元素是能够相互转换的
display:block(块)/inline(行内)
现在无法实现即能设置宽高又能让不同的块并排在同一行,原因是标准文档流的性质不允许这么做。
所以,现在如果我们必须把网页的内容以这个形式来显示,就必须打破标准文档流的限制。
打破标准文档流的限制有3种方法:浮动、相对定位、绝对定位
11.浮动float
浮动分为左浮动和右浮动
float:left/right;
浮动带来的特性:
(1)浮动的元素会脱离标准文档流
脱离了标准文档流的元素,就可以设置宽和高,而不用理会它是不是块级元素还是行内元素
(2)浮动的元素会相互贴靠
(3)文字围绕现象
(4)收缩现象
写选择器的时候,我们一般都把这个嵌套关系写足
12.清除浮动
(1)给父盒子添加高度属性(height)
父盒子不能被浮动的子元素撑开高度
添加高度虽然能够清除浮动带来的影响,但是它会对我们的页面产生不好的限制,也就是父盒子下不能自适应内容的多少,所以我们需要找到一种不用添加高,也能清除浮动的方法
(2)给第2个盒子添加属性clear:both;
clear就是清除浮动的意思,clear的值有3个:left,right,both.
这个方法有个后遗症,就是垂直方向上的margin 失效了,原因还是因为父盒子没高度
(3)隔墙法
<1>外墙法
就是在2个互相影响的盒子中间,添加1个div,给它添加样式clear:both:height: 10px;
隔墙法隔开的两个盒子,仍然是没有height的。
<2>内墙法
把墙修在第一个盒子的内部,必须放在最后1个元素
(4)overflow
给内部有浮动的元素的父盒子,添加一个overflow:hidden;属性,就能够清除浮动对其他页面元素带来的影响
overflow:hidden 就是溢出隐藏
使用原子化的类
13.外边距margin
margin也分为4个方向,与padding 相同
<1>盒子居中
margin:0 auto;
使用这个语法水平居中的前提
-
盒子必须有明确的宽度
-
只有标准流中的盒子才能使用margin:0 auto 居中
-
margin:0 auto 是使被修饰的盒子在父盒子的区域内部居中,而不能使盒子内部的文本居中对齐 文本的居中对齐属性:text-align:center
<2>margin 的叠加
-
水平方向上的margin 是叠加的
-
垂直方向上的margin 不叠加:margin的塌陷现象 (就高不就低)
做盒子模型,首先横向在一条直线,纵向在一条垂直线
14.行高line-height
css里实现一个效果,往往有多种手段
盒子里内容很多,想让文字和盒子的边框有间距,有缝隙用padding ,单纯垂直集中用line-height
15.font 属性:由3个小属性组成
font-size
font-family
line-height
语法 font:字号/行高 字体;
一个盒子可以同时设置多个字体,一定要让英文的字体写前边,汉字的字体写后边。
所有的汉字字体都有个对应的英文名字:“Microsoft YaHei”<=> 微软雅黑,“SimSun”<=> 宋体做网页的时候不要用稀奇古怪的字体,所有的字体,都必须是客户端的电脑里有这样的字体才能够按你的意图来展示,所以,如果你想用奇特的字体,只能用图片。
16.背景设置
背景颜色:background-color
background-color:red;
background-color:#336699; #369 #rrggbb
background-color:rgb(225,225,255)
背景图:background-image
如果同时设置了背景图和背景颜色,那么背景颜色就会被背景图盖住
17.精确还原盒子
1.初始化
2.设置宽高
-
width
-
height
-
margin
-
border
-
font
-
padding
-
color
18.超链接样式
伪类:
:link 表示用户没点击过的样式
:visited 表示用户点击过之后的样式
:hover 表示鼠标悬停在超链接之上的样式
:active 表示鼠标点击下去但是不松手的样式
a: link,a:visited 选择器等价于 a
如果你真的要同时设置4个伪类,那么必须按照lvha的顺序来写样式表代码 特例,text-decoration 不能从父盒子继承给a标签
元素浮动以后