第三章 样式 盒模型

原创 2017年10月07日 00:13:07

一、css样式

  • 行内样式:style="width=300px;background:red"
  • 内部样式:<style type="text/css">多条css规则</style>
  • 外部样式:<link rel="stylesheet" type="text/css" href="css文件路径"/>

    三者优先级:
    采取就近原则,相同属性不同值会被覆盖。
    行内样式>内部样式>外部样式

二、 盒模型

盒模型包括:元素内容、内边距、边框和外边距。
  • 元素框的最内部分是实际的内容 直接包围内容的是内边距
  • 内边距呈现了元素的背景
  • 内边距的边缘是边框
  • 边框以外是外边距 外边距默认是透明的 因此不会遮挡其后任何元素

    注意:背景应用与内容和内边距、边框组成的区域 在css中 width 和height指的是内容区域的宽度和高度 增加内边距、边框和外边距不会影响内容区域的尺寸 但是会增加元素框的总尺寸。

    内边距:padding-top padding-right padding-bottom padding-left
    注意:padding 不允许存在负值
    padding

    • 四个值 padding:上 右 下 左
    • 三个值 padding:上 左右 下
    • 两个值:padding:上下 左右
    • 一个值:padding:上下左右

    边框:border-top border-right border-bottom border-left
    border:1px【边框大小】 solid【边框样式】 red【边框颜色】;
    边框样式:
    - none 无边框
    - solid 实线
    - dashed 虚线
    - dotted 点状
    - double 双线
    - grove 3D凹槽
    - ridge 3D垄状
    - inset 3Dinset
    - outset 3Doutset
    边框颜色

    • 十六进制颜色值 #CC00FF 可简写成#C0F
    • 英文单词 red blue pink yellow green

    外边距:margin-top margin-right margin-bottom margin-left
    注意:margin允许存在负值
    margin

    • 四个值 margin:上 右 下 左
    • 三个值 margin:上 左右 下
    • 两个值:margin:上下 左右
    • 一个值:margin:上下左右

      盒模型的大小:
      宽:元素宽度+左右内边距+左右边框
      高:元素高度+上下内边距+上下边框

    盒模型的站位大小:
    宽:元素宽度+左右内边距+左右边框+左右外边距
    高:元素高度+上下内边距+上下边框+上下外边距

版权声明:本文为博主原创文章,未经博主允许不得转载。

《CSS+DIV网页样式与布局从入门到精通》第九章学习笔记(一)盒模型

这是我自己总结的清华大学出版社《CSS+DIV网页样式与布局从入门到精通》第九章第一节盒模型的学习笔记,就是按照顺序写的,没有太多条理,如果要看的话建议对照着这本书看,都是一些小细节,也没什么特深奥的...
  • Jjwxyz
  • Jjwxyz
  • 2016年08月19日 14:15
  • 526

CSS3-盒模型基本样式

paddingpadding 内填充(padding在元素的边框以内,内容之外,padding同样显示元素的背景,background-position的原点是padding的左上角) paddin...

HTMLCSS基础—margin、盒模型和结构样式

margin是一种复合属性,用来控制页面两个版块之间的间距大小,同padding一样margin也可用复合的方式进行编写,margin: top right bottom left。 当控制两个版块...

HTML5基础加强css样式篇(css属性:怪异盒模型解析)(四十六)

1.怪异盒模型和border有关: 设置border宽度可以影响其他元素的布局:但是在IE5及以下里面只是影响其子元素; 2.可以同时设置 box-sizing属性来使用这一特性,是其改变bord...

深入XSLT第三章 --- 样式表结构

深入XSLT第三章 --- 样式表结构 在XML文件中样式表用元素xsl:stylesheet来表示. XSL处理器处理源文件和样式表时都必须采用XML的名域(Namespace...

第三章:CSS中的样式选择器

1.通用选择器 通用选择器是一个星号,它类似于通配符,匹配文档中所有的标签: 2.HTML选择器 3.类选择器 4.ID选择器 5.后继选择器(关联选择器) 6.组合选择器 7.伪元素选择器...

机器学习(周志华) 参考答案 第三章 线性模型 3.3

机器学习(周志华) 参考答案 第三章 线性模型 3.3机器学习(周志华西瓜书) 参考答案 总目录 http://blog.csdn.net/icefire_tyh/article/details...

机器学习(周志华) 参考答案 第三章 线性模型

机器学习(周志华) 参考答案 第三章 线性模型 机器学习(周志华西瓜书) 参考答案 总目录 http://blog.csdn.net/icefire_tyh/article/details/5...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第三章 样式 盒模型
举报原因:
原因补充:

(最多只允许输入30个字)