html个人浮水入门day05

1.盒子模型

盒子模型又称“框”模型，（ box model）

页面上所有元素可看作盒子模型

边框，外边距，内边距，尺寸

　　盒子模型：（这是截图，忽略图中数据）

　　margin:外边距

　　　　margin-top:上部外边距

　　　　margin-bottom:底部外边距

　　　　margin-left:左外边距

　　　　matgin-right:右外边距

取值：

px、%（比较少用）、负值、auto

margin：取值；（同时作用于上下左右）

margin：1px 1px；（第一个值作用于上下，第二个值作用于左右）

margin：1px 1px 1px;（上，左右，下）

margin：1px 1px 1px 1px ；(上右下左，顺时针)

　　　　margin-top:1px;

　　　　margin-bottom:1px；

　　　　margin-left:1px;

　　　　matgin-right:1px;

*当左右边距命名为auto时，标签居中

　　　　*垂直外边距合并：

两个垂直外边距相遇时，会合并成一个垂直外边距，值取两个中较大的一个

*<hn></hn>、<p></p>、<body></body>系统默认存在外边框，可以去掉

　　padding：内边距,内容与边框的间距

　　padding-top:上部内边距

　　　　padding-bottom：下部内边距

　　　　padding-left：左内边距

　　　　padding-right：右内边距

取值：取值方式和margin相似，但是没有auto和负数

*元素内边距增加时元素所在框的占地也增大

例：<div class="d1">

</div>

css:.d1{

width:100px;

height:100px;

border:1px solid red;

}

若添加padding-left:20px;则父级div的宽度时120px;

　　2.背景

（1）背景色

background-color:背景颜色

取值：合法颜色值

（2）背景图片

background-image:背景图片

取值：url(图像路径)

background-image:url("图像路径");

（3）背景重复

背景会在水平和垂直方向铺满整个框

属性：background-repeat

取值：

repeat：默认值，水平垂直平铺

repeat-x:水平平铺

repeat-y:垂直方向平铺

　　　　　 no-repeat:取消平铺

（4）背景图片固定

background-attachment:scroll;(默认值)

fixed:背景图片相对于所在视窗固定在页面中，所在视窗怎么滚动背景都不会动

scroll:在所在框内固定，框内元素动图片不会动，但当所在框移动时，背景图片也会动

　　　（5）背景定位

改变背景图片在框中的位置

background-position

取值：

x 水平方向移动 y 垂直方向移动 x% y%;

0% 0%:显示在元素的左上方

100% 100%：显示在元素的右下方

50% 50%：显示在元素的居中位置

left :靠左
　　　　　　　   right:靠右
　　　　　　　   center :将元素显示在水平或垂直方向的中间
　　　　　　　   top:靠上
　　　　　　　   bottom:靠下

背景图片属性常用取值方式：

background:url() repeat position;

　　 3 、文本格式化

（1）指定字体

font-family：value1，value2.........；

font-family:"宋体"，"楷体";

（2）设置字号

font-size:1px;

(3) 设置字体宽度

font-weight:1px；

(4) 字体样式

font-style：normal/italic(斜体)；

（5）字体以小号的大写字母显示

font-variant:normal/small-caps;

转载于:https://www.cnblogs.com/fbbg/p/10413768.html

html个人浮水入门day05相关推荐

html个人浮水入门day02
1.标签也称为标记或元素 <body></body> 1.1标签是可以相互嵌套的 <a></a>超链接 <img/>图片标签 &l ...
html个人浮水入门day01
THML:超文本标记语言(Hyper Text Makup Language ) (1)html不是编程语言,是一种标记语言,拥有一套标记标签 (2)语法:由一组表示特定功能的符号组成,由<&g ...
通达信挖掘大牛浮水指标公式源码
通达信挖掘大牛浮水指标公式源码 MA5:MA(CLOSE,5); 短趋势:MA(CLOSE,13),COLORRED,LINETHICK2; MA20:MA(CLOSE,20); MA30:MA(CL ...
警惕！百度电视云布局已浮水客厅战略先夺电视入口
近期陆陆续续的看到百度推了好几款机顶盒产品,除了自身的影棒系列,还有合作的云盒系列,而就在我研究百度电视云战略布局的夜里,突然看到一条关于"广电总局发函关闭互联网电视盒子视频客户端" ...
虾米音乐腾讯视频争好声音版权阿里数娱音乐布局浮水
进入2014年以来,阿里数娱一直没闲着,刘春宁到处串场为阿里在文化产业的布局摇旗呐喊.过去半年,阿里数娱已经先后完成了在游戏.动漫.影视等领域的布局,这两日在音乐领域的布局也正式浮出水面. 相隔一天时 ...
O2O大浪下媒介O2O大鳄浮水
近期,分众大规模的在全国各大城市楼宇电梯广告屏上投放"全城示爱"活动广告,不少业界人士认为今年情人节是分众再度启动上市的前奏,同时也是在借机向市场传达分众2.0的新形象. 从投入规 ...
水位检测专用芯片VK36W1D电容式专用检水触控IC1-8点高灵敏度 4S自动校准功能
型号:VK36W8I 品牌:VINKA/永嘉微电封装形式:SOP16/QFN16L 年份:新年份概述 VK36W8I具有8个触摸检测通道,可用来检测8个点的水位.该芯片具有较高的集成度,仅需极少的 ...
古训《增广贤文》补遗
<增广贤文> 前人俗语,言浅理深,补遗增广,集成书文. 世上无难事,只怕有心人. 金凭火炼方知色,与人交财便知心. 乞丐无粮,懒惰自成. 勤俭为无价之宝,节粮为众妙之门,省事俭用,免得求人 ...
从 Android 静音看正确的查bug的姿势？
0.写在前面没抢到小马哥的红包,无心回家了,回公司写篇文章安慰下自己TT..话说年关难过,bug多多,时间久了难免头昏脑热,不辨朝暮,难识乾坤...艾玛,扯远了,话说谁没踩过坑,可视大家都是如何从坑 ...

html个人浮水入门day05

html个人浮水入门day05相关推荐

最新文章

热门文章