20.CSS盒模型【上】

第十六章  CSS盒模型【上】

一、元素尺寸

属性                   值                    说明              CSS版本

1、width          auto、长度值或百分比     设置元素的宽度            1

2、height         auto、长度值或百分比     设置元素的高度            1

3、min-width      auto、长度值或百分比     设置元素最小宽度          2

4、min-height     auto、长度值或百分比     设置元素最小高度          2

5、max-width      auto、长度值或百分比     设置元素最大宽度          2

6、max-height     auto、长度值或百分比     设置元素最大高度          2

//设置元素尺寸

div{

width:200px;    //可以设置百分比。

height:200px;   //高度设为百分比没用,因为没有参照物。

/*width:auto;*/     }

/*height:auto;*/    } //auto为默认值,width在auto下是100%的值,height在auto下是自适应。

}

解释:设置元素的固定尺寸

//限制元素尺寸

div{

min-width:100px;

min-height:100px;

max-width:300px;

max-height:300px;

}

解释:这一组主要是应对可能动态产生元素尺寸变大变小的问题,从而限制他的最大值和最小值。

二、元素内边框

属性                 值                    说明          CSS版本

1、 padding-top       长度值或百分比          设置顶部内边距       1

2、 padding-botter    长度值或百分比          设置底部内边距       1

3、 padding-left      长度值或百分比          设置左边内边距       1

4、 padding-right     长度值或百分比          设置右边内边距       1

5、 padding           1~4个长度值或百分比    简写属性             1

//设置四个内边距

div{

padding-top:10px;         }

padding-botter:10px;      } == padding:10px;

padding-left:10px;        }

padding-right:10px;       }

/*padding: 10px 20px;*/             // 上下的内边距为10px,左右的内边距为20px

/*padding: 10px 20px 30px;*/        // 上边距10px,左右20px,下边距30px;(因为拗口,所以不常用)

/*padding: 10px 20px 30px 40px;*/   // 顺序为 上右下左;

}

三、元素外边距  (属性同上)

属性                 值                    说明          CSS版本

1、 margin-top       长度值或百分比          设置顶部内边距       1

2、 margin-botton    长度值或百分比          设置底部内边距       1

3、 margin-left      长度值或百分比          设置左边内边距       1

4、 margin-right     长度值或百分比          设置右边内边距       1

5、 margin           1~4个长度值或百分比    简写属性             1

四、处理溢出(当设置了内容尺寸且内容过大时,就会产生溢出的问题,溢出主要有两个方向,右侧和底部。我们可以通过overflow系列的样式来控制它)

属性         值             说明            CSS版本

1、overflow-x    溢出值    设置水平方向的溢出值      3

2、overflow-y    溢出值    设置垂直方向的溢出值      3

3、overflow      溢出值    简写属性                  2

溢出处理主要有四种处理值

值                        说明

1、auto        浏览器自行处理溢出内容,如果有溢出内容,就显示滚动条,否则就不显示滚动条

2、hidden      如果有溢出内容,直接减掉

3、scroll      不管是否溢出,都会出现滚动条,但不同浏览器显示发那个是不同

4、visible     默认值,不管是否溢出,都显示内容

原文地址:https://www.cnblogs.com/keshuai752100461/p/8485177.html

时间: 2024-10-05 05:50:17

20.CSS盒模型【上】的相关文章

第 16 章 CSS 盒模型[上]

学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性 值 说明 CSS 版本 width auto.长度值或百分比 设置元素的宽度 1 height auto.长度值或百分比 设置元素的高度 1 min-width auto.长度值或百分比 设置元

从零开始学习html(十一)CSS盒模型——上

一.元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>.<span>.<br&g

尖刀出鞘的display常用属性及css盒模型深入研究

一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-block后的元素具有block元素可以设置宽高特性,同时又具有inline元素默认不换行的特性. 其实display:inline-block这个属性现在浏览器都支持,其实IE从5.5开始就已经支持了,但是IE6,7支持的还不够完善,我们可以先来做demo测试下就可以明白.为了做demo,所以我们现在需要

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

第16章 CSS盒模型下

第 16章 CSS盒模型[下]学习要点:1.元素可见性2.元素盒类型3.元素的浮动 本章主要探讨 HTML5中 CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性使用visibility属性可以实现元素的可见性,这种样式一般可以配合 JavaScript来实现效果.样式表如下:属性 visibility 值 说明 CSS版本visible 默认值,元素在页面上可见 2hidden 元素不可见,但会占据空间. 2collapse 元素不可见,隐藏表格的行与列. 2 如果不

CSS 盒模型

CSS盒模型也叫框模型,具备内容(content).内边距(padding).边框(border).外边距(margin)这些属性.在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: border:元素的边框(可能不可见),用于将框的边缘与其他框分开: margin:外边距,表示框的边缘与相邻框之间的距离: padding:内边距,表示框内容和边框之间的空间. 盒模型的结构如下图所示: 由上图可以看出,width和height指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响

css盒模型和块级、行内元素深入理解

一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起.添加边框会在内边距区域外边增加一条线.这些线可以有不同的样式和宽度,如实线.虚线.点画线.在边框外边的是外边距,外边距是透明的,一般使用它控制元

CSS盒模型(Box Model)

阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀.盒模型是网页布局的基础,它制定了元素如何在页面中显示,如果足够地掌握,那使用CSS布局那将会容易得多. 1. 什么是CSS盒模型 盒模型,顾名思义,就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,

7.css盒模型

所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素功能的元素.比如<div>.<p>等分组元素 2.行内元素(内联) 所谓行内元素,是不能够设置元素尺寸的,它只能自适应内容.无法隔离其他元素,其他元素会紧跟其后.比如<span>.<b>等文本元素. 3.行内-块元素(内联块) 所谓行内-块元素,可以设置元素尺寸