H5盒模型基础

1.<meta charset="utf-8">

2.属性:width:宽度    height:高度

3.背景:background

background-attachment:fixed;  背景是否滚动

    background-color:gray;背景颜色

    background-image:url(bg. jpg);背景图

    background-repeat:no-repeat;背景图是否重复

    background-position:center,等等;背景图位置

4.边框:border

    border-width:边框宽度

    border-style:边框样式

    border-color:边框颜色

    边框样式:solid实线;dashed虚线;dotted点线(IE6不兼容);

    例:border:1px solid red;边框为1像素大实线红色边框

5.内边框:padding

    padding-top:上边内边距

    padding-right:右边···

    padding-left:左边···

    padding-bottom:下边···

    注意:内边距相当于给盒子加了填充厚度,会影响盒子大小。

6.外边距:margin

    margin:top,right,left,bottom;(同上,不包括注意)

时间: 2024-10-08 15:08:57

H5盒模型基础的相关文章

html盒模型基础

盒模型 概念:如果CSS对HTML文档元素生成了该元素在HTML文档布局中占据空间的矩形元素框(element box),称盒子 通过一系列定义盒子的相关属性(内容content,填充padding,边框border,边界margin),控制各个盒子乃至HTML文档来呈现的效果与布局结构 border:5px solid/dash虚线/dotted点划线/double双线 #444;值加在原有元素的高宽上 padding:值加在原有元素的高宽上的,如果要保持元素不变,需要调整高宽 {20px上下

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

css3基础教程:CSS3弹性盒模型

今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. 注意:Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局. 盒模型的兼容性不佳,在使用时,需要加上浏览器的私有前缀. 父元素display:box或者display:inline-box; display: -webkit-box;display: -m

XHTML+CSS基础知识(三):盒模型

盒模型的四要素:content(内容).border(边框).padding(内边距).margin(外边距). 页面当中的每一个元素都会被看做是一个矩形框,这个框有内容.内边距.边框.外边距组成. 1.盒模型的四要素分别指什么? 内边距出现在内容区域的周围,如果在元素上添加背景,那么背景会应用于内容和内边距相加组成的区域. 添加边框会在内边距的区域以外添加框线,这些线可以有多种样式,比如实线.虚线.点线等. 在边框外边是外边距,外边距是透明的,一般使用它来控制元素之间的间隔. 2.盒模型中一个

CSS基础 - 盒模型、浮动、定位

1 CSS盒模型 在以前,程序员们是通过表格来对一个网页进行排版,也就是通过大小不一的表格和表格嵌套来定位排版网页的内容.后来,CSS出现之后,在网页布局中,为了能够使页面中的各个部分合理的进行组织,开发人员们总结出了一套完整的.行之有效的原则和规范,也就是"盒模型".它是通过使用CSS来定义大小不一的盒子和盒子嵌套来编排网页. 因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器. 页面中的所有元素都可以看成是一个盒子,一个页面由很多的盒子组成,这些盒子之间会相互影响,所以

CSS3弹性盒模型flexbox布局基础版

原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案.另外本人2014年5月还废寝忘食的翻译了国外的<CSS3弹性盒模型flexbox完整教程>和<CSS3弹性盒模型flexbox布局实例>,这么好的文章没有人来发现,实在是遗憾. 文章写作背景 查询Can I use上的使用情况,发现最新的浏览器基本支持这个属性,IE10开始

HTML基础--盒模型

盒模型的属性: margin,border,padding,内容大小 线上显示地址http://js.jirengu.com/codutazowi test1使用了border-box后的变化 test2没使用border-box的变化 test1就是使用了border-box,模仿了怪异模式中的IE盒模型,就是内容大小=边框+padding+border. test2就是标准盒模型,内容大小就是内容大小,padding就内边距,边框依然是边框,各自占用大小.

web前端——html基础笔记 NO.13{盒模型,颜色值,字体的缩写}

盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为10px.右设置为15px.下设置为12px.左设置为14px*/ 通常有下面三种缩写方法: 1.如果top.right.bottom.left的值相同,如下面代码: margin:10px 10px 10px 10p