CSS(5)布局初步

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

设置盒子的背景。

包括如下两种:

背景颜色

背景图片


背景图片的使用:


----------------------------------------------------------------------------------------------------------------------------------------------------------

小结:




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZHOU_VIP

您的鼓励将是我创作最大的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值