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)
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 可生成随机内容
组件样式越简单,通用性越高
|