1.CSS布局思路及核心知识点
布局思路:
思考网页的信息语义和结构。根据这些信息把一个网页分成不同的内容块,以及每块内容的目的,然后再根据这些内容的目的用不
同的语义元素建立相应的HTML结构。
核心知识点:
盒模型(流动布局)
浮动(浮动布局)
定位(层布局)
----------------------------------------------------------------------------------------------------------------------------------------------------------2.盒模型概念
从日常生活中出发,在我们的HTML中,所有的标签都是矩形的。围绕着整个矩形,我们可以使用一系列的属性来控制它的显示外
观。具体来说,有如下一些属性:
width: 宽度
height:高度
border:边框
padding:内边距 补白
margin:外边距 边界
background:背景
----------------------------------------------------------------------------------------------------------------------------------------------------------
(1).什么是盒模型?
CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间,即都包含边界、边框、补白、内容区域、背景(包括背景颜色和背
景图片),这就是盒模型。
快速体验:
我们可以利用一些空间来查看盒模型的具体表现:
浏览器的开发者工具(F12)
Dreamweaver软件
(2).盒模型中的属性的基本用法
a.width和height
它们表示元素的宽度和高度。不是指整个盒子所占据的空间。
在设置的时候,通常使用px来进行,如果要实现响应式,则可以使用百分比。
----------------------------------------------------------------------------------------------------------------------------------------------------------
b.border设置
border右三部分构成:
边框的粗细
边框的样式
边框的颜色
三个子属性之间使用空格隔开,顺序没有要求,但尽量按照粗细、样式、颜色的顺序来书写。
当我们写border:5px solid red的时候,意味着四条边都有相同的样式。
如果需要设置不同的边框,怎么办?
可以分开来进行设置:
border-top
border-right
border-bottom
border-left
如图:
----------------------------------------------------------------------------------------------------------------------------------------------------------
c.padding
表示的内边距,或者补白。
所处的区域是指 border和内容之间的那个空间。
但是在实际开发时,需要设置不同的内边距。怎么办?
可以单独的设置四个方向上的padding值
padding-top:
padding-right:
padding-bottom:
padding-left:
实际上,还有简写的方式,
在设置padding属性值的,可以按照上、右、下、左的顺序来设置四边的padding值。
顺时针,从12点开始
TRouBLe,T-top R-right B-bottom L-left
如果padding-top和padding-bottom相同,并且padding-right和padding-left相同的话,我们可以简写:padding: tb rl
还有一种情况:
上下padding不同,左右padding相同
小结:
关于padding的属性值,有四种写法:
只有一个值 上、右、下、左都相同
有两个值:上下是相同的,左右是相同的
有三个值:上下不同,第一个值对应的上,第二个值表示的左右,它们是相同的,第三个值表示下,(这个容易搞错)
有四个值:分别对应于上、右、下、左。
它们都是空格隔开
----------------------------------------------------------------------------------------------------------------------------------------------------------
d.margin
用来设置外边距的。
看似对当前的盒子没什么大的影响,实际上不是的。
我们在计算当前盒子在整个页面中所占空间的时候,是必须要考虑margin 的。
和padding的使用差不多。
margin的写法也有如下几种:
一个值
两个值
三个值
四个值
当然,和padding一样,也可以单独的设置四个方向上的margin值
margin-top
margin-right
margin-bottom
margin-left
关于margin还有一个技巧,可以实现水平居中效果。
----------------------------------------------------------------------------------------------------------------------------------------------------------
e.background
设置盒子的背景。
包括如下两种:
背景颜色
背景图片
背景图片的使用:
小结: