盒子模型 Box  Model

  • 所有HTML元素可以看做盒子，CSS模型本质上是一个盒子，封装周围的HTML元素
  • 包括：边距,边框,填充和实际内容
  • 盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素

Margin（外边距）：清除边框区域。Margin没有背景颜色，完全透明

border（边框）：边框周围的填充和内容，受到盒子的背景颜色的影响

Padding(内边距) : 清除内容周围的区域。会受到框中填充的背景颜色影响

content（内容）：盒子的内容，显示文本和图像

CSS Border（边框）：

围绕元素内容和内边距的一条或者多条线，对于这些线条，可以自定义它们的样式、宽度、颜色。

使用CSS边框属性，我们可以创建出比HTML中更加优秀的效果。

border-style（边框样式）：

  • none：默认无边框
  • dotted:定义一个虚线框
  • solid：定义一个实线边界
  • double：定义两个边界，两个边界的宽度和border-width的值相同
  • groove：定义3D沟槽边界，效果取决于边界的颜色值
  • ridge:定义3D脊边界，效果取决于边界的颜色值
  • inset：定义一个3D的嵌入边框，效果取决于边界的颜色值
  • outset:定义一个3D突出边框。效果取决于边界的颜色值
  • transparent:透明不可见的边框，必要时可以使其可见

border-color(边框颜色)：

  • name：指定颜色名称
  • RGB：指定RGB值
  • Hex：指定16进制值

各个侧面单独设置边框：

  • border-top-style:dotted
  • border-right-style:solid
  • border-bottom-style:dotted
  • border-left-style:solid

CSS轮廓（outline）：

  • 轮廓是会绘制于元素周围的一条线，位于边框边缘的外围，起到突出元素的作用
  • 轮廓属性指定了样式，颜色和外边框的宽度
  • 轮廓属性的位置让他不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示

CSS Margin：外边距

  • Margin属性定义元素周围的空间，外边距无背景颜色且完全透明
  • margin属性接收任何长度单位、百分数值甚至负值
  • margin可以单独改变元素的上下左右编剧，也可以一次改变所有的属性

CSS Padding(填充）

  • padding属性定义元素边框与元素内容之间的空间
  • 被清除的padding属性所释放的区域将被背景颜色填充
  • 单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变
  • 填充属性可以使用长度值(pt,em,px)或者百分比值，但与margin属性不同，它不允许使用负值

padding可以有一到四个值：

padding:25px 50px 75px 100px

  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px

padding:25px 50px 75px

  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px

padding:25px 50px

  • 上下填充为25px
  • 左右填充为50px

padding:25px

  • 所有的填充都是25px

CSS嵌套和分组

  • CSS分组可以具有相同样式的选择器进行分组，减少代码量
  • CSS嵌套适用于选择器内部的选择器样式

分组：

h1,h2,p 
{ 
color:green; 
}

嵌套：

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

p

{

    color:blue;

    text-align:center;

}

.marked

{

    background-color:red;

}

.marked p

{

    color:white;

}

</style>

</head>

<body>

<p>This paragraph has blue text, and is center aligned.</p>

<div class="marked">

<p>This paragraph has not blue text.</p>

</div>

<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>

</body>

</html>

CSS尺寸：

CSS Display and Visibility：

隐藏元素：

  • display设置为none
  • visible设置为hidden
  • 区别：
  • display隐藏元素，元素不再占用空间
  • visibility隐藏元素，元素依然影响布局

同行显示：

  • li {display:inline;}

span转换成块元素：

  • span {display:block;}

2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility的更多相关文章

  1. css 样式设计（一）（ 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 ）

    一.css在线150个例子 http://www.w3cschool.cc/css/css-examples.html 二.背景图片水平方向重复 : body { background-image:u ...

  2. css盒子模型、垂直外边距合并

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

  3. CSS.03 -- 浏览器行高、字体；盒子模型--边框、内边距、外边距

    如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件   ctrl+n 打开文件  ctrl+o 调出和隐藏标尺 ctrl+r ...

  4. 认识W3C标准盒子模型，理解外边距叠加

    概述: 注:加粗斜体字是非常重要的概念,决定着你是不是能看懂那句话,所以不懂的请一定要搜索一下. 页面上的每个元素,都在一个矩形框里.   每个矩形框都是一个盒模型.   每个盒模型都由内容区域(co ...

  5. 前端 CSS 盒子模型 边框 border属性

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...

  6. css盒子模型之边框宽度，边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

  7. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  8. 前端学习（十三）：CSS盒子模型

    进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...

  9. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

随机推荐

  1. 转载：AAC编解码概述

    转自:http://www.cnblogs.com/gaozehua/archive/2012/05/03/2479960.html 编码概述 其整体AAC 编解码系统,如图所示,其编码流程概述如下: ...

  2. maven版axis2调用cxf服务端开发客户端(三)

    一.新建一个maven项目 二.pom.xml引入axis2依赖 <dependency> <groupId>org.apache.axis2</groupId> ...

  3. buuctf admin writeup

    熟悉的登陆注册页面,结合结合题目admin的提示,想到是通过修改admin用户密码或伪造admin身份的方式来以admin账户.查看源码,看到了一个hint: 下载下来,是靶场的源码首先尝试抓包分析, ...

  4. Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/tools/ant/launch/Launcher : Unsupported major.min

    有事这么一大串错误 1.版本问题 首先看咱们的jdk安装的版本,我装的是1.7.0,但是ant下的是1.10.0版本,换成1.7.0就ok了 官网下载http://ant.apache.org 所有版 ...

  5. iOS 开发之函数式编程思想（Functional Programming）

    函数式编程(Functional Programming), 函数式编程强调的函数:1.不依赖外部状态:2.不改变外部状态. 函数式编程可解决线程安全问题,每一个函数都是线程安全的. 时间状态:变量一 ...

  6. python的组合数据

    python的组合数据包括:1.列表list[   ] 2.元组tuple(),3.字典dict{"x":"y"},4.集合set{} 1.创造组合数据:均可直 ...

  7. php mongdb driver 1.17

    Installation To build and install the driver: $ pecl install mongodb $ echo "extension=mongodb. ...

  8. 攻防世界 web 新手练习 刷题记录

    1.view_source 既然让看源码,那就F12直接就能看到. 2.robots 先百度去简单了解一下robots协议 robots协议(robots.txt),robots.txt文件在网站根目 ...

  9. 实现简单ORM案例

    ORM框架: • 我们希望设计一个可以实现对象和SQL自动映射的框架,但是整体用法和设计比Hibernate简单.砍掉不必要的功能.• 会穿插使用设计模式• 增加 – 将对象对应成sql语句,执行sq ...

  10. traceback说明

    一:traceback说明 该模块提供了一个标准接口来提取,格式化和打印Python程序的堆栈跟踪.它完全模仿Python解释器在打印堆栈跟踪时的行为.当您想要在程序控制下打印堆栈跟踪时,这很有用. ...