css层叠样式表盒子模型,CSS层叠样式表-盒子模型

盒子模型

作用：实现网页布局，在网页中画盒子

组成：

边框 border

内边距 padding

外边距 margin

1.边框

.test{

width: 300px;

height: 300px;

border-color: red;

border-width: 2px;

border-style: solid;

/*border-style: dotted; 点线*/

/*border-style: dashed;/*虚线*/*/

/*border: 2px red solid;*/

border-left: 2px red solid;

border-right: 2px red solid;

border-top: 2px red solid;

border-left-color: blue;

border-left-style: dotted;

}

文字

联写方式

border 例子：border: 2px red solid;

必须要设置border-style

没有顺序设置

2.Lable控件

用户名：

//点击lable后直接移动焦点到输入框中

3.内边距

设置内容之间的距离

.box{

width: 300px;

height: 200px;

border: solid 1px red;

/*padding: 100px;*/

padding-left: 100px;

padding-right: 100px;

padding-top: 100px;

padding-bottom: 100px;

}

内容

联写

padding: 10px; /*表示上右下左各10px*/

/*padding联写上下为10px 左右为20px*/

/*padding: 10px 20px;*/

/*padding: 10px 20px 30px; 上面为10 左右为20 下面为30*/

/*padding: 10px 20px 30px 40px; 上面10 右面 20 下面30 左面40*/

4.外边距

盒子与盒子之间的距离，会移动盒子

属性联写与内边距一样

外边距不会影响盒子大小

特点：

垂直外边距合并，只有垂直方向才有，以最大的外边距为准。

垂直外边距塌陷。

解决方法：

1.给父元素设置边框

2.给父元素设置overflow:hidden;

由于overflow:hidden触发了元素的bfc (格式化上下文)，使元素独立出来

.one{

width: 300px;

height: 300px;

background-color: blue;

/*border: 2px red solid;*/

overflow: hidden;

}

.two{

width: 50px;

height: 50px;

background-color: red;

margin-top: 100px;

}

css层叠样式表盒子模型,CSS层叠样式表-盒子模型相关推荐

php盒子模型,CSS盒子模型介绍
什么是CSS盒子模型?CSS盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型一.什么是CSS? CSS(Cascading Style S ...
html文件div盒子浮动,css基础03-盒模型、网站布局思想、浮动以及浮动带来的影响...
定义: 在CSS处理页面的时候,它认为每个元素都是包含在一个不可见的盒子里,盒子模型由内容区域.内容区域周围空间(内边距padding).内边距的外边缘(边框,border)和边框外面将元素与相邻元素 ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
[css] 说说你对css盒子模型的理解
[css] 说说你对css盒子模型的理解 css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子.比如:display: inline-block, 则它的外在的盒子就是i ...
html盒子标准模型,CSS——（二）盒子模型与标准流
CSS--(2)盒子模型与标准流上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型为了理解盒子模型,我们可以先从生活中的盒子 ...
css知多少（7）——盒子模型
原文:css知多少(7)--盒子模型 1. 引言从这一节开始,我们就进入本系列的第三部分--css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类--文字.这部分相 ...
CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...
Web前端线上系统课-01-HTML+CSS/06-CSS盒子模型-CSS设置背景
CSS盒子模型-CSS设置背景盒模型 margin <!DOCTYPE html> <html lang="en"><head><met ...

css层叠样式表盒子模型,CSS层叠样式表-盒子模型

css层叠样式表盒子模型,CSS层叠样式表-盒子模型相关推荐

最新文章

热门文章