当前位置:Gxlcms > html代码 > HTML5第五天笔记

HTML5第五天笔记

时间:2021-07-01 10:21:17 帮助过:27人阅读

CSS属性

段落属性

letter-spacing:10px; 字与字之间的距离

word-spacing:1px; 单词与单词间的距离 (多用于英文网站)

text-transform:capitalize(每个单词首字母大写)uppercase(全部大写)lowercase(全部小写)(多用于英文网站)

white-space:normal/nowrap(不换行)

盒模型

所有的标签都看作是一个盒子;

把块级元素看作一个大盒子,把行内元素看作一个小盒子

一个盒模型的体现由哪些部分组成?

width+height(内容的宽和高)+padding(内边距/内填充)+border(边框)+margin(外边距)

border:(边框)

border-top:

border-bottom:

border-left:

border-right:

border-bottom:(下边框)

border-bottom-style:solid(实线)dashed(虚线)dotted(点划线)double(双实线) 边框的线型

border-bottom-color:red/#fff;边框的颜色

border-bottom-width:3px;边框的粗细

border:3px solid red;

border:none/0;

border-top:none/0;

border-collapse:collapse(去掉重边)

padding:(内边距、内填充、内补白) 内容到边框的距离 相对

padding-top:

padding-left:

padding-right:

padding-bottom:

(padding会影响盒子的宽度和高度)

padding:10px(上下左右)

padding:10px 20px;(上下 左右)

padding:10px 20px 30px;(上 右 下)左=右《遵循顺时针的原则》

padding:10px 20px 30px 40px;(上 右 下 左)

padding:0 0 5px 0;(只能这样写)

margin:(外边距、外填充) 标签与标签之间的距离
相对

行内元素上下外边距无法实现

块级元素上下外边距无法累加,只能取最大值

无论行内还是块级元素左右的外边距都是累加值

外边距不会影响盒子的宽度和高度

margin:10px(上下左右)

margin:10px 20px;(上下 左右)

margin:10px 20px 30px;(上 右 下)左=右《遵循顺时针的原则》

margin:10px 20px 30px 40px;(上 右 下 左)

margin:0 0 5px 0;(只能这样写)

一个盒子的实际大小:

宽度:内容的宽(width)+border(左右)+padding((左右)+margin(左右)

高度:内容的高(height)+border(上下)+padding(上下)+margin(上下)

外边距的应用:使盒子在浏览器中居中,在父元素的居中方式

margin:0 auto;

CSS3新增的属性

box-sizing:border-box/content-box 忽略border和padding的值

以上就是HTML5第五天笔记的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

人气教程排行