CSS入门(盒子模型的三个构成部分)

  一、边框属性

  作用:给元素加上一个边框
  第一种:
    border-top
    border-bottom
    border-left
    boder-right
    三个属性值: 粗细 线型 颜色
  第二种:
    border :粗细 线型 颜色

     整个边框部分的调整。

    透明色:transparent

    允许你为元素添加圆角边框的属性:border-radius

    border-style的常见属性值:

描述
 none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。

    

  二、轮廓
    作用:绘制于元素周围的一条线,位于边框外

     用法跟border一样

    属性: 粗细 线型 颜色
      outline-width: 20px;
      outline-style: solid;
      outline-color: red;

  三、元素的分类
    块级元素:独占一行,对宽高设置有效,如果我们不给宽度的话,撑满整行,如果不给高度,高度会随着内容的变化而变化
    行内元素:设置宽高是无效的,不独占一行多个标签是可以同时存在一行的。完全是靠内容撑开的。
    行内块元素:不是独占一行,设置宽高有效,并且可以多个标签存在一行。
    可以使用 display 来改变元素的分类

      display的常见属性值:

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

  四、盒子模型

盒子模型的构成部分

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

    组成: 内容 内边距 边框 外边距
    边框:border
    内边距:padding 边框和内容之间的距离
    padding  存在一个值 上下左右都是改值
        存在两个值时分别对应     上下一个值 左右一个值
        存在三个值时分别对应 上 左右 下
        存在四个值时分别对应 上右下左
    可以单独的去设置 例如 padding-top
    外边距:margin 元素和元素之间的距离

    用法同padding,它改变的是外边距

原文地址:https://www.cnblogs.com/MDZZZ/p/12020225.html

时间: 2024-10-13 02:28:25

CSS入门(盒子模型的三个构成部分)的相关文章

前端开发HTML&amp;css入门——盒子模型以及部分CSS样式

CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局. 盒子模型 一个盒子我们会分成几个部分:– 内容区(content)– 内边距(padding)– 边框(border)– 外边距(margin) 盒子和边框   width和height background-color 盒子 设置的盒子内容区的大小 设置背景颜色  

CSS之盒子模型与面向对象

从接触B/S到今天才三天,学习了二十几集的牛腩,在web设计的时候学到了CSS的盒子模型,感觉这个东西是真的好,一个简单的盒子理论就把一个网页设计的全部概括了,简直是抽象的一个杰出代表,这里就把自己对盒子的认识写出来,看完后相信大家会觉得盒子其实也就那么回事. 什么叫盒子 说到盒子,鞋盒,饭盒,总之是装东西的东西,所以在web中,他也是指装东西的一个容器. 盒子和OOP的比较 说道web盒子,我们先给大家一些名词:内容(content).填充(padding).边框(border).边界(mar

这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则)

深入理解CSS系列(一):理解CSS的盒子模型

接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森破罢了.如果真的那么简单,为什么经常会遇到一些奇怪的样式问题,而要折腾好长时间呢?就是因为无从下手,终究还是基础不扎实啊!最近打算深入的学习一下CSS,以便遇到问题时,才知道如何下手,从而迅速的对症下药."深入理解"只是相对于我个人而言的哈,如果有大神觉得不够深入,请不喜勿喷.这是深入理解

CSS弹性盒子模型

<!-- # 用于学习css弹性盒子模型 - 是一种一维的布局模型.给flexbox的子元素之间提供了强大的空间分布和对齐能力 - display:flex 设置为弹性盒子 - flexbox内flex元素的默认属性 - 元素排列为一行 (flex-direction 属性的初始值是 row). - 元素从主轴的起始线开始. - 元素不会在主维度方向拉伸,但是可以缩小. - 元素被拉伸来填充交叉轴大小. - flex-basis 属性为 auto. - flex-wrap 属性为 nowrap.

深入了解CSS中盒子模型

原文:深入了解CSS中盒子模型 CSS中盒子模型介绍# 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什么组成的呢?有内容.内边距.边框.外边距. CSS中盒子的主要属性有5种如:width宽度.height高度.padding内边距.border边框.margin外边距. CSS中盒子模型实践# CSS中盒子模型实践,给大家看看我们CSS中的盒子长什么样. 代码块

CSS之盒子模型

盒子模型在CSS中是个很重要的概念.它是CSS可视化格式化系统的基石.盒子模型可以用于元素定位和网页布局.根据CSS盒子模型的规定,每个元素(不管是内嵌元素还是块级元素)都会产生一个矩形盒子围绕在元素内容之外.这个盒子我们称之为元素盒.当然还有其他盒子,这里我们主要说说元素盒. 下面是一张盒子模型的示意图: 从上图我们不难看出一个完整的盒子包括:内容(content).填充(padding).边框(border).边界(margin) 那我们来分别说说上面这四个部分. 首先是内容content

[ css 弹性盒子模型 box-flex 及相关属性 ] box-flex属性弹性盒子模型讲解及实例演示

box-flex属性(和谐版) 有道桌面词典显示,”flex”一词中文有“收缩”之意.不过,从此属性实际上产生的效果来看,无论怎样用“收缩”一词解释都显得很牵强.所以,这里,直接抛开字面意思,我们可以将”box-flex”理解为”房子-分配”.box为“盒子”的意思,我们可以理解为当下价格巨高的“房子”,”flex”指兄弟几个“分配房子”. 举个更实际点的例子:马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房.后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子.ok,先暂停下

CSS之盒子模型(深入理解)

CSS--盒子模型(Box Model) 简介: CSS盒子模型本质上是一个盒子,对网页中绝大部分的HTML元素进行包装定位(外边距,边框,内边距以及实际内容). 但是并不是所有的HTML元素都可以看作是盒子模型,例如图片(img)就不能看作是盒子模型,因为img中只能放图片,并不能添加其他的东西,所以它属于文字流.而盒子模型进行封装的元素大部分是文档流. 盒子模型中主要的区域: 盒子模型中主要包含元素的宽,高,外边距,边框,内边距以及实际内容. Width:主要区域的内容(content)的宽