css盒模型基础
来源:互联网 发布:淘宝美工助手 编辑:程序博客网 时间:2024/06/07 17:21
一、盒模型概述
通过对日常生活中的盒子和网页中单个模块内部结构的分析,我们发现它们的结构是非常类似的,即箱子就相当于边框,防震物或填充物就相当于内边距,内容则相当于电视机,箱子与箱子之间的距离就相当于外边距。对比学习的目的是让学生深入理解什么是盒子模型及盒子模型的组成。
2.网页布局中“盒子模型”的运用是非常广泛的,所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。一个页面中由很多这样的盒子组成,这些盒子之间会相互影响,因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构(本节课重点),二是理解多个盒子之间的相互关系(之后重点学习)。
二、盒模型结构图
3.理解了盒子的组成结构之后,对应学习相关属性的设置,如:边框(border)、内边距(padding)、外边距(margin)、宽度(width)、高度(height)等。
三、盒模型属性
属性:
*width、height(可设固定值或百分比,如果设百分比则是占据父级容器的百分比)
*margin:margin-top/margin-bottom/margin-left/margin-right(可设负值)
*padding:padding-top/padding-bottom/padding-left/margin-right
*border:border-top/border-bottom/border-left/border-right
属性的简写形式:
方法是按照规定的顺序,给出2个、3个或者4个属性值,它们的含义将有所区别,具体含义如下:
* 如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性;
*如果给出3个属性值,前者表示上边框的属性,中间的数值表示左右边框的属性,后者表示下边框的属性;
*如果给出4个属性值,依次表示上、右、下、左边框的属性,即顺时针排序。
如:
其他属性
*溢出:
*可见性:
*呈现:
*注:Display:none与visibility: hidden的区别
使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空间没有改变(看不见但摸得到),等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失(看不见也摸不到)。
0 0
- css盒模型基础
- CSS基础-盒模型 14
- css基础-盒模型(边框)
- css页面布局基础盒模型
- CSS基础(四):盒模型
- css基础选择器和盒模型
- CSS基础(二)--盒模型与浮动
- CSS基础二:CSS模型
- css基础-布局模型
- css基础,盒子模型
- CSS盒模型:提高你CSS的基础
- Web基础之CSS盒模型和CSS布局
- HTML+CSS基础入门-第十七天(CSS-盒模型)
- CSS、CSS盒模型
- #HTML+CSS基础课程# 第六课:CSS盒模型与布局模型
- CSS基础之盒子模型
- CSS基础之布局模型
- 【CSS 基础】06 盒子模型
- OpenGL入门学习
- C#学习05——IndexOf
- celery + rabbitmq + django
- Android Studio的简单配置
- 终端fish shell简介
- css盒模型基础
- iOS unrecognized selector sent to class 错误
- myeclipse如何修改Web项目名称【申明:来源于网络】
- 链表插入排序
- MDNet: Learning Multi-Domain Convolutional Neural Networks for Visual Tracking
- org.dom4j.DocumentException: no protocol
- 数据库表对表操作之复制表数据
- 什么是分布式系统中的幂等性
- JAVA基础实例