HTML5第五天笔记

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）！

Get笔记

Get笔记，一款AI驱动的知识管理产品

125

查看详情