Web前端HTML CSS细节精炼摘要

Web前端HTML CSS细节精炼摘要

浏览器不会解析多余的空格、制表符、换行符

<a href=“跳转网址” target="打开页面方式:_self(当前页) | _blank(新标签页) " >

单标签<base target="">统一修改页面链接跳转方式

img四要素 src width height alt ,赋值不用加单位

img中的alt属性:加载出错显示,提供爬虫识别关键字

dl>dt+dd自定义列表 :dt默认不会缩进,dd会相对缩进

谷歌最小12px,像素设定最好为偶数

复合font字体样式写法:font:font-style font-weight font-size/line-height font-family

常见颜色#333偏黑 ,#ccc偏灰，#fff纯白

line-height:100% 百分比相对于当前标签字体大小

text-indent: -999999 px隐藏文本

块元素:ui、ol、li等

行内元素宽根据内容来

img是**inline(行内)元素,特殊二维实体,可以直接设定宽高可通过vertical-align：middle或display:block消除多余区域(bug)
bug:图片和文本同行对齐的时候 图片底部会对齐文本基线 这就导致图片下面会有这个空隙

body默认有8px外边距

boder:double边框为双实线

如果内容区域宽高定死,内边距会撑大盒子模型

块元素，默认不设定高度,设定宽度,通过padding直接实现上下左右居中对齐

竖行文本实现技巧:外部块元素div设定死宽高,内部块元素通过padding实现文本空间的压缩实现

块元素代码之间的空格会成为页面两元素间隙的原因

margin:上下外边距融合空间取最大值,左右相加

html {height:100%}:html100%继承历览器可视区域窗口的宽度window

ul一级子元素只有li

img设定宽度后,可设定height为auto等比适配

display:inline-block 宽度由内容决定

行内元素宽度根据内容来,行内元素也没办法设置宽度高度,只能根据内容来

消除外边距穿透:父元素需要加一个border边界,padding内边距

怪异盒模型:box-sizing:border-box
当内边距(padding)+边框(border) < width宽度,总宽度为width,内容区域content被压缩
当内边距(padding)+边框(border) > width宽度,总宽度为padding+border,内容区域被压缩没了
默认为常规盒模型:box-sizing:content-box

text-align影响行内、行内块元素水平对齐方式

用边框border效果替代

---

上下间距最好用padding推开

继承来的样式权重最低

opacity赋值给父元素,则父元素内部所有元素均会影响

(顺序要求)例:link ;visited(消除访问过效果,需删除浏览器浏览记录),hover,active

多行文本隐藏:
必须要把 宽度 高度设定好
1.控制多行文本
display:-webkit-box; //如果想为行内样式 display:-webkit-inline-box
-webkit-box-orient:vertical;
-webkit-line-clamp: 3; //控制在第几行结尾进行显示
overflow:hidden;
2.控制单行文本
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

i默认为斜体,用font-size:normal清除斜体

伪元素::before和::after默认为display:inline

lable标签通过for绑定与其id值相同input控件,可通过点击标签,聚焦对应input控件

浮动的元素都会转换为类似inline-block的效果,实质为block

清除浮动:
影响:父容器塌陷
**1.**就是把浮动的盒子圈到父盒子里面,从而不影响父盒子外部元素

.one {
clear:both
}
1.在父盒子中 最后一位 标签设定clear属性,已清除内部所有浮动影响
2.可以给父盒子自身设定伪元素.one::after{}清除浮动

**2.**overflow:hidden ,创建了BFC,以消除浮动所带影响
3.双伪元素清除浮动:

.clearfix:before,.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
	visibility:hidden;
	font-size: 0;
	height: 0;
}
.clearfix {
	*zoom:1;
}

fixed 固定定位,默认由window view(可视窗口)决定位置

position:absolute可以默认转化为block

position:absolute默认位置自身初始位置.只有加上top和left等才会根据定位父级变化位置

绝对定位的宽度高度100%,是相对于定位父级决定的,而不是结构父级.定位父级可以是absolute、relative、fixed.

利用绝对定位实现 水平垂直居中:

//1.第一种方法:(推荐)
//实现绝对定位 水平垂直居中 
html,body {
height: 100%
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

width: 100px;
height: 100px;
}
//2.第二种方法:
//实现绝对定位 水平垂直居中 
html,body {
height: 100%
}
.box {

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

width: 100px;
height: 100px;
}

z-index 层级,生效于相对定位、绝对定位、固定定位

inline-block对于margin: 0 auto不生效

html快捷生成标签：

ul>li*5>p+a+img[img=/img/one.png alt=! width=100 height=100]

英文与中文结合的文本,可能会出现每行的宽度不对齐,通过text-align:justify修正

p,dt,h最好不要嵌套块元素

css书写规范顺序:
1.位置,渲染—>2自身—>3.文本修饰

设定无边框为border:none

text-indent:-9999隐藏logo文本

点击默认a标签不跳转:<a href=“javascript: ;”>

box-show: 0 0 10px #333 轻微出现悬浮效果

transform:translate(x,y):渲染实质位置没动(没有脱离文档流),只是看起来动了

css三角形绘制

width:0;
height:0;
border:10px solid transparent;
border-right-color:green;
border-bottom-color:green;

one::affter {
content:attr() //通过attr函数获取one标签中自定义的属性
}

text-align:justify文本两端对齐
text-align-last:最后一行文本对齐方式

设置文本波浪线:text-decoration:underline wavy red;

父元素设定为弹性盒子flex,则子元素都会默认设为块元素!

min-width和max-width控制flex最大最小宽度以保持整体效果

运用字体图标,标签样式font-family使用 !important强制优先级

阿里图标可在伪元素中使用,16进制编码,在编辑图标界面左下角

BFC:形成独立的大箱子,达到内部子元素与外部元素隔离,无相互影响效果.

BFC形成条件:
1.根元素
2.float属性
3.位置position属性为absolute |fixed
4.display为inline-block | table-cell | flex | inline-flex
5.overflow为 hidden | scroll | auto

设定BFC后不会与其他浮动元素产生交集!

padding,margin设定为百分比时,默认以父元素宽度为标准

视口单位:vw | vh | vmin | vmax

文本模糊

.text {
	color: transparent;
	text-shadow:#111 0 0 5px;
}

style标签默认为dislpay：none

轮播图左右按钮可用<a>或span标签,ul同一级别

具体项目类名可注意最前面带上项目名称简写

字体综合写法:font:字体大小/行高(可用倍数) 字体类型;

transform无法作用于内元素

下拉动画菜单动画主属性:max-height=0 =>max-height:500px,visitility:

可用<div>+<a>替换ul +li

opacity可以应用于按钮的hover反馈上

组件样式越简单,通用性越高

p>lorem*3 可生成随机内容

组件样式越简单,通用性越高