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)!