付费节点推荐

免费节点

节点使用教程

很多学习web前端开发的朋友，在前期学习css样式时，对css样式都表示不熟悉，记不住css样式、标签表达的含义，今天整理了一份我们常用的css样式和标签，欢迎大家收藏。
1.字体样式：
font-family："字体样式";
font-size："字体大小";
color:字体颜色;
font-weight:bold; 粗体显示
font-style:ITalic 斜体
text-decoration:"underline"; 显示下划线效果
text-decoration:"line-through"; 类似于淘宝打折的删除线
text-indent:2em; 文字段落的第一行空两格
line-height: 1.5em;设置行高
letter——spacing 字母与字母之间的间隔
word-spacing 英语单词之间的间隔
text-align 块状元素居中显示
2. 元素分类
块状元素和内联元素，内联块状元素
块状元素和内联元素的最大区别就是 块状元素必须独自占一行
a.常用的块状元素：
<div>,<p>,<h1>,<ol>,<ul>,<dl>(自定义列表),<table>,<address>,<blockquote>,<form>
其特点是 ：
1.每个元素都独占一行
2.元素的高度，宽度，行高，以及顶和底边距离都可以设置
元素宽度在不设置是和父容器一个高度
b.常用的内联元素
<a>,<span>,<br>,<i>(页面的所有文字以斜体效果显示),<em>,<strong>,<lable>,<q>,<var>,<cITe>,<code>
其 特点:
和其他元素都在一行上
元素的高度，宽度，顶部和底部都不可进行设置
元素的宽度就是他的问题和图片的宽度不可以改变
常用的内联块状元素有
<img>,<input>
将内联元素转换为块状元素的 方法 display:block;
块状元素转换成内联元素的方法: display: inline;
内联块状元素，两种元素一起使用 : display:inline-block;
盒子模型:
border : 2px solid red; 设置边框粗细为2px的样式为实心，颜色为红色
他等于
border-width:2px;
border-style:solid; dashed 是虚线 dotted 点线 solid 实线
css样式表中只允许设置一个方向样式
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
边界设置 用 margin
边框用 border
填充用padding
**css  布局**
三种模型
1. 流动模型(Flow);
2.浮动模型(Float);
3.层模型(Layer);
1.流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
float-left; 向左边浮动
3.层模型有三种形式：
1、绝对定位(posITion: absolute)
如果想为元素设置层模型中的绝对定位，需要设置posITion:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div{
width:200px;
height:200px;
border:2px red solid;
posITion:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
2、相对定位(posITion: relative)
如果想为元素设置层模型中的相对定位，需要设置posITion:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
div1{
width:200px;
height:200px;
border:2px red solid;
posITion:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
3、固定定位(posITion: fixed)
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
div1{
width:200px;
height:200px;
border:2px red solid;
posITion:fixed;
left:100px;
top:50px;
}

未经允许不得转载：Bcoder资源网 » css样式整理

相关推荐