文本缩进距离
text-indent:2em 缩进2个文本。
1em=1 font-size(相对1个字体大小)=16px px是相大小。cm等长度单位是绝对大小。
line-height:字体行高
删除线
<del>原价50元</del>——为保证网页的行为、样式、结构三者相分离,一般不使用这种。
原价50元
<span>原价50元</span>
span{text-decoration:line-through;}———删除线
span{text-decoration:underline;}———下滑线
span{text-decoration:none;}———取消下滑线
<span>原价50元</span>
span{text-decoration:line-through}
cursor——设置鼠标箭头形状
伪类选择器
元素分类
行级元素、内联元素、Inline
feature:内容决定元素所占位置、不可以通过CSS改变宽高
span strong em a del
块级元素、block
feature:独占一行、可以通过CSS改变宽高
div p ul li ol form address
行级块元素、inline-block
feature:内容决定大小、可以改变宽高
img
当css样式设置为display:block 则标签为块级元素
当css样式设置为display:inline 则标签为行级元素
当css样式设置为display:inline-block 则标签为行级块元素
凡是带有inline的元素,都有文字特性,会出现文字4px的边距。
比如图片与图片之间出现边距就是因为<img>带有inline的元素。
有些编程者会选择这种手段去掉边距
margin-left:-4px ——但是当线上测试的时候会出现一些问题
所以正常手段是:直接让所有的<img>标签之间没有空格
编程思维
1、先写结构,再写样式
2、先写样式(定义功能),再写结构,因为一般团队开发都可以用前人定义过的功能,从而可以直接写结构就好了。