盒子模型 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; 
}

嵌套：

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>W3Cschool教程(w3cschool.cn)</title>
  5. <style>
  6. p
  7. {
  8.     color:blue;
  9.     text-align:center;
  10. }
  11. .marked
  12. {
  13.     background-color:red;
  14. }
  15. .marked p
  16. {
  17.     color:white;
  18. }
  19. </style>
  20. </head>
  21.  
  22. <body>
  23. <p>This paragraph has blue text, and is center aligned.</p>
  24. <div class="marked">
  25. <p>This paragraph has not blue text.</p>
  26. </div>
  27. <p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
  28. </body>
  29. </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. POCO的理解

    POCO的名称有多种,pure old clr object. plain ordinary clr object等 POCO的概念是指那些没有从任何类继承,也没有实现任何接口,更没有被其它框架侵入的 ...

  2. 交换分区swap和日志系统

    目录 1.使用系统中的某个文件作为swap分区 1.1创建swapfile 1.2格式化swap分区 1.3检查当前swap分区情况 1.4临时启用新建swap分区并查看情况 1.5 关闭新建的swa ...

  3. 洛谷——————ISBN号码

    ISBN号码 题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括99位数字.11位识别码和33位分隔符,其规定格式如x-xxx-xxxxx-x,其中符号-就是分隔符(键盘上的减 ...

  4. pyinstaller 处理后程序找不到模块

    可将模块文件夹拷贝到当前文件夹中

  5. 吴裕雄 python 人工智能——基于Mask_RCNN目标检测（2）

    import os import sys import itertools import math import logging import json import re import random ...

  6. synchronized锁机制的实现原理

    Synchronized 锁机制的实现原理 Synchronized是Java种用于进行同步的关键字,synchronized的底层使用的是锁机制实现的同步.在Java中的每一个对象都可以作为锁. J ...

  7. java编译器不匹配问题(java compiler level does not match the version of the installed java project facet)

    问题:项目经常copy过来,经常会报说Java编译器不匹配 解决方法:找到项目所在的目录,在.settings子目录里面,用文本编辑器打开org.eclipse.wst.common.project. ...

  8. iOS 实现 摇一摇

    摇一摇功能:调用了系统自带加速器,当设备摇动时,系统会 计算出加速器的加速值,然后告诉设备是否发生摇动手势,系统只会运动开始和结束时通知你,并不会在运动发生的整个过程中始终向你报告每一次运动.例如,你 ...

  9. disconf---分布式配置管理平台的搭建（windows版本）

    本人由刚开始接触博客,难免会有不足和错误,写博客只是记录本人在学习和工作的过程中的成长,如有不足,欢迎各位指正,谢谢~ 一.废话不多说,直接进入正题: ①获取github代码 https://gith ...

  10. js 判断回文字符串

    回文字符串:字符串从前往后读和从后往前读字符顺序是一致的. 判断一个字符串是不是回文字符串 function isPalindrome(str) { var str1 = str.split(''). ...