盒模型------CSS
盒子的内心世界
1.模型
通过CSS的眼睛
- 在CSS看来,HTML的所有元素都被看成了盒子:段落,标题,块引用,列表,列表项等。甚至内联元素。
盒子的组成
- 内容区(content):包含内容(文本或图像)
- 内边距(padding):可选的
- 边框(border):可选的
- 外边距(margin):可选的
示图
2.简单介绍
内容区
- 内容区会存放文本或图像。
- 在浏览器的周围,看不到上图其周围的边界。
内边距
- 内边距是透明的,没有颜色,也没有自己的装饰
- 通过CSS,可以控制整个内容区周围内边距的宽度
- 甚至可以控制任意一边的(上,下,左,右)的内边距宽度
边框
- 边框可以有各种不同的宽度,颜色,样式
外边距
- 外边距也是透明的,没有颜色或装饰
3.定制盒子
内容区
- height
- width
内边距
h1{
/*在内容四周增加20像素的内边距*/
padding: 20px;
} h2{
/*分别指定内容四周增加的像素量*/
padding-bottom:20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px
}
边框
- 样式
h2{
border-style: groove;
}
- 宽度
h2{
border-width: thin;
border-width: 5px;
}
- 颜色
h3{
border-color: red;
border-color: rgb(204,102,0);
border-color: #aabbcc;
}
- 指定边框圆角
h3{
border-radius: 15px;
}
- 为某一边指定
外边距
h1{
margin: 30px;
} h2{
margin-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
}
盒模型------CSS的更多相关文章
- 盒模型 | CSS权重 | CSS层叠
span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...
- CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...
- 怪异盒模型和标准盒模型--CSS
一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...
- CSS盒模型(Box Model)
阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...
- 面试汇总——说一下CSS盒模型
本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...
- 前端之CSS盒模型介绍
css盒模型 css盒模型是css的基石,盒模型由content(主体内容),padding(补白,填充),border(边框),margin(外间距); 1.content: width:数值+单位 ...
- CSS系列 (04):盒模型详解
盒模型 CSS盒模型分成W3C标准盒模型和IE模型 W3C标准盒模型(默认):box-sizing: content-box padding和border都会撑开盒子,改变盒子的宽度高度 总宽度:wi ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- css之盒模型
盒模型由内容(content).填充(padding).边框(border).边界(margin)组成,一个盒子中主要的属性就5个:width.height.padding.border.margin ...
随机推荐
- html5 之 canvas 相关知识(三)API-strokeStyle-shadow相关
strokeStyle定义和用法 strokeStyle 属性设置或返回用于笔触的颜色.渐变或模式. context.strokeStyle=color|gradient|pattern;//指示绘图 ...
- html 文件动态加载.PDI 流程图
1 //javascript脚本 <script> window.onload = function () { var aid = document.getElementById(&quo ...
- Redis rdb文件CRC64校验算法 Java实现
查看RDB文件结构,发现最后的8字节是CRC64校验算得,从文件头开始直到8字节校验码前的FF结束码(含),经过CRC64校验计算发现,貌似最后的8字节是小端模式实现的. 参考redis的crc64实 ...
- 【Android学习之旅】1、Android入门介绍
1.Android介绍 1.1 Android的系统架构 下面这张图展示了Android的系统架构: 图中可见,Android大致可以分为四层架构,五块区域: Linux内核层(Linux Kerne ...
- 捕获异常 winform
可以捕获winform中的异常写到文本中 <p>可以捕获winform中的异常写到文本中</p> <div class="cnblogs_code" ...
- SOA 的基本概念及设计原则浅议
SOA是英文词语"Service Oriented Architecture"的缩写,中文有多种翻译,如"面向服务的体系结构"."以服务为中心的体系结 ...
- jquery实现2级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript笔记——点击按钮(或超链接)如何跳转到另外一个页面并执行目标页面的js函数
页面跳转同时执行js代码$(function(){});url参数传递 标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面 ...
- 抓取dump
1,在程序奔溃前部署.adplus.exe -crash -pn explorer.exe -o d: -crash:当进程挂掉的时候抓取dump,只能抓取到进程报错时的信息,如果进程不报错,就无法抓 ...
- Qt学习总结-ui篇(二)
qccs定义圆角 border-radius:10px; 如果想给特定位置定义圆角,如: 左上角:border-left-top-radius:10px; 右下角色:border-right-bo ...