CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念。盒模型用于元素定位和页面布局。
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:
* {
margin: 0;
padding: 0;
}
基本语法格式: <style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid black;
border-bottom: 50px solid red;
border-left:50px solid blue ;
border-right: 50px solid pink;
border-top: 50px solid yellow;

}
</style>
<body>
<div>
我是盒子
</div>
通过上述的代码可以得到一个最基本的盒子模型
二 、内边距padding
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性

CSS padding 属性定义元素边框与元素内容之间的空白区域
padding的使用下面四个单独的属性,分别设置上、右、下、左内边距:
padding-top
padding-right
padding-bottom
padding-left
切记padding的赋值不能为负数
例:
padding: 10px;//四个方向
padding: 10px 20px; //上下 左右
padding: 10px 20px 30px;//上 左右 下
padding: 10px 20px 30px 40px;//上 右 下 左
padding-bottom: 40px;
padding-left: 20px;
padding-right: 30px;
padding-top: 10px;
padding: 0 20px;
margin: 50px;
三 、边框border
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线
切记border的赋值可以为负数
Border常用属性border-style,boder-width,border-color
例:
div{
width: 300px;
height: 300px;
border: 1px solid black;
border-bottom: 50px solid red;
border-left:50px solid blue ;
border-right: 50px solid pink;
border-top: 50px solid yellow;

}
制作三角形的小技巧:如果将width 和height改为0,并选择border-left, border-right, border-top的颜色为透明,则会显示一个三角形。

四、外边局合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
例:<style type="text/css">
.div1,.div2{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.div1{
margin-bottom: 100px;
}
.div2{
margin-top: 50px;
}

</style>
<body>
<div class="div1">篮球</div>
<div class="div2">足球</div>
</body>
结果显示为篮球和足球的外边距为100px,取了较大值作为连个边框的距离。
五、布局
默认的浏览器中,文档的布局是将文件元素从上到下、从左到右的格式布局,块级元素从上到下,行内元素从左到右依次排列。
例:<style type="text/css">
.out{
width: 1000px;
height: 150px;
border: 1px solid red;
margin: 50px 50px;
}
.in{
height: 120px;
background: green;
padding:10px;
}
</style>
<body>
<div class="out">
<div class="in">内容</div>
</div>
结果显示为in的框套在out框的里面,切in在没有写入width的情况下,默认与其父级元素的width一致
六、CSS 定位机制
CSS块级元素和行内元素的转换
div{
display:none 不显示
display:block 1.转换为块级元素2.显示
display:inline 转换为行内元素
display:inline-block 不常用
}
CSS 有三种基本的定位机制:普通流、浮动和绝对定位
CSS positon属性
static 静态的
relative 相对(偏移)
absolute 绝对(脱离)
fixed 固定(脱离)
例:.left,.middle,.right{
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.middle{
/*//相对定位*/
position:relative;
top: 50px;
left: 50px;
/*//绝对定位*/
position: absolute;
top: 50px;
left: 50px;
}
.out{
padding: 100px;
border: 1px solid red;
height: 300px;
position: relative;
}
<body>
<div class="out">
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</div>
</body>
相对定位:框子转移后,原来的位置没有被占有.
绝对定位:框子转移后,原来的位置被占有且相对最初的包含块来定位完后成为一个块级元素.
固定定位
可以用于网页两边的固定栏
例:<style type="text/css">
.left,.right{
width: 100px;
height: 100px;
border: 1px solid black;
}
.left{
float: left;
position: fixed;
top: 100px;
left: 0;
}
.right{
float: right;
position: fixed;
bottom: 100px;
right: 0;
}

</style>
结果显示为左右两个不动的框
CSS水平和垂直居中的几种实现方法
水平居中:text-align,margin 0 auto,定位
垂直居中:line-height,vertical-align,margin,定位
CSS浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止,它会脱离文档流
语法规则:.left,.middle,.right{
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.middle{
clear: both;
}
其中clear以清除元素为中心,将后面的元素换行,拉倒其后面

CSS盒模型的更多相关文章

  1. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  2. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性 使用 vis ...

  3. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 C ...

  4. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  5. [k]css盒模型

    box-sizing :  content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...

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

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  7. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

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

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  9. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

随机推荐

  1. C# 根据类名称创建类示例

    //获得类所在的程序集名称(此处我选择当前程序集) string bllName = System.IO.Path.GetFileNameWithoutExtension(System.Reflect ...

  2. keepalived衡环境搭建

    环境信息 keepalived master 192.168.1.106 keepalived backup 192.168.1.103 vip 192.168.1.100 1,安装keepalive ...

  3. Mediator(中介者)-对象行为型模式

    1.意图 用一个中介对象来封装一系列的对象交互.中介者使各个对象不需要显示地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 2.动机 通过将集体行为封装在一个单独的中介者对象中,中介者 ...

  4. ubuntu pip 安装django报错解决

    系统版本 ubuntu  Kylin 16.04 LTS       安装pip3 安装 Django 总是提示time out,无法安装. 逛了好多论坛终于遭到了解决办法,分享保存: sudo pi ...

  5. Android发送短信核心代码

    核心代码:(1)SmsManager manager = SmsManager.getDefault(); //获得默认的消息管理器(2)ArrayList<String> list = ...

  6. Dapper关联查询

    1.一对一: using (IDbConnection connecton = new MySqlConnection(ConfigurationManager.ConnectionStrings[& ...

  7. TDDL DataSource

    TDDL DataSource 分为 AtomDataSource GroupDatasource 他们两者没有依赖关系, 都实现了 JDBC 规范, 可以作为独立的 datasource 单独使用 ...

  8. fiddler的前端资源代理功能。

       说一个很有用的东西.fiddler的autoResponder功能能把线上网站的资源引用代理到本地.比如这个js.我们改了想测测效果.但是如果经过中间的流程要把这个文件发布到线上去挺麻烦的,而且 ...

  9. DNS弹窗广告遭遇

    事情是这样的,不久前,我跟往常一样打开某新闻网页的时候,发现右下角有弹窗广告,并且在原页面任意位置点击,都会打开一个广告页面,然后原页面才能正常点击,手法太低劣了,不像是网站挂的广告,然后打开其它网页 ...

  10. Javascript 处理时间大全

    1. 获取从今天算起,几天后的日期 function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate() + ...