欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML5第五天笔记

程序员文章站 2022-05-25 17:15:57
...
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.php.cn)!

相关标签: HTML5