盒子模型 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. MVC简要介绍

    (转自:http://www.cnbeta.com/articles/107924.htm) MVC不是一种设计模式(design pattern),它是一种架构模式(Architectural pa ...

  2. VS2017新建或拷贝项目编译时出现：找不到 Windows SDK 版本8.1.请安装所需的版本的 Windows SDK

    VS2017新建或拷贝项目编译时出现:找不到 Windows SDK 版本8.1.请安装所需的版本的 Windows SDK 或者在项目属性页的问题解决方案 解决方法: 右击项目解决方案, 选择:重定 ...

  3. Nginx开始（自己使用，简单开始）

    Nginx 1.网址 2.安装 如果需要资料的话可以直接来下载进行下载 前提 sudo yum install yum-utils 云主机重启之后需要执行 nginx -c /etc/nginx/ng ...

  4. December 31st, Week 53rd Tuesday, 2019

    Nothing comes from nothing. 天下没有免费的午餐. Nothing comes from nothing, and in some cases, even something ...

  5. 图片的onerror 事件解析

    1. 该事件触发条件 文档和图像在加载失败的时候(用户体验会下降.)会触发该事件 2. 解决碎图的办法 利用img的onerror事件和javascript 例: 现有的图片是 successed.p ...

  6. Postman如何测试Webservice接口？

    一般情况下使用soapui工具测试ws接口,那么能不能使用postman测试呢?当然可以,往下看. 1. 首先请求类型为post 填写上ws地址 ,url地址后不追加?wsdl 2. 设置请求头 he ...

  7. 解决idea无法下载通过maven添加的jar包以及下载网速过慢的问题

    在idea上使用Maven来添加依赖的jar包 发现无法下载jar包 总是提示某几个包下载失败 最后发现原因有两个(版本与网速的问题 对应解决如下) 一主要是因为版本的问题 我的idea是2019年1 ...

  8. linux的mysql主从

    数据库备份命令:mysqldymp -u username -p password -B databaseName > fileName.sql 拷贝到从服务器:scp fileName.sql ...

  9. ubuntu的apt

    1. apt edit-sources  #编辑apt的源列表( 或者直接写这个命令:vim /etc/apt/sources.list ) 2. apt list   #列出包含条件的包(已安装,可 ...

  10. maven 配置环境变量后报错jdk版本不符

    不需要再cmd 输入java -version,因为环境变量里配置的不一定是cmd显示版本,直接看环境变量改成maven要求的jdk版本即可.