CSS(4)盒子模型

盒子模型(CSS重点)

其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。

1. 看透网页布局的本质

网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢? 看透网页布局的本质: 把网页元素比如文字图片等等,放入盒子里面,然后利用CSS摆放盒子的过程, 就是网页布局。

2. 盒子模型(Box Model)

所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

        CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框 (border)、内边距(padding)、实际内容(content)四个属性。

首先,我们来看一张图,来体会下什么是盒子模型。

所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(element box),它描述了一个文档元 素在网页布局汇总所占的位置大小。因此,每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。

用水果来比喻帮助记忆:

3. 盒子边框(border)

边框就是那层皮。。柚子皮。。。。

语法:border : border-width || border-style || border-color

 

边框属性—设置边框样式(border-style) 边框样式用于定义页面中边框的风格,常用属性值如下:

小提示:

        我们在开发中,经常把表单原本的边框去掉,然后添加任意的样式。(border: 0)

3.1 边框综合设置

border : border-width || border-style || border-color

例如:

border: 1px solid red; 没有顺序

3.2 盒子边框写法总结表

很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。

3.3 border的三角形原理

        当我们加大边框并且各个颜色不一样时,我们先来看看border的表现形式。

#box{
width:100px;
height:100px;
background:yellow;
border-top: 20px solid red;
border-right:20px solid black;
border-bottom:20px solid green;
border-left:20px solid blue;
}

                ​​​​​​​        ​​​​​​​        

        观察上图可以发现,border表现为梯形。当减小box的宽高时,会发生如下变化:

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

        从上图很容易看出,当box宽度降低到很小,也就是border的梯形的上边降到很小。所以想一想,当这 一值降到0时,border就变成了三角形。如下图:

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​  

        所以我们就可以通过将元素宽高设置为0,而通过控制border来得到想要的三角形了。

        实现将不需要方向的border设置为透明(transparent),就可以用来实现三角形了。比如想实现下三角形, 就将border-left,border-bottom,border-right设置为transparent即可。

#box{
width:0px;
height:0px;
border-top: 20px solid red;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid transparent;
}

        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

3.4 圆角边框(CSS3)

        从此以后,我们的世界不只有矩形。radius 半径(距离) 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

语法格式:border-radius: 左上角 右上角 右下角 左下角;

        其中每一个值可以为 数值或百分比的形式。

技巧:border-radius: 50%;  

        让一个正方形变成圆圈以上效果图矩形的圆角, 就不要用百分比了,因为百分比会是表示高度和宽度的一半。 而我们这里矩形就只用高度的一半就好了。精确单位。

演示例子风车:

  • 32
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值