盒子模型 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. 题解【洛谷P2853】[USACO06DEC]牛的野餐Cow Picnic

    题目描述 The cows are having a picnic! Each of Farmer John's \(K (1 ≤ K ≤ 100)\) cows is grazing in one ...

  2. （搬运）使用PHPstudy在Windows服务器下部署PHP系统

    原帖地址:http://www.php.cn/php-weizijiaocheng-406175.html 这篇文章主要介绍了关于使用PHPstudy在Windows服务器下部署PHP系统,有着一定的 ...

  3. go之二进制协议gob和msgpack

    文章引用自 二进制协议gob和msgpack介绍 本文主要介绍二进制协议gob及msgpack的基本使用. 最近在写一个gin框架的session服务时遇到了一个问题,Go语言中的json包在序列化空 ...

  4. UseIIS

    asp.net core webapi的program.cs 文件中,要加上 使用IIS进程内,可以大幅提高处理速度

  5. 「JSOI2015」非诚勿扰

    「JSOI2015」非诚勿扰 传送门 我们首先考虑一名女性选中她列表里第 \(x\) 名男性的概率(假设她列表里共有 \(s\) 名男性): \[ P = p \times (1 - p) ^ {x ...

  6. Python连载59-HTTP首部字段和消息头，Thinker简介

    一.首部字段或者消息头 1.下面几个类型都是请求的: User-Agent:关于浏览器和它平台的消息,如Mozilla5.0 Accept:客户端能处理的页面的类型,如text/html Accept ...

  7. 大组合数Lucas

    https://blog.csdn.net/sr_19930829/article/details/39058487 LL Lucas(LL n, LL m, int p){ ; } Saving B ...

  8. spring feign依赖包

    1.feign依赖包 <properties> <java.version>1.8</java.version> <spring-cloud.version& ...

  9. CUP监测1分钟（60s）的python的matplotlib动态作图

    import matplotlib.pyplot as plt import psutil import time # 第1步,导出通用字体设置 from matplotlib import font ...

  10. 吴裕雄 PYTHON 人工智能——基于MASK_RCNN目标检测（5）

    import os import sys import numpy as np import tensorflow as tf import matplotlib import matplotlib. ...