前端笔记 - html+css

1、html，css

网页图标：

引入csss：

css样式分为行内样式，内联样式，外联样式

样式计算权重：

元素=1    class=10    id=100   style=1000  

去掉字体下划线：

text-decoration: none;

让字体不加粗:  font-weight:normal;

字体不倾斜： font-style:normal;

综合字体属性：（可以没有weight，line-height）

规则：
font: weight size/line-height family;
例：
font: 700 14px/24px 微软雅黑;

浮动：为了让多个块显示在一行上面

float: left;
float: right;
float: none; // 浮动的不再浮动

清除浮动：为了解决父盒子无高的问题，父盒子无高，后面的元素就会贴上来

a、给父元素加高  // 不推荐

b、标签法

c、overflow: hidden; 触发bfc

c：伪元素

d：双伪元素

定位：

position: relative; //相对定位
position: absolute; //绝对定位 -- 父相子绝（父亲相对定位，并没有脱离标准文档流；儿子相对父亲绝对定位跟着父亲变换）
position: fixed; //固定定位 -- 头部导航栏
position: static; // 约等于标准文档流 -- 定位的不再定位

网页稳定元素：（一般使用padding，height不可固定）

weight - height：最稳定
padding：其次
margin：最后考虑margin

鼠标样式：

cursor: pointer;   鼠标变成小手  
cursor: default;   小白 
cursor : move;   移动  
cursor : text ;    文本输入

圆角样式：(规则：上右下左，左上角，右上角，右下角，左下角)

border-radius: 4px 4px 4px 1px;

元素嵌套：

a、块级元素可以任意嵌套

b、行内元素只能嵌套（ b   u   span   i   s）

c、P不能嵌套div

d、a无所不能，但是a不能放a，input

z-index使用：

（

只有 定位的盒子 （除了static - 约等于标准文档流） 才有 z-index   

如果都是定位-绝对定位，他们默认的z-index  是  0  

最后的一个靠上

）

背景透明：

background: rgba(12,12,12,0.5); // 半透明背景
opacity: 0.5; // 盒子半透明,内容也半透明

隐藏样式：

.hide_show{
	display: none; // 隐藏 - 不占位置 
	display: table; // 此元素将作为块级表格显示
	display: block; // 此元素将作为块级元素显示
}
.hide_show{
	visibility: hidden; // 隐藏 - 占文档结构的位置
	visibility: visible; // 显示
}
.hide_show{
	overflow: hidden; // 超出部分隐藏
}